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

Question

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

{% 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 %}

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

Highlight menu item based on current view

python

jinja2

flask