带有Flask / Jinja2宏的样式活动导航元素 [英] Style active navigation element with a Flask/Jinja2 macro

问题描述

我使用Flask / Jinja2和Bootstrap 3。

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

这些元素存储在 prog_ids ：

  / program / 23022014 
 / program / 24022014 
 / program / 25022014 
  pre> 
 
 
我跟着一些例子，例如这一个，我的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> 
  
上述代码中是否有错误？ 
解决方案
你的代码只是重复定义一个宏，它不渲染任何东西。避免阅读 request.endpoint 并使用基本模板执行此操作。
 
 
 
  base.html  
 < ul class =nav nav-pill> 
< li class ={％block nav_here％} {％endblock％}>此处< / li> 
< li class ={％block nav_there％} {％endblock％}>有< / li> 
< li class ={％block nav_anywhere％} {％endblock％}>随意< / li> 
< / ul> 
 
 {％block content％} {％endblock％} 
  
  there.html  
  {％extendsbase.html％} 
 {％block nav_there％}有效{％endblock％} 
 {％block content％} 
< blockquote>无论你去哪里，都是。 
 {％endblock％} 
  
基本导航定义空 nav_  li 类中的块和子模板将相关的一个设置为 active 。您可以将其扩展到您希望在页面中进行子导航。
 
I am using Flask/Jinja2 and Bootstrap 3.

I'd like to add class="active" to the current navigation element.

Those elements are stored in prog_ids:
/programme/23022014
/programme/24022014
/programme/25022014
I followed some examples like this one and my HTML code is :
    <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>
Is there any error in the code above ? Because, it shows nothing .
解决方案
Your code just defines a macro over and over again, it doesn't render anything.  Avoid reading request.endpoint and use base templates to do this.

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 %}
The base navigation defines empty nav_ blocks in the li class and the sub template sets the relevant one to active.  You can extend this as far as you want to have sub-navigation within pages too.

                        
这篇关于带有Flask / Jinja2宏的样式活动导航元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！