Question

所以我有一个工作布局_layout.html（使用Jinja2 v2.6和Flask），其中包含我的标题{% include 'header.html' %}和正文内容{% block content %}{% endblock %}（按此顺序）。

了header.html

<ul>
    <li><a href="/about" {% if active_page == 'about' %} class="selected" {% endif %}>ABOUT</a></li>
</ul>

about.html

{% extends "_layout.html" %}
{% set active_page = 'about' %}

{% block content %}
    ...
{% endblock %}

问题在于，由于子模板是全局的并且在评估布局模板之前执行，因此class="selected"未添加header.html，因为{% include 'header.html' with context %}模板在其上下文中没有active_page。 / p>

如果我将header.html内容放在主布局中，一切正常，我怎样才能使用我所拥有的包含和结构来实现这一点？

编辑：

我也尝试{% from 'header.html' import input with context %}和{{1}}都不起作用。

Answer 1

最简单的解决方法是使用JavaScript（在这种情况下为JQuery）：

<强> JQuery的：

var currentPage = window.location.pathname;

$('nav ul li a').each(function(){
    if($(this).attr('href') == currentPage){
        $(this).addClass('selected');
    }
});

此函数会将选定的类添加到与当前窗口位置匹配的<a>标记中。

Answer 2

我就是这样做的：

在我的_mainlayout

中

 {% block stylesheets %}
    Links to stylesheets go here
 {% endblock %}

 {% block main_body_area %}
        Replace with your html body
 {% endblock %}

 {% block scripts %}
    Add js scripts here
 {% endblock %}

然后在子模板中，只需执行以下操作：

{% extends "_mainlayout.html" %}

 {% block stylesheets %}   
    <style sheets go here/>
 {% endblock %}

 {% block main_body_area %}
    <your page content here/>
 {% endblock %}

 {% block scripts %}
    add any js scripts here
 {% endblock %}

然后你可以在head部分添加你的active_page，在我给你的例子中，我保留了样式表。我是这样做的，因为在我的_mainlayout文件中，我有一个标准的css样式表，用于所有页面，然后如果我需要额外的页面特定布局，我将它包含在该特定页面中，如果不是只留空。

js文件也是如此，我不想在不需要它们的页面上加载脚本，因此可以很容易地将它们包含在需要特定js文件的页面上。

Answer 3

我在Jinja2 2.8版中遇到了同样的问题。将其升级到版本2.9 解决了这个问题。

Jinja active_page在包含的文件中不起作用

3 个答案: