在 python/flask 中使用 twitter bootstrap css 更改链接的活动类

Question

我从我的页面 template.html 获得了以下 html 片段。

 <ul class='nav'>
    <li class="active"><a href='/'>Home</a></li>
    <li><a href='/lorem'>Lorem</a></li>

    {% if session['logged_in'] %}
        <li><a href="/account">Account</a></li>
        <li><a href="/projects">Projects</a>
        <li><a href="/logout">Logout</a></li>
    {% endif %}

    {% if not session['logged_in'] %}
        <li><a href="/login">Login</a></li>
        <li><a href="/register">Register</a></li>
    {% endif %}
</ul>

正如您在第 2 行中看到的，该类处于活动状态。这会突出显示带有 twitter bootstrap css 文件的活动选项卡。现在，如果我访问 www.page.com/ 这将正常工作，但当我访问 www.page.com/login 时则不行。它仍然会突出显示主页链接作为活动选项卡。

当然，我可以使用 Javascript/jQuery 轻松地做到这一点，但我不想在这种情况下使用它。

已经有一个 适用于 ruby on rails 的可行解决方案， 但我不知道如何将其转换为 python/jinja（我对 jinja/flask 很陌生，根本没有使用过 ruby）

原文由 Azeirah 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你看过这个吗？ https://jinja.palletsprojects.com/en/3.0.x/tricks/#highlighting-active-menu-items

突出显示活动菜单项

通常您希望有一个带有活动导航项的导航栏。这很容易实现。因为子模板中块外的分配是全局的并且在评估布局模板之前执行，所以可以在子模板中定义活动菜单项：

 {% extends "layout.html" %}
{% set active_page = "index" %}

然后布局模板可以访问 active_page 。此外，为该变量定义一个默认值是有意义的：

 {% set navigation_bar = [
    ('/', 'index', 'Index'),
    ('/downloads/', 'downloads', 'Downloads'),
    ('/about/', 'about', 'About')
] -%}

{% set active_page = active_page|default('index') -%}
...
<ul id="navigation">
    {% for href, id, caption in navigation_bar %}
    <li{% if id == active_page %} class="active"{% endif
    %}><a href="{{ href|e }}">{{ caption|e }}</a>
    </li>
{% endfor %}
</ul>

原文由 codegeek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您的菜单分布在整个页面上，这是另一种更简单的方法。这种方式使用内联 if 语句打印出类 active 。

 <ul>

<li class="{{ 'active' if active_page == 'menu1' else '' }}">
<a href="/blah1">Link 1</a>
</li>

<li class="{{ 'active' if active_page == 'menu2' else '' }}">
<a href="/blah2"> Link 2 </a>
</li>

</ul>

类 active 用于突出显示

您仍然需要在每个页面上设置变量以标记它们

{% extends "master.html" %}
{% set active_page = "menu1" %}

或者

{% set active_page = "menu2" %}

原文由 varun 发布，翻译遵循 CC BY-SA 3.0 许可协议