2016-11-10 9 views
3

Materialize CSSフレームワークを使用したFlaskプロジェクトがあります。ユーザーが表示している現在のページに基づいて、ナビゲーションメニューのli要素にclass="active"を追加したいと思います。私のメインテンプレートにはメニュー付きのテンプレートが含まれ、メニューには各アイテムのクラス用のブロックが定義されています。レンダリングされたテンプレートはmainを拡張し、ブロックの1つを上書きしますが、動作しません。インクルードで定義されたブロックをどのように上書きできますか?テンプレートに含まれるテンプレート内のJinjaブロックを上書きする

main.html

<div class="menu_container"> 
    {% include "menu_items.html"%} 
    {% block body %}{% endblock %} 
</div> 

menu_items.html

<li class="{% block home_active %}{% endblock %}">Homepage</li> 
<li class="{% block other_page_active %}{% endblock %}">Other Page</li> 

homepage.html

{% extends main.html %} 
{% block home_active %}active{% endblock %} #Trying to add class active, doesn't work. 
{% block body %} 
    # Homepage content goes here 
{% endblock %} 

答えて

5

この動作は論理的なようだが、現在、あなたは、子テンプレートから含まれるブロックを上書きすることはできません。この機能は一度implementedになりましたが、いくつかの後方互換性のない副作用があったため復帰しました。

しかし、回避策があります。最も簡単な解決策は、main.htmlテンプレート内のすべてのブロック定義を入れてから、homepage.htmlに拡張することです。

2番目の解決策は、子テンプレートの割り当てがグローバルであり、テンプレートが評価される前に実行されるため、グローバル変数を使用することです。次に例を示します。

main.html

ここでは、子テンプレートからオーバーライドすることができ、変数active_itemを定義します。私たちはデフォルト値も設定しました。

{% set active_item = active_item|default('home') %} 
<div class="menu_container"> 
    {% include "menu_items.html"%} 
    {% block body %}{% endblock %} 
</div> 

menu_items.html

我々はactive_item変数の依存項目にactiveクラスを追加します。

homepage.html

<li class="{% if active_item == 'home' %}active{% endif %}">Homepage</li> 
<li class="{% if active_item == 'other' %}active{% endif %}">Other Page</li> 

は、このテンプレートでは、 active_item変数に値を設定します。

{% extends 'main.html' %}  
{% set active_item = 'home' %} 

{% block body %} 
    # Homepage content goes here 
{% endblock %} 
+0

非常に参考になり、よく説明されています。歓声メイト。 –

関連する問題