有时需要导航栏对当前页面所述栏目高亮,可在 Jinja2 中使用下述方法。
在模板页base.j2.html
写入导航栏的基本情况:
{% set nav_bar = [
('/', 'index', '主页'),
('/price', 'price', '价格'),
('/about', 'about', '关于')
] -%}
{% set active_page = active_page|default('index') -%}
{# 设置 active_page 变量的默认值是 index,即不指定高亮页面的情况下主页高亮 #}
...
<div class="navbar-nav">
{% for href, id, caption in nav_bar %}
<a class="nav-link{% if id == active_page %} active{% endif %}" aria-current="page" href="{{ href|e }}">{{ caption|e }}</a>
{% endfor %}
</div>
随后在指定页面设置变量即可。
{% set active_page = 'price' %}