python?flask之模板繼承方式
flask之模板繼承
為什么要用模板繼承?
原因很簡(jiǎn)單,因?yàn)槟0謇^承能讓我們?cè)趯?shí)現(xiàn)效果的前提下少些很多代碼!
咱廢話不多說(shuō),先來(lái)看個(gè)小例子,看完我講的這個(gè)例子,相信你能更加明白模板繼承的好處、優(yōu)點(diǎn)!(為了讓大家能夠更加明白模板繼承的優(yōu)點(diǎn),在這里我先以傳統(tǒng)方式來(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"> <h4>這是index頁(yè)面主體部分</h4> </div> {# footer start #} <div id="footer"> <h4>網(wǎng)站底部?jī)?nèi)容</h4> </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"> <h4>這是list頁(yè)面主體部分</h4> </div> {# footer start #} <div id="footer"> <h4>網(wǎng)站底部?jī)?nèi)容</h4> </div> </body> </html>
然后我們?cè)賱?chuàng)建一個(gè)test.py文件,其代碼如下:
from flask import Flask,render_template app = 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ō)干就干?。?/p>
我們?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"> <h4>這是index頁(yè)面主體部分</h4> </div> {% endblock %} {% block footer %} <div id="footer"> <h4>網(wǎng)站底部?jī)?nèi)容</h4> </div> {% endblock %} </body> </html>
我們?cè)诟改0逯卸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è)诟改0逯卸x了,哪我們就無(wú)需定義),index.html其代碼如下:
{% extends "base.html" %} {% block footer %} <div id="footer"> <h4>footer</h4> </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è)谧幽0宥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ì)被渲染。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Python自動(dòng)化短視頻生成腳本實(shí)現(xiàn)熱門視頻流水線生產(chǎn)
有粉絲和說(shuō),最近在網(wǎng)上看到一些視頻營(yíng)銷號(hào)一天能發(fā)布幾百條短視頻, 感覺是批量生成的,能不能用Python做個(gè)自動(dòng)化短視頻生成腳本呢?今天就帶大家一起實(shí)現(xiàn)熱門視頻批量流水線生產(chǎn)2021-09-09pycharm 2020.2.4 pip install Flask 報(bào)錯(cuò) Error:Non-zero exit co
這篇文章主要介紹了pycharm 2020.2.4 pip install Flask 報(bào)錯(cuò) Error:Non-zero exit code,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12Tornado協(xié)程在python2.7如何返回值(實(shí)現(xiàn)方法)
下面小編就為大家?guī)?lái)一篇Tornado協(xié)程在python2.7如何返回值(實(shí)現(xiàn)方法)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06python pandas dataframe 行列選擇,切片操作方法
下面小編就為大家分享一篇python pandas dataframe 行列選擇,切片操作方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-04-04Matplotlib子圖的創(chuàng)建的實(shí)現(xiàn)
本文主要介紹了Matplotlib子圖的創(chuàng)建的實(shí)現(xiàn),包括fig.add_axes()創(chuàng)建子圖和plt.axes創(chuàng)建子圖這兩種方法,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11解決python便攜版無(wú)法直接運(yùn)行py文件的問(wèn)題
這篇文章主要介紹了解決python便攜版無(wú)法直接運(yùn)行py文件的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09使用pycharm和pylint檢查python代碼規(guī)范操作
這篇文章主要介紹了使用pycharm和pylint檢查python代碼規(guī)范操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-06-06Python實(shí)現(xiàn)的多線程同步與互斥鎖功能示例
這篇文章主要介紹了Python實(shí)現(xiàn)的多線程同步與互斥鎖功能,涉及Python多線程及鎖機(jī)制相關(guān)操作技巧,需要的朋友可以參考下2017-11-11Python3.7 讀取音頻根據(jù)文件名生成腳本的代碼
這篇文章主要介紹了Python3.7 讀取音頻根據(jù)文件名生成字幕腳本的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04Django中日期時(shí)間型字段進(jìn)行年月日時(shí)分秒分組統(tǒng)計(jì)
這篇文章主要介紹了Django中日期時(shí)間型字段進(jìn)行年月日時(shí)分秒分組統(tǒng)計(jì),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11