Jinja2 中动态高亮当前页面导航项的完整实践指南-html教程

在 flask + jinja2 项目中，通过 `request.endpoint` 动态为 base.html 中的侧边栏菜单项添加 `.active` 类，实现当前页面对应链接的 css 高亮，无需为每个子模板重复定义导航结构。

要在全局 base.html 中智能高亮当前激活的导航项（如 Dashboard、Feature1、Feature2），核心思路是：利用 Flask 的 request.endpoint 获取当前请求对应的视图函数名，并在 Jinja2 模板中进行条件判断，动态注入 CSS 类。这种方式保持了模板复用性，所有页面继承 base.html 即可自动获得正确的高亮状态。

✅ 正确实现步骤

1. 定义 CSS 样式（推荐放在 static/css/style.css 或 块中）：

   .sidebar a {
   padding: 10px 16px;
   display: block;
   color: #333;
   text-decoration: none;
   }
   .sidebar a.active {
   background-color: #007bff;
   color: white;
   font-weight: bold;
   }

2. 在 base.html 的侧边栏中使用条件渲染（关键！）：