如何在 Django 的导航栏中向当前元素添加活动类

在 Django 中使用 Bootstrap 框架实现导航栏时，我们希望在当前页面所在的导航栏元素添加一个活动类（active class），以便用户知道自己在哪个页面。

以下是添加活动类的两种方式：

方法一：使用模板语言

在 Django 模板中，我们可以使用内置的模板标签来实现添加活动类的效果。具体步骤如下：

1. 在 templates 目录下的 base.html 文件中，添加导航栏代码，以及相应页面的 URL 地址，示例如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">MySite</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item {% if request.path == '/' %}active{% endif %}">
        <a class="nav-link" href="/">Home</a>
      </li>
      <li class="nav-item {% if request.path == '/about/' %}active{% endif %}">
        <a class="nav-link" href="/about/">About</a>
      </li>
      <li class="nav-item {% if request.path == '/contact/' %}active{% endif %}">
        <a class="nav-link" href="/contact/">Contact</a>
      </li>
    </ul>
  </div>
</nav>

2. 在导航栏元素中加入 {% if request.path == 'URL地址' %}active{% endif %} 的判断语句，用来判断当前页面是否与该元素对应。其中，{% if ... %} 表示如果条件成立，就执行以下语句；{% endif %} 表示结束判断语句。

3. 在条件判断语句中，使用 request.path 对象获取当前页面的 URL 地址，与该元素的 URL 地址进行比较，以判断是否为当前页面对应的元素。

4. 最后，在样式表中设置 .active 类的样式，以区分当前页面对应的导航栏元素。示例如下：

.navbar-nav .active {
    color: red;
}

以上方式可以实现添加活动类的效果，但需要在每个导航栏元素中加入判断语句，代码较为繁琐。如果需要添加更多的导航栏元素，代码会变得越来越冗长。因此，我们可以使用方法二来实现添加活动类的效果。

方法二：使用自定义模板标签

在 Django 中，我们可以自定义模板标签，来实现一些复杂的功能。在本例中，我们可以自定义一个模板标签 active，用来判断当前页面是否与该元素对应，并在需要添加活动类的导航栏元素中使用该标签。

以下是具体的实现步骤：

1. 在应用目录下创建一个 templatetags 子目录，在该目录下创建一个 Python 文件 nav_tags.py（文件名可以任意取），用来定义自定义模板标签。示例如下：

from django import template
from django.urls import reverse

register = template.Library()

@register.simple_tag
def active(request, url):
    if reverse(url) == request.path:
        return 'active'
    return ''

2. 在 nav_tags.py 文件中，我们定义了一个名为 active 的模板标签，该标签接受两个参数：request 和 url，分别表示当前请求对象和导航栏元素的 URL 地址。

3. 在模板文件中，我们使用 {% load nav_tags %} 来加载自定义的模板标签库。

4. 在导航栏元素中使用 {% active request 'URL地址' %} 来判断当前页面是否与该元素对应。该语句会调用 active 模板标签来判断是否添加活动类。示例如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">MySite</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item {% active request '/' %}">
        <a class="nav-link" href="/">Home</a>
      </li>
      <li class="nav-item {% active request '/about/' %}">
        <a class="nav-link" href="/about/">About</a>
      </li>
      <li class="nav-item {% active request '/contact/' %}">
        <a class="nav-link" href="/contact/">Contact</a>
      </li>
    </ul>
  </div>
</nav>

通过自定义模板标签 active，我们可以更方便地添加活动类，代码也更加清晰简洁。当然，如果导航栏元素较少，使用方法一也是可以的。