2016-11-10 224 views
3

我有一個Flask項目,具有Materialise CSS框架。我想根據用戶正在查看的當前頁面在導航菜單中添加class="active"li元素。我的主模板包含一個帶菜單的模板,菜單爲每個項目的類定義一個塊。呈現的模板擴展主要並覆蓋其中一個塊,但這不起作用。我如何覆蓋包含中定義的塊?從擴展模板中覆蓋包含模板中的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中將其擴展。

第二個解決方案是使用全局變量,因爲子模板中的賦值是全局變量,並且在對模板進行求值之前執行。這裏有一個例子:

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類添加到根據active_item變量的項目。

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

homepage.html

在這個模板中,我們設定一個值active_item變量。

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

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

非常有幫助和很好的解釋。隊友的歡呼聲。 –