使用Flask/Jinja2宏来设置活动导航元素

Question

我正在使用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>

上面的代码有错误吗？因为,它什么都没有显示.

Answer 1

您的代码只是一遍又一遍地定义一个宏,它不会呈现任何内容.避免阅读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.您可以将此扩展到您希望在页面中进行子导航的范围.