Jinja2 中动态高亮当前页面导航项的完整实现方案-html教程

在 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 的侧边栏部分（例如