python - 使用 Flask/Jinja2 宏设置事件导航元素的样式

标签 python css twitter-bootstrap flask jinja2

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

上面的代码有没有错误?因为,它什么也没显示。

最佳答案

您的代码只是一遍又一遍地定义一个宏,它不会渲染任何东西。避免阅读 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_ block ,子模板将相关 block 设置为 active。您可以将此扩展到您希望在页面内也有子导航的程度。

关于python - 使用 Flask/Jinja2 宏设置事件导航元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21991820/

相关文章:

css - Bootstrap SASS 生成供应商文件夹

html - JSF bootstrap Glyphicons 不显示

html - 无法设置默认文本框值

Python/Numpy 子数组选择

python - 如何使用 pandas 中 apply() 函数的返回值设置类别?

python - 在 ipynb 中将来自 %matplotlib notebook 后端的输出作为 SVG 包含在内

jquery - 简单的jQuery.Gantt宽高调整

javascript - 悬停菜单 <li> 问题时淡化内容

django - 如何将 CSS 类添加到 Django 内置表单

python - Django: django.db.utils.InternalError: (1046, u'未选择数据库')