个人中心
gpt4 book ai didi

python - 使用相对 href 链接生成递归站点地图

转载 作者：太空狗 更新时间：2023-10-30 00:38:23 26 4
gpt4 key购买 nike

我正在使用 Flask 在网页上公开 HTML 文件的本地目录。

我还使用 jinja2 在我的主要端点的左侧 div 中生成站点地图。

我无法正确指定指向我的子文件夹端点的 URL。

如以下代码中所述，我如何从 /docs(即 /docs/folder1/subfolder1/SubFolder1Page.html)动态构建相关链接？我目前为 href 设置值的方式显然不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Docs Demo</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div id="container">
        <div class="left_frame">
            <h1>{{ tree.name }}</h1>
            <ul>
            {%- for item in tree.children recursive %}
                <!-- How would I build a relative link from /docs/ i.e. /docs/folder1/subfolder1/SubFolder1Page.html -->
                <li><a href="docs/{{ item.name }}" target="iframe1">{{ item.name }}
                {%- if item.children -%}
                    <ul>{{ loop(item.children) }}</ul>
                {%- endif %}</a></li>
            {%- endfor %}
            </ul>
        </div>
        <div class="right_frame">
            <iframe name="iframe1"></iframe>
        </div>
    </div>
</body>
</html>

文件夹结构示例:

demo structure

显示 file1.html 内容的总体情况: sitemap view

最佳答案

所以我想出了一个令人满意的方法来解决我自己的问题。

我设法得到了这个非常实用的结果: Flask serving Docs demo

请注意，我的模板仅适用于带有 .html 的文件扩展名，尽管它可以很容易地增强以支持其他文件扩展名。

这是我最终确定的 templates\template.html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Docs Demo</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div id="container">
        <div class="left_frame">
            <h1>{{ tree.name }}</h1>
            <ul>
            {%- for item in tree.children recursive %}
                {% if '.html' in item.name %}
                    <li><a href="docs/{{ item.name }}" target="iframe1">
                    {{ item.name.split('/')[-1:][0] }}
                    {%- if item.children -%}
                        <ul>{{ loop(item.children) }}</ul>
                    {%- endif %}</a></li>
                {% else %}
                    <li>{{ item.name }}
                    {%- if item.children -%}
                        <ul>{{ loop(item.children) }}</ul>
                    {%- endif %}</li>
                {% endif %}
            {%- endfor %}
            </ul>
        </div>
        <div class="right_frame">
            <iframe name="iframe1"></iframe>
        </div>
    </div>
</body>
</html>

你可以引用King Reload的回答分析我在template.html里面改了什么。文件以使其正常工作。

这里是 demo_app.py通过 Flask 为我的文档 HTML 文件提供服务的脚本:

import threading
import os
import webbrowser
from flask import Flask, render_template, send_from_directory


app = Flask(__name__, static_folder='static')

ROOT = os.path.dirname(os.path.abspath(__file__))
DOCS_ROOT = os.path.join(app.static_folder, 'docs')


@app.route('/')
def docs_tree():
    return render_template('template.html', tree=make_tree(DOCS_ROOT))


@app.route('/docs/<path:filename>')
def send_docs(filename):
    return send_from_directory(directory=DOCS_ROOT, 'docs'), filename=filename)


def make_tree(path):
    tree = dict(name=os.path.basename(path), children=[])
    try:
        lst = os.listdir(path)
    except OSError:
        pass  # ignore errors
    else:
        for name in lst:
            fn = os.path.join(path, name)
            if os.path.isdir(fn):
                tree['children'].append(make_tree(fn))
            else:
                np = os.path.join(path.replace(DOCS_ROOT, ''), name).replace('\\', '/')
                if np.startswith('/'):
                    np = np[1:]
                tree['children'].append(dict(name=np))
    return tree

if __name__ == '__main__':
    host = 'localhost'
    port = '8888'
    url = 'http://{h}:{p}'.format(h=host, p=port)
    threading.Timer(3, lambda: webbrowser.open(url)).start()
    app.run(host=host, port=port, debug=False)

demo_app.py 中最显着的变化因为问我原来的问题如下:

  • 初始化后app ，我设置了DOCS_ROOT使用 app.static_folder ;
  • 在函数中send_docs() , 我改变了 send_from_directory()的 directory使用参数 DOCS_ROOT ;

  • make_tree() 内部, 在 else 里面for 的 block 循环，我补充说:

    np = os.path.join(path.replace(DOCS_ROOT, ''), name).replace('\\', '/')
    if np.startswith('/'):
        np = np[1:]

    所有这一切都是采用 name 的绝对路径, 删除匹配 DOCS_ROOT 的内容，只留下相对路径(然后将 \\ 替换为 / )，从而得到来自 static/docs 的简单相对路径.如果相对路径以 / 开头，我将其删除(因为在 / 中有一个来自 docs 的尾随 template.html。

对于任何对我使用的简单样式表 ( static\styles.css ) 感兴趣的人(以及一些更新的增强功能):

html {
    min-height:100%;
    position:relative;
}

body {
    overflow:hidden;
}

.container {
    width:100%;
    overflow:auto;
}

.left_frame {
    float:left;
    background:#E8F1F5;
    width:25%;
    height:100vh;
}

.right_frame {
    float:right;
    background:#FAFAFA;
    width:75%;
    height:100vh;
}

.right_frame iframe {
    display:block;
    width:100%;
    height:100%;
    border:none;
}

关于python - 使用相对 href 链接生成递归站点地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44271535/

26 4 0
文章推荐： python - 从 Pandas Series/Dataframe 中减去聚合
文章推荐： c# - 使用 EPPLUS 对 excel 行进行分组
文章推荐： c# - ExcelDataReader 数据类型 "date"被转换
文章推荐： c# - c#中动态类型的内存使用
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com