大家啊可以隨便取找個(gè)網(wǎng)站,比如:淘寶。多去看看它不同的頁面,用你閃亮的大眼睛去找不同點(diǎn)和相同點(diǎn)。
到一定時(shí)候,你會發(fā)現(xiàn),網(wǎng)站中有些不同的頁面,它們中的部分?jǐn)?shù)據(jù)是完全一模一樣的;而且有些數(shù)據(jù)不一樣的部分,它們前端的排版格式卻是一模一樣的哦!
你肯定會心生疑問——難道這些頁面全都要一個(gè)個(gè)敲代碼做嘛!這也太絕望了吧?。?!
但是——不要忘記了!程序猿一大原則是:絕不做重復(fù)的事!
所以對于上述現(xiàn)象,就涉及到了一個(gè)知識點(diǎn)——模板的繼承與引用!??!
Django模版引擎中最強(qiáng)大也是最復(fù)雜的部分就是模版繼承了。 模版繼承可以讓你創(chuàng)建一個(gè)基本的“骨架”模版,它包含您站點(diǎn)中的全部元素,并且可以定義能夠被子模版覆蓋的 blocks 。
(1)第一部分:常規(guī)思想——每個(gè)前端頁面都單獨(dú)碼:(下面示范三個(gè)前端頁面,對應(yīng)三個(gè)html模板文件及其效果展示?。?/p>
①第一個(gè)html模板:
a_first.html文件:
!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>Title/title> style> *{ margin: 0; padding: 0; } .top{ height: 200px; background: darkgoldenrod; } .con{ height: 500px; background: aqua; } .but{ height: 150px; background: sandybrown; } /style> /head> body> div> div class="top">頭部/div> div class="con">內(nèi)容一/div> div class="but">底部/div> /div> /body> /html>
效果展示:
②第二個(gè)html模板:
a_second.html文件:
!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>Title/title> style> *{ margin: 0; padding: 0; } .top{ height: 200px; background: darkgoldenrod; } .con{ height: 500px; background: aqua; } .but{ height: 150px; background: sandybrown; } .con .left{ width: 70%; float: left; height: 100%; background: red; } .con .right{ width: 30%; float: left; height: 100%; background: #352fff; } /style> /head> body> div> div class="top">頭部/div> div class="con"> div class="left">內(nèi)容二/div> div class="right">廣告/div> /div> div class="but">底部/div> /div> /body> /html>
效果展示:
③第三個(gè)html模板:
a_third.html文件:
!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>Title/title> style> *{ margin: 0; padding: 0; } .top{ height: 200px; background: darkgoldenrod; } .con{ height: 500px; background: aqua; } .but{ height: 150px; background: sandybrown; } .con .left{ width: 70%; float: left; height: 100%; background: #f338ff; } .con .right{ width: 30%; float: left; height: 100%; background: #24ff44; } /style> /head> body> div> div class="top">頭部/div> div class="con"> div class="left">內(nèi)容三/div> div class="right">廣告/div> /div> div class="but">底部/div> /div> /body> /html>
效果展示:
分析——不難看出,這三個(gè)前端界面頭部和底部是一模一樣的;后兩個(gè)的中間內(nèi)容部分右側(cè)也都是廣告頁面。而我們?yōu)榱藢?shí)現(xiàn)這三個(gè)html界面分別碼了那么多重復(fù)的代碼,費(fèi)時(shí)費(fèi)力,考慮到類可以繼承,那么咱的html模板能否繼承呢? 答案是肯定的,下面咱們來使用模板的繼承看一看有多牛逼:
(2)第二部分:高級思想——使用模板的繼承及引用!
①編寫父級模板base.html:
編寫父級模板原則:相同的部分直接編寫代碼,使子模板直接繼承(模板繼承使用extends標(biāo)簽實(shí)現(xiàn));不同的部分通過使用block來給子模板開放接口,使子模板可以進(jìn)行覆寫(模板覆寫使用block標(biāo)簽實(shí)現(xiàn))
!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>Title/title> style> *{ margin: 0; padding: 0; } .top{ height: 200px; background: darkgoldenrod; } .con{ height: 500px; background: aqua; } .but{ height: 150px; background: sandybrown; } .con .right{ width: 30%; float: left; height: 100%; background: #352fff; } /style> {% block style %}{% endblock %} {#讓子模板可以對css樣式進(jìn)行覆寫!#} /head> body> div> div class="top">頭部/div> div class="con"> {% block con %} {% block left %} {% endblock %} {% block right %} div class="right">廣告/div> {% endblock %} {% endblock %} /div> div class="but">底部/div> /div> /body> /html>
②第一個(gè)html模板: a_first.html文件:
{% extends 'music/base.html' %} {% block con %} 內(nèi)容一 {% endblock %}
②第二個(gè)html模板:
a_second.html文件:
{% extends 'music/base.html' %} {% block style %} style> .con .left{ width: 70%; float: left; height: 100%; background: red; } /style> {% endblock %} {% block left %} div class="left">內(nèi)容二/div> {% endblock %}
②第三個(gè)html模板: a_third.html文件:
{% extends 'music/base.html' %} {% block style %} style> .con .left{ width: 70%; float: left; height: 100%; background: #f338ff; } .con .right{ width: 30%; float: left; height: 100%; background: #24ff44; } /style> {% endblock %} {% block left %} div class="left">內(nèi)容三/div> {% endblock %}
(3)使用模板的繼承及引用實(shí)現(xiàn)會發(fā)現(xiàn)跟上面不使用的效果一模一樣?。。《以鄣拇a簡潔太多 。
模板繼承使用extends標(biāo)簽實(shí)現(xiàn)。通過使用block來給子模板開放接口。
到此這篇關(guān)于Django中模板的繼承及引用實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Django模板的繼承及引用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
標(biāo)簽:呼倫貝爾 安慶 銀川 呼倫貝爾 烏魯木齊 湘西 葫蘆島 三亞
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Django中模板的繼承及引用實(shí)現(xiàn)》,本文關(guān)鍵詞 Django,中,模板,的,繼承,及,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。