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

Posted 2023-02-24

【中文标题】如何在 jinja2 中编辑一些扩展块？

【英文标题】：How to edit some extends block in 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> .... 等等。

我该怎么做？

【参考方案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' %