Стиль активного элемента навигации с помощью макроса Flask/Jinja2

Я использую Flask/Jinja2 и Bootstrap 3.

Я хотел бы добавить class="active" к текущему элементу навигации.

Эти элементы хранятся в prog_ids:

/programme/23022014
/programme/24022014
/programme/25022014

Я следовал за некоторыми примерами, подобными этому, и мой HTML-код:

    <ul class="nav nav-pills ">
    {% for prog_id in prog_ids %}
    {% macro nav_link(endpoint, prog_id) %}
        {% if request.endpoint.endswith(endpoint) %}
        <li class="active">
            <a href="{{ url_for(endpoint) }}">
            <span class="badge pull-right">-</span>
            {{prog_id|strftime_b}}
            </a>
        </li>
    {% else %}
        <li>
            <a href="{{ url_for(endpoint) }}">
            <span class="badge pull-right">-</span>
            {{prog_id|strftime_b}}
            </a>
        </li>
    {% endif %}
    {% endmacro %}
    {% endfor %}
    </ul>

Есть ли ошибка в коде выше? Потому что это ничего не показывает.

Источник

3 ответа

Решение

Ваш код просто определяет макрос снова и снова, он ничего не отображает. Избегайте чтения request.endpoint и использовать базовые шаблоны для этого.

base.html

<ul class="nav nav-pills">
    <li class="{% block nav_here %}{% endblock %}">Here</li>
    <li class="{% block nav_there %}{% endblock %}">There</li>
    <li class="{% block nav_anywhere %}{% endblock %}">Anywhere</li>
</ul>

{% block content %}{% endblock %}

there.html

{% extends "base.html" %}
{% block nav_there %}active{% endblock %}
{% block content %}
    <blockquote>No matter where you go, there you are.</blockquote>
{% endblock %}

Базовая навигация определяет пустой nav_ блоки в li класс и суб-шаблон устанавливает соответствующий active, Вы можете расширить это, насколько вы хотите иметь суб-навигации внутри страниц.

Источник

Используйте макрос Jinja2 правильно. Это действительно полезная функция. В этом случае у вас нет правильного понимания, как это работает. Надеюсь, этот пост объяснит это хорошо. Это макрос для навигационного меню. Не забудьте поместить этот макрос где-нибудь над кодом навигационного меню. В противном случае Джинджа не найдет его при необходимости.

{% macro nav_link(endpoint, name) %}
    {% if request.endpoint.endswith(endpoint) %}
        <li class="active"><a href="{{ url_for(endpoint) }}">{{name}}</a></li>
    {% else %}
        <li><a href="{{ url_for(endpoint) }}">{{name}}</a></li>
    {% endif %}
{% endmacro %}

Вы должны определить этот блок кода отдельно в файле шаблона. Не кладите это в петлю или где-либо еще. Когда вы вызываете макрос в любом месте вашего шаблона, этот блок кода будет выполняться и даст вам желаемый результат. Посмотрите, как использовать этот макрос. nav-link() это как обычная функция. Звоните в свой блок кода navbar. Помните, что вы должны сначала определить эти маршруты на сервере. ИЛИ вы можете добавить эти макросы в отдельные HTML-файлы (скажем, macros.html) и импортируйте в него любой макрос, куда хотите.

<ul class="nav navbar-nav">
    {{ nav_link('home', 'Home') }}
    {{ nav_link('about', 'About') }}
    {{ nav_link('contact', 'Contact Us') }}
</ul>

Если вы используете macros.html, как я упоминал выше, вы можете использовать следующий код для импорта макроса.

{% from "macros.html" import nav_link with context %}

Это хороший учебник для шаблонизаторов jinja2.

Источник

По какой-то странной причине вышеуказанное решение не сработало для меня. Также вы должны добавить код в 2 части.

Моё простое решение. проверьте, равна ли конечная точка., затем установите активным.

 <li class="{% if  request.endpoint == "new_message" %}active{% endif %}"><a href="/new_message"><span class="glyphicon glyphicon-leaf"></span> Message</a></li>
Источник
Другие вопросы по тегам