如何在 Flask + Bootstrap 5 中动态高亮导航栏当前页面项

17次阅读

如何在 Flask + Bootstrap 5 中动态高亮导航栏当前页面项

通过在模板中比对 `request.endpoint` 与路由端点名,可自动为 bootstrap 5 导航项添加 `active` 类,实现点击后持久高亮,无需手动传递变量。

flask 应用中集成 bootstrap 5 导航栏时,常遇到“点击后 active 类不持久”的问题——这通常是因为依赖前端行为(如 hover)或错误地使用了静态模板变量(如 active_page = “edit_profile.html“),而未真正关联当前请求的路由上下文。

正确做法是利用 Flask 的 request.endpoint 属性:它返回当前请求所匹配视图函数的完整端点名(如 ‘auth.edit_profile’),该值在每次请求时由 Flask 自动注入,精准反映用户实际访问的页面,无需在每个子模板中手动设置变量。

以下是推荐的实现方式(适配 Bootstrap 5 语义结构):

✅ 关键要点说明:

  • 使用 navbar-nav 和 nav-item / nav-link 是 Bootstrap 5 官方推荐的导航结构,确保样式与 js 行为(如折叠、下拉)正常;
  • request.endpoint 在 Jinja2 模板中直接可用,无需额外导入或配置
  • 端点名必须与 @app.route() 或蓝图注册时的函数名完全一致(含蓝图前缀,如 ‘auth.edit_profile’);
  • 避免使用 request.path 或 request.url_rule,它们易受 URL 参数、重定向或路径别名影响,可靠性低。

⚠️ 注意事项:

  • 若使用蓝图,务必确认端点命名规范(默认为 blueprint_name.view_function_name);可通过 flask routes 命令查看全部端点列表;
  • 不要混用 class=”active” 在
  • 上(旧版 Bootstrap 习惯),Bootstrap 5 推荐将 active 加在 元素上,否则可能丢失 CSS 样式或 JS 功能;
  • 若需支持多级嵌套路由(如 /user/123/profile),仍应基于端点判断,而非解析 URL 字符串——更健壮、更符合 Flask 设计哲学。

此方案简洁、可靠、零侵入,是 Flask + Bootstrap 5 导航高亮的标准实践。

text=ZqhQzanResources