Django中模板的繼承及引用實(shí)現(xiàn)

更新時(shí)間：2021年08月26日 10:40:01 作者：孤寒者

Django模版引擎中最強(qiáng)大也是最復(fù)雜的部分就是模版繼承了，頁面的代碼很多，隨隨便便就是幾百行代碼，但是每個(gè)頁面之中都有相同的元素。本文主要介紹了Django模板的繼承及引用，感興趣的可以了解一下

引言

大家啊可以隨便取找個(gè)網(wǎng)站，比如：淘寶。多去看看它不同的頁面，用你閃亮的大眼睛去找不同點(diǎn)和相同點(diǎn)。

到一定時(shí)候，你會(huì)發(fā)現(xiàn)，網(wǎng)站中有些不同的頁面，它們中的部分?jǐn)?shù)據(jù)是完全一模一樣的；而且有些數(shù)據(jù)不一樣的部分，它們前端的排版格式卻是一模一樣的哦！

你肯定會(huì)心生疑問——難道這些頁面全都要一個(gè)個(gè)敲代碼做嘛！這也太絕望了吧！??！

但是——不要忘記了！程序猿一大原則是：絕不做重復(fù)的事！

所以對(duì)于上述現(xiàn)象，就涉及到了一個(gè)知識(shí)點(diǎn)——模板的繼承與引用?。?！

1.模板的繼承與引用

Django模版引擎中最強(qiáng)大也是最復(fù)雜的部分就是模版繼承了。模版繼承可以讓你創(chuàng)建一個(gè)基本的“骨架”模版，它包含您站點(diǎn)中的全部元素，并且可以定義能夠被子模版覆蓋的 blocks 。

（1）第一部分：常規(guī)思想——每個(gè)前端頁面都單獨(dú)碼：（下面示范三個(gè)前端頁面，對(duì)應(yīng)三個(gè)html模板文件及其效果展示！）

①第一個(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）第二部分：高級(jí)思想——使用模板的繼承及引用！

在這里插入圖片描述

①編寫父級(jí)模板base.html：

編寫父級(jí)模板原則：相同的部分直接編寫代碼，使子模板直接繼承（模板繼承使用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 %}			  {#讓子模板可以對(duì)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)會(huì)發(fā)現(xiàn)跟上面不使用的效果一模一樣?。?！而且咱的代碼簡潔太多。