如何在 jinja2 中编辑一些扩展块？答案

【问题标题】：How to edit some extends block in jinja2?如何在 jinja2 中编辑一些扩展块？
【发布时间】：2013-02-18 12:51:50
【问题描述】：

我有一个名为 main.html 的基本模板：

<ul>
  <li>index</li>
  <li>about</li>
  <li>contacts</li>
</ul>

我有一个模板index.html，它有：

{% extends "main.html" %}

如何根据指定的继承人将类属性添加到<li> 标签中？

例如，如果 index.html 扩展了 main.html，那么我将 class="active" 添加到第一个 <li>，如果 about.html em> 扩展 main.html，然后我将 class="active" 添加到第二个 <li> .... 等等。

我该怎么做？

【问题讨论】：

标签： django django-templates flask jinja2

【解决方案1】：

一种方法是保持 main.html 原样并通过调用 super 在子级别（about.html 等）覆盖它？我没有测试过这段代码，但类似：

main.html

{% block menu_bar %}
<ul>
  <li>index</li>
  <li>about</li>
  <li>contacts</li>
</ul>
{% endblock %}

关于.html

{% block menu_bar %}
<li class="active">about</li>
{{ super() }}
{% endblock %}

【讨论】：

【解决方案2】：

有两种解决方案：

第一种方法是定义一个宏并从子页面（不是继承的main 页面）调用它，其中包含使<li> 处于活动状态的信息。

喜欢：

{% macro menu(active) %}

<ul>
  {% if active == 'index' %}<li class="active">{% else %}<li>{%endif%}index</li>
  {% if active == 'about' %}<li class="active">{% else %}<li>{%endif%}about</li>
  {% if active == 'contacts' %}<li class="active">{% else %}<li>{%endif%}contacts</li>
</ul>

{% endmacro %}

并将其用作：

{% from 'macro.html' import menu %}

{{ macro('index') }} #in index.html
{{ macro('about') }} #in about.html
{{ macro('contacts') }} #in contacts.html

另一种方法是使用神奇的g 变量。在您的视图函数中定义哪个项目应该是活动项目并放入g 变量。喜欢：

from flask import g

app.route('/about')
def about():
  ...
  g.active_menu_item = 'about'

  ...

  return render_template('about.html')

并且您的about.html（索引和联系人也是）继承自main.html', so the codes that render menu ofmain.htmlshould considerg.active_menu_item`。喜欢：

main.html：

<ul>
  {% if g.active_menu_item == 'index' %}<li class="active">{% else %}<li>{%endif%}index</li>
  {% if g.active_menu_item == 'about' %}<li class="active">{% else %}<li>{%endif%}about</li>
  {% if g.active_menu_item == 'contacts' %}<li class="active">{% else %}<li>{%endif%}contacts</li>
</ul>

【讨论】：

【解决方案3】：

menu.html

<ul>
  <li class="{% if active_menu == 'index' %}active{% endif %}">index</li>
  <li class="{% if active_menu == 'about' %}active{% endif %}">about</li>
  <li class="{% if active_menu == 'contacts' %}active{% endif %}"contacts</li>
</ul>

index.html

{% extends "main.html" %}

{% include "menu.html" with active_menu='index' %}

about.html

{% extends "main.html" %}

{% include "menu.html" with active_menu='about' %}

contacts.html

{% extends "main.html" %}

{% include "menu.html" with active_menu='contacts' %}

【讨论】：