2

main.htmlという名前の基本テンプレートがあります。

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

そして、次のようなテンプレートindex.htmlがあります。

{% extends "main.html" %}

<li>名前付き相続人に応じてクラス属性をタグに追加するにはどうすればよいですか?

たとえば、index.htmlがmain.htmlを拡張する場合は firstに追加class="active"し、 about.htmlがmain.htmlを拡張<li>する場合は secondに追加します .... など。class="active"<li>

どうすればそれができますか？

4

3 に答える 3

1

1 つの方法として、main.html をそのまま保持し、super を呼び出して子レベル (about.html など) でオーバーライドすることが考えられます。このコードはテストしていませんが、次のようなものです。

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 %}
于 2013-03-04T14:38:02.823 に答える
0

これにはちょっと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.htmlg.active_menu_item`should considerからアカウントに継承します。お気に入り：

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>
于 2013-03-04T12:32:12.950 に答える
0

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

contact.html

{% extends "main.html" %}

{% include "menu.html" with active_menu='contacts' %}
于 2013-03-04T14:46:03.200 に答える