溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下python flask模板繼承方式是什么的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。
首先、在static目錄下新建一個(gè)style目錄（用于存放所有的css文件），然后新建一個(gè)style文件（style.css），其代碼如下：
*{margin: 0; padding: 0;}ul{list-style: none;}li{width:100px; float: left;}.cl_btoh{clear: both;}#head{width:800px; height:50px; line-height: 50px; margin:0 auto; background-color: #303641;}#head a{color:#ECEFF1;}#head ul{line-height: 50px;}#head li{text-align: center;}#main{height:400px; width:800px; background-color: yellowgreen; margin: 0 auto; color:#FFFFFF;text-align: center; line-height: 400px;}#footer{height:40px; width:800px; margin: 0 auto; background-color: #3B666B; color:#FFFFFF;text-align: center; line-height: 40px;}在templates模板目錄下新建一個(gè)index.html文件（首頁(yè)）和一個(gè)list.html（列表頁(yè)）
index.html文件代碼如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title> <link rel="stylesheet" href="{{ url_for('static',filename='style/css.css') }}"></head><body> {# head start#} <div id="head"> <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">養(yǎng)生新聞</a></li> <li><a href="#">人群養(yǎng)生</a></li> <li><a href="#">兩性養(yǎng)生</a></li> <li><a href="#">生活養(yǎng)生</a></li> <li><a href="#">飲食養(yǎng)生</a></li> <li><a href="#">中醫(yī)養(yǎng)生</a></li> </ul> </div> <div class="cl_btoh"></div> {# main start #} <div id="main"> <h5>這是index頁(yè)面主體部分</h5> </div> {# footer start #} <div id="footer"> <h5>網(wǎng)站底部?jī)?nèi)容</h5> </div></body></html>list.html文件代碼如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title> <link rel="stylesheet" href="{{ url_for('static',filename='style/css.css') }}"></head><body> {# head start#} <div id="head"> <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">養(yǎng)生新聞</a></li> <li><a href="#">人群養(yǎng)生</a></li> <li><a href="#">兩性養(yǎng)生</a></li> <li><a href="#">生活養(yǎng)生</a></li> <li><a href="#">飲食養(yǎng)生</a></li> <li><a href="#">中醫(yī)養(yǎng)生</a></li> </ul> </div> <div class="cl_btoh"></div> {# main start #} <div id="main"> <h5>這是list頁(yè)面主體部分</h5> </div> {# footer start #} <div id="footer"> <h5>網(wǎng)站底部?jī)?nèi)容</h5> </div></body></html>然后我們?cè)賱?chuàng)建一個(gè)test.py文件，其代碼如下：
from flask import Flask,render_templateapp = Flask(__name__)@app.route("/")def index(): return render_template("index.html")@app.route("/list/")def my_list(): return render_template("list.html")if __name__ == "__main__": app.run(debug=True)運(yùn)行test.py文件，打開瀏覽器，看看運(yùn)行效果，結(jié)果如下。
這兩個(gè)運(yùn)行結(jié)果，除了中間部分不一樣，頭部、底部都一樣，是吧？？我可以坦白告訴大家，基本上每個(gè)網(wǎng)站頭部、尾部都一樣，不信你可以打開新浪，網(wǎng)易、豆瓣網(wǎng)站瞅瞅.....有點(diǎn)跑題了哈！！咱言歸正傳。
既然我們知道網(wǎng)站頭部、底部都一樣，哪我們是不是可以把網(wǎng)站頭部、底部代碼抽取出來(lái)，放到公共頁(yè)面中，下次需要我們?cè)诶^承或者調(diào)用就OK了，是吧？說(shuō)干就干??！
我們?cè)趖emplates目錄下新建一個(gè)base.html文件，這個(gè)文件（base.html）可以稱為父模板或基模板，其代碼如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="{{ url_for('static',filename='style/css.css') }}"></head><body> {% block head %} <div id="head"> <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">養(yǎng)生新聞</a></li> <li><a href="#">人群養(yǎng)生</a></li> <li><a href="#">兩性養(yǎng)生</a></li> <li><a href="#">生活養(yǎng)生</a></li> <li><a href="#">飲食養(yǎng)生</a></li> <li><a href="#">中醫(yī)養(yǎng)生</a></li> </ul> </div> <div class="cl_btoh"></div> {% endblock %} {% block main %} <div id="main"> <h5>這是index頁(yè)面主體部分</h5> </div> {% endblock %} {% block footer %} <div id="footer"> <h5>網(wǎng)站底部?jī)?nèi)容</h5> </div> {% endblock %}</body></html>我們?cè)诟改０逯卸x好了接口后，子模板（index.html 跟 list.html）的代碼可以刪除了。刪除了不能就這樣走人完事了，我們還得實(shí)現(xiàn)我們之前的效果對(duì)吧！
在index.html文件中，我們通過(guò)extends語(yǔ)句來(lái)導(dǎo)入父模板，然后就能在子模板中衍生父模板定義的接口。index.html代碼如下：
{% extends "base.html" %}咦，咋就一行代碼嘞，阿湯鍋，你在逗我呢？嗯，沒錯(cuò)，就一行代碼！夠精簡(jiǎn)吧！！丫的，不信是吧？不信我們運(yùn)行看看效果，結(jié)果如下：
結(jié)果是不是和之前一模一樣，是吧？現(xiàn)在有個(gè)需求，啥需求呢？比如我想將index.html頁(yè)面“網(wǎng)站底部?jī)?nèi)容“這幾個(gè)字改成footer，哪怎么做呢？
做法：
在index.html頁(yè)面中，重寫父模板定義的footer接口，如果沒有定義，就得在父模板先定義再重寫。（由于我們?cè)诟改０逯卸x了，哪我們就無(wú)需定義），index.html其代碼如下：
{% extends "base.html" %}{% block footer %} <div id="footer"> <h5>footer</h5> </div>{% endblock %}運(yùn)行，試試，看是不是實(shí)現(xiàn)了我們得需求！
嗯，底部文字確實(shí)變成了footer，不過(guò)呢，現(xiàn)在又有一個(gè)新需求。我想要在這是index頁(yè)面主體部分加一行內(nèi)容，咋辦呢？有朋友可能會(huì)說(shuō)：哪還不簡(jiǎn)單，直接在index.html block main中定義就ok了唄。嗯，我們來(lái)試試這法子，在index.html增加如下代碼：
{% block main %} <div id="main"> <p>test</p> </div>{% endblock %}運(yùn)行結(jié)果如下：
阿湯哥、咋回事？不是說(shuō)好的在這是index頁(yè)面主體部分下面加一行內(nèi)容？？之前的內(nèi)容跑哪去了？為什么會(huì)出現(xiàn)這樣的情況呢？？原因很簡(jiǎn)單，因?yàn)槲覀冊(cè)谧幽０宥x的內(nèi)容將父模板接口定義的內(nèi)容覆蓋了，哪有啥解決辦法呢？要想實(shí)現(xiàn)功能，只需增加一個(gè)super變量即可，代碼如下：
{% block main %} {{ super() }} <div style="height:auto;width: 800px;background-color:yellowgreen;margin:0 auto;"><b>ee</b></div>{% endblock %}再運(yùn)行試試，結(jié)果實(shí)現(xiàn)了我們想要的結(jié)果。
在模板繼承中，我們需要注意以下幾點(diǎn)：
1、子模板第一段必須是{% extends "父模板文件路徑" %}
2、子模板內(nèi)容必須寫在父模板定義的接口中，寫在接口外面的內(nèi)容不會(huì)被渲染。
以上就是“python flask模板繼承方式是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼