Flask模板繼承深入理解與應(yīng)用

更新時間：2022年09月06日 14:55:24 作者：weixin_42576837

Flask中的模板可以繼承，通過繼承可以把模板中許多重復(fù)出現(xiàn)的元素抽取出來，放在父模板中，并且父模板通過定義block給子模板開一個口，子模板根據(jù)需要，再實(shí)現(xiàn)這個block

什么叫模板繼承呢

在我的理解就是：在前端頁面中肯定有很多頁面中有很多相同的地方，比如頁面頂部的導(dǎo)航欄，底部的頁腳等部分，這時候如果每一個頁面都重寫一遍，會很麻煩，而且也沒必要。

這時候就可以做一個模板，叫做父模板，里面放上相同的部分，不同的部分先使用其他東西占位，然后在不同的頁面中，繼承這個父模板，不同的部分填充不同的內(nèi)容。

模板頁

首先做一個模板頁面，模板是這樣子的：

上下都是不變的東西，中間的部分是不同的，不同的頁面繼承這個模板頁，然后在中間填充不同的內(nèi)容。

導(dǎo)航欄的兩個超鏈接：

<li><a href="/" rel="external nofollow"  rel="external nofollow"  >首頁</a></li>
<li><a href="/about" rel="external nofollow"  rel="external nofollow"  >關(guān)于我們</a></li>

注意：這里的跳轉(zhuǎn)路徑是指定到某一個路由，不是某一個html頁面。

相同部分的代碼就是普通的html代碼，只有需要填充的區(qū)域代碼寫法不同：

首先是標(biāo)題title，其他頁面需要繼承模板頁，所以模板頁的標(biāo)題不能寫死，而是需要動態(tài)變化的，所以需要先用一個block占位：

寫法是這樣的，title標(biāo)簽中間的內(nèi)容由一個block占著，這個block叫做title，名字可以隨意，后面會根據(jù)名字選擇block來填充。

<title>{% block title %}{% endblock %}</title>

然后是中間區(qū)域：

<div style="background-color:silver;height: 300px;width: 500px;margin: 10px">
不同的部分
<!--中間是不同的部分，用block先占著-->
{% block body %}
{% endblock %}
</div>

這里也有一個block，叫做body。注意：每一個block都需要一個{% endblock %}作為block的結(jié)束位置。

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--不同頁面的標(biāo)題不一樣，所以需要占位符,里面的title是名稱，可以隨意-->
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
<!--相同的部分,導(dǎo)航欄-->
<div style="background-color: beige;height: 200px;width: 300px">
    相同的導(dǎo)航欄
<ul>
    <li><a href="/" rel="external nofollow"  rel="external nofollow"  >首頁</a></li>
    <li><a href="/about" rel="external nofollow"  rel="external nofollow"  >關(guān)于我們</a></li>
</ul>
</div>
<div style="background-color:silver;height: 300px;width: 500px;margin: 10px">
<p>不同的部分</p>
<!--中間是不同的部分，用block先占著-->
{% block body %}
{% endblock %}
</div>
<!--相同的部分，頁腳-->
<div style="background-color: burlywood;height: 100px;width: 200px">
    <footer style="background-color: darkgray">相同的頁腳部分</footer>
</div>
</body>
</html>

繼承模板的頁面：index.html

現(xiàn)在新建一個頁面:index.html,它繼承之前的模板頁面：

由于是繼承了父模板，所以首先要指定這個模板繼承哪一個模板。{% extends '模板.html' %}，表示繼承叫做模板.html的頁面。然后分別指定不同的block中填充不同的內(nèi)容。

<!--繼承哪一個模板-->
{% extends '模板.html' %}
<!--指定不同的內(nèi)容,指定叫做title的block中的內(nèi)容-->
{% block title %}
    繼承了模板頁的 首頁
{% endblock %}
<!--指定叫做body的block中的內(nèi)容-->
{% block body %}
    <p>首頁中的內(nèi)容</p>
{% endblock %}

這個頁面對應(yīng)的路由是/,對應(yīng)的視圖函數(shù)是：

#根路徑，渲染index.html頁面
@app.route('/')
def index():
    return render_template('index.html')

繼承模板的頁面：about.html

首先about頁面對應(yīng)的路由時/about，對應(yīng)的視圖函數(shù)：

#/about路徑，渲染about.html頁面
teams = ['小明','小紅','小剛']
@app.route('/about')
def about():
#以關(guān)鍵字參數(shù)的形式把teams傳遞到about.html頁面中
    return render_template('about.html',teams = teams)

這里我們傳遞一個列表過去，在about.html頁面中加載出來。

about.html

{% extends '模板.html' %}
{% block title %}
繼承模板頁的 about頁面
{% endblock %}
{% block body %}
<p>about頁面中的內(nèi)容</p>
    <p>
        我們的團(tuán)隊(duì)成員有:
        {% for name in teams %}	#拿到傳遞的參數(shù)列表，遍歷
            <li>{{ name }}</li>
        {% endfor %}
    </p>
{% endblock %}

對應(yīng)的py文件：模板繼承練習(xí).py

from flask import  Flask,render_template
app = Flask(__name__,template_folder='../templates')
#根路徑，渲染index.html頁面
@app.route('/')
def index():
    return render_template('index.html')
#/about路徑，渲染about.html頁面
teams = ['小明','小紅','小剛']
@app.route('/about')
def about():
    return render_template('about.html',teams = teams)
if __name__ == '__main__':
    app.run()

執(zhí)行效果如下：