Django4.3_templates模板之繼承標簽extends和include添加標簽

發(fā)布時間：2020-07-15 10:48:11 來源：網(wǎng)絡閱讀：1779 作者：易水寒月欄目：編程語言

目的:當多個頁面有很多相同部分的代碼(前端代碼)時，為了避免多次反復的拷貝代碼，django提供了模板繼承的概念。即:我們把共同的頁面代碼只需寫一次后面需要用到直接使用django的繼承屬性即可，就不用寫重復代碼了。
步驟:a.創(chuàng)建母板(也叫基礎(chǔ)模板)，在其中定義站點的主要頁面(就是相同的部分)，這些都是不常修改甚至不修改的部分；
b.在母板中定義可變的block，定義方法為:{% block blockname %} 可變部分代碼(可省略) {% endblock %}，母板中的block必須要考慮到所有的子模板繼承的現(xiàn)象，如果母板中沒有在對應的代碼區(qū)域增加block，則在子母板中無法實現(xiàn)其特有的功能；其中一個母板不可重復；
C.寫可擴展部分的頁面，通過繼承部分來實現(xiàn)其特有的部分的代碼，也就是重寫母板中對應的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 h2{
            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相關(guān)</a></div>
        <div class="menu java"><a href="{% url 'queryjava' %}">Java相關(guān)</a></div>
        <div class="menu git"><a href="{% url 'querygit' %}">Git相關(guān)</a></div>
        <div class="menu javas"><a href="{% url 'queryjs' %}">JavaScript相關(guān)</a></div>
    </div>
    <div class="context">
        {% block list %}
            <h2>歡迎來到我的博客!</h2>
        {% 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 %}

母板效果圖:
Django4.3_templates模板之繼承標簽extends和include添加標簽
子模板1的效果圖:

子模板2的效果圖:

總結(jié):
<1>如果在模板中使用{% extends ‘base.html’%}的方式來繼續(xù)母板，則必須保證放在首行，如果放在最后則繼承將不起作用；
<2>一般來說，基礎(chǔ)模板(母板)中{% block blockname%}標簽越多越好，基礎(chǔ)模板中的block越多意味著其擴展性越強(子模板中可以重寫母板中的block來實現(xiàn)特有的功能)。但是當子模板中需要訪問并使用基礎(chǔ)模板中block中已有的內(nèi)容，則使用{{ blcok.super }}變量的方式來實現(xiàn)。
<3>當你發(fā)現(xiàn)如果需要在多個模板直接進行代碼的復制粘貼，此時應該考慮將該部分的代碼放進基礎(chǔ)模板中的對應的{% block %}中，這樣后面的子模板直接繼承即可，不用反復拷貝代碼。
<4>不能在同一個基礎(chǔ)模板中定義多個同名的{% block %},因為當基礎(chǔ)模板中有多個相同的block時，子模板將無法確定從基礎(chǔ)模板中使用哪一個block。
9.模板include添加標簽
目的:include標簽和extends標簽的用作有些類似，extends標簽是將其他模板(基礎(chǔ)模板)直接復制過來使用，而include標簽是將兩個模板內(nèi)容安裝需要合并在一起使用(部分頁面需要，不是全部需要，所以不能將其放進基礎(chǔ)模板中)。
例如，下面圖中后者需要將前者合并在一起，為了免費在后者的前端代碼上重復制拷貝前者的代碼，此時可以考慮使用include標簽。
Django4.3_templates模板之繼承標簽extends和include添加標簽

最終的效果圖:

實現(xiàn)的代碼過程: