0

我正在使用烧瓶构建一个网络应用程序。我发现我一遍又一遍地重复着同样的事情，对我的每个 HTML 页面都做了一个小的编辑，所以我想把它变成一个模板。如何使其成为动态模板？下面是我用于我的ABOUTUS页面的代码，它与我的CONTACT页面只有一行不同 。

关于我们 页眉：

 <div id="menu">
<div class="pure-menu">
    <a class="pure-menu-heading" href="#">WebAPP</a>

    <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="/" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item menu-item-divided pure-menu-selected"><a href="/aboutus" class="pure-menu-link">About</a></li>
        <li class="pure-menu-item"><a href="/membership" class="pure-menu-link">Membership</a></li>
        <li class="pure-menu-item"><a href="/contact" class="pure-menu-link">Contact</a></li>
        {% if current_user.is_authenticated %}
            <li class="pure-menu-item"><a href="{{ url_for('logout') }}" class="pure-menu-link">Log out</a></li>
        {% else %}
            <li class="pure-menu-item"><a href="/login" class="pure-menu-link">Log in</a></li>
        {% endif %}
    </ul>
</div>

联系页面标题：

 <div id="menu">
    <div class="pure-menu">
        <a class="pure-menu-heading" href="#">WebAPP</a>

        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="/" class="pure-menu-link">Home</a></li>
            <li class="pure-menu-item"><a href="/aboutus" class="pure-menu-link">About</a></li>
            <li class="pure-menu-item"><a href="/membership" class="pure-menu-link">Membership</a></li>
            <li class="pure-menu-item menu-item-divided pure-menu-selected"><a href="/contact" class="pure-menu-link">Contact</a></li>
            {% if current_user.is_authenticated %}
                <li class="pure-menu-item"><a href="{{ url_for('logout') }}" class="pure-menu-link">Log out</a></li>
            {% else %}
                <li class="pure-menu-item"><a href="/login" class="pure-menu-link">Log in</a></li>
            {% endif %}
        </ul>
    </div>
</div>

唯一的变化是我menu-item-divided pure-menu-selected根据我正在加载的模板将行从一行移动到另一行。我想不出一种动态执行此操作的方法，以便我可以将其转换为可以为每个文件扩展的模板。

4

1 回答 1

1

您可以使用上面评论中提到的标准 jinja 模板继承。

此处的文档：模板继承

方法一：

在您的文件中导入request方法，routes.py

使用 jingaif条件检查页面是否指向当前 url 端点。

<li class="pure-menu-item{% if request.path == '/contact'} menu-item-divided pure-menu-selected{% endif %}"><a href="/contact" class="pure-menu-link">Contact</a</li>

提示：您可以使用烧瓶动态 url 定义{{ url_for('contact') }}而不是硬编码 url。

方法二：（ 推荐）

这与烧瓶 jinja 无关，但在前端按预期工作，但使用带有 jQ​​uery 库的 JavaScript。

将此脚本添加到模板末尾的结束body标记之前。

jQuery版本

<script>
let current_path = "{{ request.path }}"
if (current_path === window.location.pathname) {
    $(".pure-menu-item a[href='"+current_path+"']")
    .prop("href", "#").closest('li')
    .addClass("pure-menu-item menu-item-divided pure-menu-selected");
}
</script>

香草 JS（纯 js）

<script>
    let current_path = "{{ request.path }}"
    let current_nav = document.querySelctor("div.pure-menu-item a[href='"+current_path+"']");
    if (current_path === window.location.pathname) {
        current_nav.setAttribute("href", "#");
        current_nav.closest('li').classList.add("pure-menu-item menu-item-divided pure-menu-selected");
    }
</script>

它能做什么？

如果当前 url 与上面导航中指定的 url 匹配，它会将menu-item-divided pure-menu-selected类添加到 div 并通过将实际 url 替换为 来禁用当前 url 路由#。

干净优雅。

为什么？

如果您使用 JavaScript，您不必在后端定义数百个，您在后端定义的{% if... %}那些if语句将在用户加载的每个页面中检查，另外您只需保存更多ifs 和elses 以检查加载的页面是否导航链接的页面并通过将 url 更改为#. 哇，您刚刚节省了数百万个 CPU 周期。:-)

于 2019-03-05T16:15:49.367 回答