如何在jinja2中编辑某些扩展块?

I have a base template named main.html:

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

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

And I have a template index.html, which has:

我有一个模板索引。html,:

{% extends "main.html" %}

How I can add class atributes into <li> tags depending on named heir?

如何根据指定的继承人将类atributes添加到

标签中?

标签中?

For example, if index.html extends main.html, then I add class="active" to first <li>, if about.html extends main.html, then I add class="active" to second <li> .... and so on.

例如,如果索引。html扩展主要。然后我将class="active"添加到第一个

， if about。html扩展主要。html,然后我添加类=“活跃”,第二个 <李> ....等等。

,如果about.html扩展主要. html,然后我添加类=“活跃”,第二个....等等。

How I can do it?

我怎么做呢?

3 个解决方案

#1

there are kinda two solution to this:

有两种解决方法:

the first way is defining a macro and calling it from child pages(not the inherited main page) which contain information to make which <li> active.

第一种方法是定义一个宏并从子页面(不是继承的主页面)调用它，该页面包含使

激活的信息。

激活的信息。

like :

如:

{% 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 %}

and use it as :

并将其作为:

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

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

another ways is using the magical g variable. in your view functions define which item should be the active one and put in the g variable. like:

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

from flask import g

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

  ...

  return render_template('about.html')

and your about.html(index and contacts too) inherits from main.html', so the codes that render menu ofmain.htmlshould considerg.active_menu_item` into account. like:

和你的。html(索引和联系人)继承自main。html'，所以显示主菜单的代码。htmlshould considerg。active_menu_item的考虑。如:

main.html :

主要。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>

#2

One way could be to keep the main.html as is and override it at the child level (about.html etc) by calling super ? I have not tested this code but something like:

一种方法可能是保留主干。按原样html并在子级覆盖它(about)。通过调用super ?我还没有测试过这个代码，但是如下内容:

main.html

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

about.html

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

#3

menu.html

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

index . html

{% extends "main.html" %}

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

about.html

about.html

{% extends "main.html" %}

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

contacts.html

contacts.html

{% extends "main.html" %}

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