根据条件通过python将类添加到html

debugcn 发表于 Dev

雷达实验室

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

我试图弄清楚如何在我的标题的链接中添加class =“ active”，以便根据当前页面突出显示相应的导航项。我试图定义一个函数，该函数根据激活的模板返回不同的值，但是我认为定义不正确是因为当我将条件放入html时会抛出错误。我应该在class属性内部还是整个标签外部使用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>

骨头225

我想做的是使用urls.py和传递基本页面信息kwargs。例如，页面标题，页面名称和其他一些关键字。假设我们有两个页面，第1页和第2页。

urls.py

在urls.py中，我们定义页面视图并设置其关键字。

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

views.py

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

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

header.html

在header.html模板中，我们可以对其进行设置，以便根据navbarkwarg来获得显示为活动页面的正确页面。

<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>

当然，您可以使用代码片段和循环来清理它。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。