通八洲科技

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

日期:2025-12-29 00:00 / 作者:碧海醫心

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

在 Flask 应用中集成 Bootstrap 5 导航栏时,常见的误区是试图通过模板变量(如 active_page)手动控制 active 类——这不仅增加维护成本,还容易因命名不一致(如 'edit_profile' vs 'edit_profile.html')导致失效。正确做法是利用 Flask 内置的 request.endpoint 属性,它能精确反映当前请求所匹配的视图函数端点(如 'auth.edit_profile'),天然具备动态性与可靠性。

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

关键要点说明:

⚠️ 注意事项:

该方案简洁、健壮且符合 Flask 最佳实践,让导航状态管理回归服务端逻辑本质,真正实现“所见即所得”的活跃态体验。