通过python根据条件向html添加类

Question

以下代码是我用于网站所有模板标题的代码，并将其添加到每个模板中： {% include 'header.html' %}

我试图弄清楚如何将 class="active" 添加到我的标题上的链接中，以便根据当前页面突出显示相应的导航项。我试图定义一个函数，该函数根据哪个模板处于活动状态而返回不同的值，但我认为我没有正确定义它，因为当我将条件放入 html 时它会引发错误。我应该在类属性内还是在整个标签外使用 jinja 标签。另外，我怎么知道哪个是当前模板。请帮忙，谢谢！

{% load static %}
<header role="banner">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand " href="{% url 'main:index' %}">my site</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExample05">
        <ul class="navbar-nav pl-md-5 ml-auto">
          <li class="nav-item">
            <a class="nav-link active" href="{% url 'main:index' %}">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'main:about' %}">Nosotros</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="projects.html">Ingeniería</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="{% url 'main:services' %}" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Servicios</a>
            <div class="dropdown-menu" aria-labelledby="dropdown04">
              <a class="dropdown-item" href="services.html">Diseño</a>
              <a class="dropdown-item" href="services.html">Impresión 3D</a>
              <a class="dropdown-item" href="services.html">Mantenimiento</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="blog.html">Tienda</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'main:contact' %}">Contáctenos</a>
          </li>
        </ul>


      </div>
    </div>
  </nav>
</header>

Answer 1

我喜欢使用urls.py 和kwargs 传递重要的页面信息。例如，页面标题、页面名称和其他一些关键字。假设我们有两个页面，page1 和 page2。

urls.py

在 urls.py 中我们定义页面浏览量并设置它们的关键词。

urlpatterns += [path('page1/', page1_view,  kwargs = {'navbar': 'page1'})]
urlpatterns += [path('page2/', page2_view,  kwargs = {'navbar': 'page2'})]

views.py

在视图中，我们需要确保将 kwargs 传递给模板。您唯一需要添加的是 **kwarg 到您的视图中

def page2(request, **kwargs):
    return render(request, 'page2.html')

header.html

在 header.html 模板中，我们可以对其进行设置，以便根据 navbar kwarg 我们将正确的页面显示为活动状态。

<li class="nav-item">
    <a class="nav-link {% if request.resolver_match.kwargs.navbar == 'page1' %}active{% endif %}" href="/page1">Page1</a>
</li>
<li class="nav-item">
    <a class="nav-link {% if request.resolver_match.kwargs.navbar == 'page2' %}active{% endif %}" href="/page2">Page2</a>
</li>

当然，您可以使用 sn-ps 和循环来清理它。