Jinja2 动态高亮导航项完整教程
2026-02-26 12:00:57
0浏览
收藏
本文详解了如何在 Flask + Jinja2 项目中利用 `request.endpoint` 实现侧边栏导航项的动态高亮——无需为每个页面重复编写导航结构，只需在全局 base.html 中通过简洁的条件判断为当前激活路由自动添加 `.active` CSS 类，配合清晰的端点命名和可扩展的菜单配置方式，既保证了模板复用性与代码健壮性，又天然兼容蓝图、路由参数等复杂场景，是提升开发效率与用户体验的实用最佳实践。
在 Flask + Jinja2 项目中，通过 `request.endpoint` 动态为 base.html 中的侧边栏菜单项添加 `.active` 类，实现当前页面对应链接的 CSS 高亮，无需为每个子模板重复定义导航结构。
要在全局 base.html 中智能高亮当前激活的导航项（如 Dashboard、Feature1、Feature2），核心思路是：利用 Flask 的 request.endpoint 获取当前请求对应的视图函数名，并在 Jinja2 模板中进行条件判断，动态注入 CSS 类。这种方式保持了模板复用性，所有页面继承 base.html 即可自动获得正确的高亮状态。
✅ 正确实现步骤
定义 CSS 样式（推荐放在 static/css/style.css 或
