根据当前视图突出显示菜单项

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

而不是传递任何东西,或试图解析一些网址或列表,只需制作模板的高亮部分.

创建一个包含菜单的基本模板,每个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 %}