目的:當多個頁面有很多相同部分的代碼(前端代碼)時,爲了避免多次反覆的拷貝代碼,django提供了模板繼承的概念。即:我們把共同的頁面代碼只需寫一次後面需要用到直接使用django的繼承屬性即可,就不用寫重複代碼了。
步驟:a.創建母板(也叫基礎模板),在其中定義站點的主要頁面(就是相同的部分),這些都是不常修改甚至不修改的部分;
b.在母板中定義可變的block,定義方法爲:{% block blockname %} 可變部分代碼(可省略) {% endblock %},母板中的block必須要考慮到所有的子模板繼承的現象,如果母板中沒有在對應的代碼區域增加block,則在子母板中無法實現其特有的功能;其中一個母板不可重複;
C.寫可擴展部分的頁面,通過繼承部分來實現其特有的部分的代碼,也就是重寫母板中對應的block;
模板代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.nav{
width: 100%;
line-height: 50px;
background-color: #37a4e0;
color: white;
font-size: 25px;
text-align: center;
}
.leftmenu{
width: 10%;
height: 588px;
background-color: darkgray;
color: blue;
font-size: 15px;
text-align: left;
float: left;
}
.menu{
margin: 0px 10px;
padding:10px 5px;
}
.context{
width: 100%;
height: 588px;
}
.context h1{
text-align: center;
}
{% block styles %}
{% endblock %}
</style>
</head>
<body>
<div class="outer">
<div class="nav">標題</div>
<div class="leftmenu">
<div class="menu python"><a href="{% url 'querypython' %}">Python相關</a></div>
<div class="menu java"><a href="{% url 'queryjava' %}">Java相關</a></div>
<div class="menu git"><a href="{% url 'querygit' %}">Git相關</a></div>
<div class="menu javas"><a href="{% url 'queryjs' %}">JavaScript相關</a></div>
</div>
<div class="context">
{% block list %}
<h1>歡迎來到我的博客!</h1>
{% endblock %}
</div>
</div>
</body>
</html>
子模板1代碼如下:
{% extends "mainpage.html" %}
{% block styles %}
.pylist{
color: red;
font-size: 23px;
}
{% endblock %}
{% block list %}
{% for articleobj in pylist %}
<div class="pylist"><a href="{{ articleobj.1 }}">{{ articleobj.0 }}</a></div>
{% endfor %}
{% endblock %}
子模板2代碼如下:
{% extends "mainpage.html" %}
{% block list %}
{{ block.super }} #使用母板的list block代碼
{% for articleobj in javalist %}
<div class="contextlist"><a href="{{ articleobj.1 }}">{{ articleobj.0 }}</a></div>
{% endfor %}
{% endblock %}
母板效果圖:
子模板1的效果圖:
子模板2的效果圖:
總結:
<1>如果在模板中使用{% extends ‘base.html’%}的方式來繼續母板,則必須保證放在首行,如果放在最後則繼承將不起作用;
<2>一般來說,基礎模板(母板)中{% block blockname%}標籤越多越好,基礎模板中的block越多意味着其擴展性越強(子模板中可以重寫母板中的block來實現特有的功能)。但是當子模板中需要訪問並使用基礎模板中block中已有的內容,則使用{{ blcok.super }}變量的方式來實現。
<3>當你發現如果需要在多個模板直接進行代碼的複製粘貼,此時應該考慮將該部分的代碼放進基礎模板中的對應的{% block %}中,這樣後面的子模板直接繼承即可,不用反覆拷貝代碼。
<4>不能在同一個基礎模板中定義多個同名的{% block %},因爲當基礎模板中有多個相同的block時,子模板將無法確定從基礎模板中使用哪一個block。
9.模板include添加標籤
目的:include標籤和extends標籤的用作有些類似,extends標籤是將其他模板(基礎模板)直接複製過來使用,而include標籤是將兩個模板內容安裝需要合併在一起使用(部分頁面需要,不是全部需要,所以不能將其放進基礎模板中)。
例如,下面圖中後者需要將前者合併在一起,爲了免費在後者的前端代碼上重複制拷貝前者的代碼,此時可以考慮使用include標籤。
最終的效果圖:
實現的代碼過程:
歡迎關注作者公衆號平臺