Django中模板的繼承及引用實現(xiàn)
引言
大家啊可以隨便取找個網(wǎng)站，比如：淘寶。多去看看它不同的頁面，用你閃亮的大眼睛去找不同點和相同點。
到一定時候，你會發(fā)現(xiàn)，網(wǎng)站中有些不同的頁面，它們中的部分數(shù)據(jù)是完全一模一樣的；而且有些數(shù)據(jù)不一樣的部分，它們前端的排版格式卻是一模一樣的哦！
你肯定會心生疑問——難道這些頁面全都要一個個敲代碼做嘛！這也太絕望了吧?。?！
但是——不要忘記了！程序猿一大原則是：絕不做重復(fù)的事！
所以對于上述現(xiàn)象，就涉及到了一個知識點——模板的繼承與引用?。。?/p>
1.模板的繼承與引用
Django模版引擎中最強大也是最復(fù)雜的部分就是模版繼承了。 模版繼承可以讓你創(chuàng)建一個基本的“骨架”模版，它包含您站點中的全部元素，并且可以定義能夠被子模版覆蓋的 blocks 。
（1）第一部分：常規(guī)思想——每個前端頁面都單獨碼：（下面示范三個前端頁面，對應(yīng)三個html模板文件及其效果展示?。?/p>
①第一個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>
效果展示：
②第二個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>
效果展示：
③第三個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>
效果展示：
分析——不難看出，這三個前端界面頭部和底部是一模一樣的；后兩個的中間內(nèi)容部分右側(cè)也都是廣告頁面。而我們?yōu)榱藢崿F(xiàn)這三個html界面分別碼了那么多重復(fù)的代碼，費時費力，考慮到類可以繼承，那么咱的html模板能否繼承呢？ 答案是肯定的，下面咱們來使用模板的繼承看一看有多牛逼：
（2）第二部分：高級思想——使用模板的繼承及引用！
①編寫父級模板base.html：
編寫父級模板原則：相同的部分直接編寫代碼，使子模板直接繼承（模板繼承使用extends標簽實現(xiàn)）；不同的部分通過使用block來給子模板開放接口，使子模板可以進行覆寫（模板覆寫使用block標簽實現(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樣式進行覆寫！#}
</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>
②第一個html模板： a_first.html文件：
{% extends 'music/base.html' %}
{% block con %}
內(nèi)容一
{% endblock %}
②第二個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 %}
②第三個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）使用模板的繼承及引用實現(xiàn)會發(fā)現(xiàn)跟上面不使用的效果一模一樣?。?！而且咱的代碼簡潔太多 。
下面來總結(jié)一下模板的繼承及引用：
模板繼承使用extends標簽實現(xiàn)。通過使用block來給子模板開放接口。
- extends必須是子模板中第一個出現(xiàn)的標簽。
- 子模板中的所有內(nèi)容，必須出現(xiàn)在父模板定義好的block中，否則django將不會渲染。
- 如果出現(xiàn)重復(fù)代碼，就應(yīng)該考慮使用模板。
- 盡可能多的定義block，方便子模板實現(xiàn)更細的需求。
- 如果在某個block中，要使用父模板的內(nèi)容，使用block.super獲取。
到此這篇關(guān)于Django中模板的繼承及引用實現(xiàn)的文章就介紹到這了,更多相關(guān)Django模板的繼承及引用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)硪黄猵ython 打印對象的所有屬性值的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要為大家詳細介紹了python如何讀寫json數(shù)據(jù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
pytorch實現(xiàn)seq2seq時對loss進行mask的方式
今天小編就為大家分享一篇pytorch實現(xiàn)seq2seq時對loss進行mask的方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-02-02
python sys.stdin和sys.stdout的用法說明
這篇文章主要介紹了python sys.stdin和sys.stdout的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-03-03
這篇文章主要介紹了python爬取12306驗證碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
今天小編就為大家分享一篇在Python文件中指定Python解釋器的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-02-02
利用Matplotlib繪制折線圖、散點圖、柱狀圖、直方圖、餅圖的實例
這篇文章主要介紹了利用Matplotlib繪制折線圖、散點圖、柱狀圖、直方圖、餅圖的實例代碼,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
python中plt.imshow與cv2.imshow顯示顏色問題
這篇文章主要介紹了plt.imshow與cv2.imshow顯示顏色問題,本文給大家介紹的非常詳細，同時給大家提到了cv2.imshow()和plt.imshow()的區(qū)別講解，需要的朋友可以參考下2020-07-07
這篇文章主要介紹了Flask請求鉤子與上下文及異常處理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
Python神經(jīng)網(wǎng)絡(luò)TensorFlow基于CNN卷積識別手寫數(shù)字
這篇文章主要介紹了Python神經(jīng)網(wǎng)絡(luò)TensorFlow基于CNN卷積識別手寫數(shù)字的實現(xiàn)示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-10-10