Jinja2高亮active状态菜单项

通常我们网站的导航条选项都会有active属性以明显提示我们所处在哪个菜单项之下,在Jinja2中要实现这样的效果并不难做到。

一般情况下我们会将导航栏写入到base.html中,作为基础模板使用。我们把导航栏的选项和相应的信息定义成一个列表,然后通过active_page设置处于active状态的菜单项:

{% set navigation_bar = [
    ('/', 'index', 'Index'),
    ('/blog/', 'blog', 'Blog'),
    ('/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>
...

这里通过遍历navigation_bar来为导航栏的选项加上链接以及标题,并且通过遍历出来的idactive_page的值相比较以确定当前项是否是active状态。

其中active_page是在我们的子模板中进行设置的,假设当前页面是index.html

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

当我访问index.html这个页面时,active_pageidindex的那一项相匹配,即Index为active状态。

Search

    Table of Contents