Django继承模板中Bootstrap导航栏active类无法保持的问题

嗨，这个问题我之前也踩过坑！原因很明确：你用前端点击事件加的active类只存在于当前页面的临时DOM里，一旦页面跳转刷新，新页面是后端重新渲染的，之前的JS修改就完全清零了。所以得让Django在渲染模板的时候就判断好当前页面，动态给对应的导航项加上active类才行。

下面给你几个实用的解决方案，按需选就行：

方案一：直接用request.path判断（简单直接） #

首先得确保你的Django项目配置了请求上下文处理器：在settings.py的TEMPLATES设置里，context_processors列表要包含django.template.context_processors.request，这样模板里才能拿到request对象。

然后修改base.html里的导航项，示例如下：

<ul class="navbar-nav">
  <li class="nav-item {% if request.path == '/' %}active{% endif %}">
    <a class="nav-link" href="/">首页</a>
  </li>
  <li class="nav-item {% if request.path == '/about/' %}active{% endif %}">
    <a class="nav-link" href="/about/">关于我们</a>
  </li>
  <li class="nav-item {% if request.path == '/contact/' %}active{% endif %}">
    <a class="nav-link" href="/contact/">联系我们</a>
  </li>
</ul>

每次渲染页面时，Django会自动对比当前请求的路径和导航项的路径，匹配上就自动给对应项加上active类。

方案二：用URL名称判断（更灵活） #

如果你的URL配置里给每个路由起了名字（非常推荐这么做），比如urls.py里：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('about/', views.about, name='about'),
    path('contact/', views.contact, name='contact'),
]

那可以用request.resolver_match.url_name判断当前页面的URL名称，这样就算以后路径改了，只要名字不变，模板完全不用动：

<ul class="navbar-nav">
  <li class="nav-item {% if request.resolver_match.url_name == 'home' %}active{% endif %}">
    <a class="nav-link" href="{% url 'home' %}">首页</a>
  </li>
  <li class="nav-item {% if request.resolver_match.url_name == 'about' %}active{% endif %}">
    <a class="nav-link" href="{% url 'about' %}">关于我们</a>
  </li>
  <li class="nav-item {% if request.resolver_match.url_name == 'contact' %}active{% endif %}">
    <a class="nav-link" href="{% url 'contact' %}">联系我们</a>
  </li>
</ul>

如果项目有app命名空间（比如URL配置里用了namespace='blog'），判断时要带上命名空间：

<li class="nav-item {% if request.resolver_match.namespace == 'blog' and request.resolver_match.url_name == 'home' %}active{% endif %}">
  <a class="nav-link" href="{% url 'blog:home' %}">博客首页</a>
</li>

方案三：自定义模板标签（简洁优雅） #

如果导航项很多，上面的写法会重复大量代码，这时候可以自定义一个模板标签来简化：

1. 在你的app目录下创建templatetags文件夹（必须加__init__.py空文件），然后新建nav_tags.py：

from django import template

register = template.Library()

@register.simple_tag(takes_context=True)
def active(context, url_name):
    # 自动处理带命名空间的URL
    current_full_url = f"{context['request'].resolver_match.namespace}:{context['request'].resolver_match.url_name}" if context['request'].resolver_match.namespace else context['request'].resolver_match.url_name
    if current_full_url == url_name:
        return 'active'
    return ''

2. 在base.html顶部加载这个标签：

{% load nav_tags %}

3. 之后导航项就能写成超简洁的样子：

<ul class="navbar-nav">
  <li class="nav-item {% active 'home' %}">
    <a class="nav-link" href="{% url 'home' %}">首页</a>
  </li>
  <li class="nav-item {% active 'about' %}">
    <a class="nav-link" href="{% url 'about' %}">关于我们</a>
  </li>
  <!-- 带命名空间的写法 -->
  <li class="nav-item {% active 'blog:home' %}">
    <a class="nav-link" href="{% url 'blog:home' %}">博客首页</a>
  </li>
</ul>

这三种方法都能完美解决你的问题，推荐用方案二或三，更灵活也更易维护。

内容的提问来源于stack exchange，提问作者Chris