导航栏的menu比如有blog, user等，链接分别对应/blog, /user等，主页home上有个class="active", 问题是怎么实现在点击blog, user导航后，blog上有“active”属性。 各个页面是extends base.html的，所以希望写一个js放在base.html里 谢谢
blog, user
/blog, /user
class="active"
blog
“active”
ringa_lee
下面是Jinja2文档的一个技巧：
子页面模板：
jinja{% extends "layout.html" %} {% set active_page = "index" %}
jinja
{% extends "layout.html" %} {% set active_page = "index" %}
PS: 母模板可以读取active_page值。
active_page
layout.html部分代码：
layout.html
jinja{% 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> ...
{% 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> ...
参考：http://99xueli.net/doc/jinja-docs/tricks.html#highlighting-active-menu-items
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
下面是Jinja2文档的一个技巧：
子页面模板：
PS: 母模板可以读取
active_page值。layout.html部分代码：参考：http://99xueli.net/doc/jinja-docs/tricks.html#highlighting-active-menu-items