扩展模板的活动标记

Question

我是Django的新手，需要一些模板继承方面的帮助。我想为当前的活动页面设置“class=”active，但是我如何处理模板继承，因为它对所有页面都是通用的，但是active应该在更改当前活动页面时发生变化。我知道这个问题可能很傻，但我仍然不知道答案。

我不知道这个案子该怎么办。

扩展的html

  <ul class="navbar-nav mr-auto">
  <li class="nav-item mx-3">
    <a class="nav-link" {% if '/Homepage/' in request.path %} class ="active" {% endif %} href="{% url 'success' %}">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item mx-3">
    <a class="nav-link" {% if '/booking/' in request.path %} class ="active" {% endif %} href="{% url 'booking' %}">Make a Booking</a>
  </li>
  <li class="nav-item mx-3">
    <a class="nav-link" {% if '/Hsitory/' in request.path %} class ="active" {% endif %} href="{% url 'History' %}">History</a>
  </li>
  <li class="nav-item mx-3">
    <a class="nav-link" {% if '/pending/' in request.get_full_path %} class ="active" {% endif %} href="{% url 'pending' %}">Pending requests</a>
  </li>
</ul>

urls.py

urlpatterns = [
path('', views.loginpage, name="loginpage"),
path("failed/", views.failed, name="failed"),
path("Homepage/", views.success, name="success"),
path("loggedout/", views.loggedout, name="logout"),
path("booking/", views.booking, name="booking"),
path("pending/", views.pending, name="pending"),
path("History/", views.History, name="History"),
path("Register/", views.Register, name="Register"),
]

我希望active类可能只应用于当前的活动页面。

Answer 1

你可以这样做。

<a class="nav-link" {% if '/Homepage/' in request.path %} class ="active" {% endif %} href="/Homepage/">Home <span class="sr-only">(current)</span></a>

还可以更好地使用django url模板标签

编辑:我认为您提供了错误的url模式，您也可以这样做。

{% url 'homepage' as url %}
<a {% if request.path == url %} class="active"{% endif %} href="{{ url }}" >Homepage</a>

锚标记中有两个class属性，因此可以将其更改为

 <a class="nav-link{% if request.path == url %} active{% endif %}">Home <span class="sr-only">(current)</span></a>

Answer 2

扩展的

<li class="nav-item mx-3">
      {% url 'success' as Homepage %}
      {% if request.path != Homepage %} <a class="nav-link" href="{% url 'success' %}">Home <span
          class="sr-only">(current)</span></a>
      {% else %}
      <a class="nav-link active" href="{{ Homepage }}">Home <span class="sr-only">(current)</span></a>
      {% endif %}
    </li>
    <li class="nav-item mx-3">
      {% url 'booking' as booking %}
      {% if request.path != booking %} <a class="nav-link" href="{{ booking }}">Make a Booking</a>
      {% else %}
      <a class="nav-link active" href="{{ booking }}">Make a Booking</a>
      {% endif %}
    </li>
    <li class="nav-item mx-3">
      {% url 'History' as History %}
      {% if request.path != History %} <a class="nav-link" href="{{ History }}">History</a>
      {% else %}
      <a class="nav-link active" href="{{ History }}">History</a>
      {% endif %}

    </li>
    <li class="nav-item mx-3">
      {% url 'pending' as pending %}
      {% if request.path != pending %} <a class="nav-link" href="{{ pending }}">Pending requests</a>
    </li>
    {% else %}
    <a class="nav-link active " href="{{ pending }}">Pending requests</a>
    {% endif %}

    </li>

使用request.path作为解决方案