python - 使用 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 轻松做到这一点，但我不想在这种情况下使用它。

已经有一个 working solution for ruby on rails但我不知道如何将其转换为 python/jinja(我对 jinja/flask 很陌生，根本没有使用过 ruby​​)

Answer 1

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

突出显示事件菜单项

您通常希望有一个带有事件导航项的导航栏。这真的很容易实现。因为子模板中 block 外的赋值是全局的，并且在布局模板被评估之前执行，所以可以在子模板中定义事件菜单项:

{% 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>