本文介绍如何在 flask + jinja2 项目中,通过 `request.endpoint` 动态为 base.html 中的侧边栏菜单项添加 `.active` 类,实现当前页面对应导航项的样式高亮,避免为每个子模板重复定义结构。
在构建多页面 Flask 应用时,常使用 base.html 作为统一布局模板,其中包含公共头部、侧边栏(Sidebar)和内容区域。为了让用户清晰识别当前所处页面,通常需高亮侧边栏中对应的菜单项(如“Dashboard”“Feature1”“Feature2”)。理想方案是:逻辑集中于 base.html,无需在每个子模板中手动传递状态变量。
Jinja2 提供了简洁可靠的解决路径——结合 Flask 的 request.endpoint 属性与条件渲染语法。request.endpoint 在模板中可直接访问(需确保已启用 request 上下文),其值即为当前视图函数的端点名称(如 ‘dashboard’、’feature1’),与 url_for() 中使用的名称一致。
✅ 正确做法:在 base.html 中动态绑定 active 类
首先,在 CSS 中定义高亮样式(推荐放在 块或独立 CSS 文件中):