使用 Flask/Jinja2 宏设置活动导航元素的样式答案

【问题标题】：Style active navigation element with a Flask/Jinja2 macro使用 Flask/Jinja2 宏设置活动导航元素的样式
【发布时间】：2014-02-24 15:24:00
【问题描述】：

我正在使用 Flask/Jinja2 和 Bootstrap 3。

我想将class="active" 添加到当前导航元素中。

这些元素存储在prog_ids:

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

我遵循了一些示例，例如 this one，我的 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>

上面的代码有错误吗？因为，它什么也没显示。

【问题讨论】：

这里有这个问题的答案：stackoverflow.com/questions/18600031/…

标签： python css twitter-bootstrap flask jinja2

【解决方案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 %}

基本导航在li 类中定义了空的nav_ 块，子模板将相关的块设置为active。您也可以将其扩展到页面内的子导航。

【讨论】：

【解决方案2】：

正确使用 Jinja2 宏。这确实是一个有用的功能。在这种情况下，您没有正确理解它是如何工作的。希望这篇文章能很好地解释它。这是导航菜单的宏。请记住将此宏放在导航菜单代码上方的某个位置。否则 Jinja 不会在需要时找到它。

{% 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() 就像一个常规函数。在您的导航栏代码块中调用它。请记住，您必须首先在服务器中定义这些路由。或者，您可以将这些宏添加到单独的 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 模板的 good tutorial。

【讨论】：

【解决方案3】：

由于某种奇怪的原因，上述解决方案对我不起作用。您还必须分两部分添加代码。

我的简单解决方案。检查端点是否相等。然后设置为活动。

 <li class="{% if  request.endpoint == "new_message" %}active{% endif %}"><a href="/new_message"><span class="glyphicon glyphicon-leaf"></span> Message</a></li>

【讨论】：