Flask模板繼承深入理解與應用

Posted on by

什麼叫模板繼承呢

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

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

模板頁

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

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

導航欄的兩個超鏈接：

<li><a href="/" rel="external nofollow"  rel="external nofollow"  >首頁</a></li>
<li><a href="/about" rel="external nofollow"  rel="external nofollow"  >關於我們</a></li>

註意：這裡的跳轉路徑是指定到某一個路由，不是某一個html頁面。

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

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

寫法是這樣的，title標簽中間的內容由一個block占著，這個block叫做title，名字可以隨意，後面會根據名字選擇block來填充。

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

然後是中間區域：

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

這裡也有一個block，叫做body。註意：每一個block都需要一個{% endblock %}作為block的結束位置。

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--不同頁面的標題不一樣，所以需要占位符,裡面的title是名稱，可以隨意-->
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
<!--相同的部分,導航欄-->
<div style="background-color: beige;height: 200px;width: 300px">
    相同的導航欄
<ul>
    <li><a href="/" rel="external nofollow"  rel="external nofollow"  >首頁</a></li>
    <li><a href="/about" rel="external nofollow"  rel="external nofollow"  >關於我們</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

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

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

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

這個頁面對應的路由是/,對應的視圖函數是：

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

繼承模板的頁面：about.html

首先about頁面對應的路由時/about，對應的視圖函數：

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

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

about.html

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

對應的py文件：模板繼承練習.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()

執行效果如下：

到此這篇關於Flask模板繼承深入理解與應用的文章就介紹到這瞭,更多相關Flask模板繼承內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：