关于python：带Flask / Jinja2宏的样式活动导航元素


Style active navigation element with a Flask/Jinja2 macro

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

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

这些元素存储在prog_ids中：

1
2
3
/programme/23022014
/programme/24022014
/programme/25022014

我遵循了一些这样的示例，我的HTML代码是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    <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">
           
            <span class="badge pull-right">-</span>
            {{prog_id|strftime_b}}
           
       
</li>

    {% else %}
       
<li>

           
            <span class="badge pull-right">-</span>
            {{prog_id|strftime_b}}
           
       
</li>

    {% endif %}
    {% endmacro %}
    {% endfor %}
   
</ul>

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

相关讨论

您的代码只是一遍又一遍地定义一个宏，它不呈现任何内容。避免阅读request.endpoint并使用基本模板来执行此操作。

base.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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

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

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

正确使用Jinja2宏。这确实是一个有用的功能。在这种情况下，您将无法正确理解其工作原理。这篇文章将很好地解释它。
这是导航菜单的宏。切记将此宏放在导航菜单代码上方。否则Jinja将在需要时找不到它。

1
2
3
4
5
6
7
8
9
10
11
12
13
{% macro nav_link(endpoint, name) %}
    {% if request.endpoint.endswith(endpoint) %}
        <li class="active">{{name}}
</li>

    {% else %}
       
<li>
{{name}}
</li>

    {% endif %}
{% endmacro %}

您必须在模板文件中单独定义此代码块。不要将其放在循环中或其他任何地方。当您在模板中的任意位置调用宏时，此代码块将执行并提供所需的输出。查看如何使用此宏。 nav-link()就像一个常规函数。在您的导航栏代码块中调用它。请记住，您必须首先在服务器中定义这些路由。或者，您可以将这些宏添加到单独的html文件中(例如macros.html)，并在其中任何所需的位置导入其中的任何宏。

1
2
3
4
5
6
<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模板制作的好教程。

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

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

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