Выделить пункт меню на основе текущего вида

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> 

В шаблонов страниц, которые расширяют базу, переопределить один из блоков со значением «активным».

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