带有螺物的动态HTML模板

Question

我正在使用烧瓶构建网络应用程序。我发现我一遍又一遍地对同一件事进行了辅助编辑，以便将所有人的html页面编辑为每个人，因此我想将其制作到模板中。如何使其成为动态模板？以下是我用于我的关于页面的代码，该页面与我的> 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模板继承。

文档在这里：模板继承

方法1：

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

使用jinga if条件检查页面是否指向 当前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。

方法2：（推荐）

这与烧瓶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>

香草JS （plain 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替换为#。

干净而优雅。

为什么？

如果您使用JavaScript，则不必在后端定义数百个{% if... %}，您在后端定义的那些if语句将在每个页面中都会在每个页面中检查，此外，您还将保存在更多if和else上s检查加载页面是否是导航链接的页面，并通过将URL更改为#禁用路由。哇，您刚刚节省了数百万个CPU周期。： - ）