
在 flask + jinja2 项目中,可通过 `request.endpoint` 结合条件渲染,在 base.html 的侧边栏中为当前访问页面的菜单项动态添加 `.active` 类,实现 css 样式切换,无需为每个子模板重复定义导航结构。
要在 base.html 中实现侧边栏菜单项(如 Dashboard、Feature1、Feature2)根据当前页面自动高亮,核心思路是:利用 Flask 的 request.endpoint 获取当前请求对应的视图函数名,并在 Jinja2 模板中用 {% if %} 判断匹配,动态注入 CSS 类。
首先,在你的全局样式表(如 static/css/style.css)中定义高亮样式:
.sidebar-nav a {
display: block;
padding: 10px 16px;
color: #333;
text-decoration: none;
}
.sidebar-nav a.active {
background-color: #007bff;
color: white;
font-weight: bold;
}然后,在 base.html 的侧边栏部分(例如
⚠️ 注意事项:
- 确保你的 Flask 路由使用了明确的 endpoint 名称(默认即函数名)。若手动指定了 endpoint= 参数(如 @app.route('/f1', endpoint='feat_one')),则模板中需对应写 request.endpoint == 'feat_one';
- request 对象在 Jinja2 中默认可用,但需确认已启用 flask 的 request 上下文(通常无需额外配置);
- 若使用蓝图(Blueprint),endpoint 会带前缀,例如 admin.dashboard,此时判断应为 {% if request.endpoint == 'admin.dashboard' %};
- 更健壮的做法是封装为宏或自定义过滤器,但对简单项目,内联条件判断已足够清晰高效。
通过该方案,所有继承 base.html 的子模板(如 dashboard.html、feature1.html)无需修改导航逻辑,即可自动获得精准的当前页高亮效果——真正实现“一次定义、处处生效”的 DRY(Don’t Repeat Yourself)原则。










