Django中模板的继承及引用实现

第Django中模板的继承及引用实现大家啊可以随便取找个网站，比如：淘宝。多去看看它不同的页面，用你闪亮的大眼睛去找不同点和相同点。

到一定时候，你会发现，网站中有些不同的页面，它们中的部分数据是完全一模一样的；而且有些数据不一样的部分，它们前端的排版格式却是一模一样的哦！

你肯定会心生疑问——难道这些页面全都要一个个敲代码做嘛！这也太绝望了吧！！！

但是——不要忘记了！程序猿一大原则是：绝不做重复的事！

所以对于上述现象，就涉及到了一个知识点——模板的继承与引用！！！

1.模板的继承与引用

Django模版引擎中最强大也是最复杂的部分就是模版继承了。模版继承可以让你创建一个基本的“骨架”模版，它包含您站点中的全部元素，并且可以定义能够被子模版覆盖的blocks。

（1）第一部分：常规思想——每个前端页面都单独码：（下面示范三个前端页面，对应三个html模板文件及其效果展示！）

①第一个html模板：

a_first.html文件：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

titleTitle/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头部/div

div内容一/div

div底部/div

/div

/body

/html

效果展示：

②第二个html模板：

a_second.html文件：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

titleTitle/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头部/div

div

div内容二/div

div广告/div

/div

div底部/div

/div

/body

/html

效果展示：

③第三个html模板：

a_third.html文件：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

titleTitle/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头部/div

div

div内容三/div

div广告/div

/div

div底部/div

/div

/body

/html

效果展示：

分析——不难看出，这三个前端界面头部和底部是一模一样的；后两个的中间内容部分右侧也都是广告页面。而我们为了实现这三个html界面分别码了那么多重复的代码，费时费力，考虑到类可以继承，那么咱的html模板能否继承呢？答案是肯定的，下面咱们来使用模板的继承看一看有多牛逼：

（2）第二部分：高级思想——使用模板的继承及引用！