Какие есть ещё способы поставить class active шаблону во flask?

Question

[Kozlov]

Изучаю flask. Делаю тестовый сайт используя шаблоны. Меню сайта в base.html. При переходе на конкретную страницу ссылка активной подсвечивается, ей даётся класс active. Пока нашёл выход такой:

<li {% if request.path == '/' %}class="active"{% endif %}>
     <a href="/">Главная</a>
</li>

Правильно ли это, и есть ли другие варианты как присвоить класс active активной ссылке при использовании шаблонов?

Answer 1

[deepblack]

Можно так:

spoiler

<ul class="nav navbar-nav navbar-right">
    <li {{ home_active }}><a href="/">Home</a></li>
    <li {{ places_active }}><a href="/places">Places</a></li> 
</ul>

@app.route('/')
@app.route('/home')
def index():
    return render_template('index.html', home_active="class=active")

@app.route('/places')
def map():
    return render_template('places.html', places_active="class=active")

Или так:

spoiler

def some_view():
    return render_template('template.html', active='home')

<li class="{% if active=='home' %}active{%endif %}">Home</li>
<li class="{% if active=='blog' %}active{%endif %}">Blog</li>

UPD:
Highlighting Active Menu Items
jinja.pocoo.org/docs/tricks
https://jinja.palletsprojects.com/en/2.10.x/tricks/

spoiler

{% extends "layout.html" %}
{% set active_page = "index" %}

{% set navigation_bar = [
    ('/', 'index', 'Index'),
    ('/downloads/', 'downloads', 'Downloads'),
    ('/about/', 'about', 'About')
] -%}
{% set active_page = active_page|default('index') -%}
...
<ul id="navigation">
{% for href, id, caption in navigation_bar %}
  <li{% if id == active_page %} class="active"{% endif
  %}><a href="{{ href|e }}">{{ caption|e }}</a></li>
{% endfor %}
</ul>

Comments

[Kozlov]

Спасибо, Ваше первое решение кажется мне наиболее изящным

[Kozlov]

Dr. Bacon, объясни как правильно, только учу :)
Сделал еще такой вариант, когда меню это именованный список, и в шаблоне в цикле формируется меню.

{% set menu = {'/': 'Главная страница', '/doc': 'Документы'} %}

{% for item in menu %}
	<a {% if request.path == item %}class="active"{% endif %} href="{{ item }}">{{ menu[item] }}</a><hr>
{% endfor %}