Jinja2 导航栏高亮

有时需要导航栏对当前页面所述栏目高亮,可在 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' %}

添加新评论