快捷導(dǎo)航

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

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

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

什么叫模板繼承呢

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

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

模板頁(yè)

首先做一個(gè)模板頁(yè)面，模板是這樣子的：

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

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

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

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

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

首先是標(biāo)題title，其他頁(yè)面需要繼承模板頁(yè)，所以模板頁(yè)的標(biāo)題不能寫(xiě)死，而是需要?jiǎng)討B(tài)變化的，所以需要先用一個(gè)block占位：

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

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

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

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

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

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--不同頁(yè)面的標(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"  >首頁(yè)</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>
<!--相同的部分，頁(yè)腳-->
<div style="background-color: burlywood;height: 100px;width: 200px">
    <footer style="background-color: darkgray">相同的頁(yè)腳部分</footer>
</div>
</body>
</html>

繼承模板的頁(yè)面：index.html

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

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

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

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

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

繼承模板的頁(yè)面：about.html

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

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

這里我們傳遞一個(gè)列表過(guò)去，在about.html頁(yè)面中加載出來(lái)。

about.html

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

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

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

執(zhí)行效果如下：