基于当前视图突出显示菜单项

Question

我目前正在检查每个菜单项的模板中的一个变量，看看是否应该添加一个 CSS 类来突出显示它。

{% if title == "Home" %}
<li class="active">
{% else %}
<li>
{% endif %}

我想创建一个包含四个菜单项的列表。为了得到想要的效果，我将不得不重复上面的代码四次。

"menu":[
{"title":"home", "link":"/"}, 
{"title":"about", "link":"about"}, 
{"title":"contact","link":"contact"}
]

有没有更简单的方法来循环浏览列表并突出显示相应的项目？

Answer 1

不要传递任何东西，或者尝试解析一些 url 或列表，只需将突出显示部分作为模板。

创建一个包含菜单的基本模板，每个 class= 属性都有一个块。

<ul>
    <li class="{% block nav_home %}{% endblock %}">Home</li>
    <li class="{% block nav_about %}{% endblock %}">About</li>
    <li class="{% block nav_contact %}{% endblock %}">Contact</li>
</ul>

在扩展基础的页面模板中，使用值“active”覆盖其中一个块。

{% extends "base.html" %}
{% block nav_contact %}active{% endblock %}
{% block content %}<h3>Contact</h3>{% endblock %}