使用 PureCSS 的动态 HTML 模板

Question

我正在使用烧瓶构建一个网络应用程序。我发现我一遍又一遍地重复着同样的事情，对我的每个 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 行从一行移到另一行。我想不出一种动态执行此操作的方法，以便可以将其转换为可以为每个文件扩展的模板。

Answer 1

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

这里的文档：Template Inheritance

方法一：

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

使用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>

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

方法二： （推荐）

这与flask jinja无关，但在前端按预期工作，但使用带有jQuery库的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>

Vanilla 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 周期。 :-)