Django(extend模板继承)-CSDN博客

要实现如图所示界面（点击菜单出现菜单界面，点击购物车出现购物车界面，两者所示界面仅仅差图中蓝色区域的字，

但是要写两个html，而且其中99%想同），为了解决这一冗余的情况，引入了extend模板继承。

先来看一下ordered.html和shoppingcar.html的不同之处（图中标出位置ordered.html是菜单，shoppingcar.html是购物车）：

extend模板继承

a.新建abse.html文档，将ordered.html和shoppingcar.html中相同的地方取出来复制到abse.html文档中，代码如下：

#abse.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .all{
            height: 800px;
            width: 100%;
        }
        .top{
            height: 44px;
            width: 100%;
            float: left;
            background-color: palegoldenrod;
        }
        .content{
            height: 700px;
            width: 100%;
            float: left;
        }
        .content-left{
            height: inherit;
            width: 20%;
            float: left;
            background-color: burlywood;
        }
        .content-right{
            height: inherit;
            width: 80%;
            float: left;
            background-color: cornflowerblue;
        }
        .bottom{
            height: 44px;
            width: 100%;
            float: left;
            background-color: chocolate;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="top"></div>
    <div class="content">
        <div class="content-left">
            <div><a href="/ordered/">菜单</a></div>
            <div><a href="/shopping_car/">购物车</a></div>
        </div>
        #<div class="content-right">菜单</div>   这句话是存在于ordered.html中的，在abse.html中，将这句话替换如下

        {% block content%}

        {% endblock %}
    
    </div>
    <div class="bottom"></div>
</div>
</body>
</html>

View Code

b.删除ordered.html和shoppingcar.html中的所有内容，重新写代码如下：

#ordered.html

{% extends "abse.html" %}        #继承于abse.html

{% block content%}                    
     <div class="content-right">菜单</div>
{% endblock%}

View Code

#shoppingcar.html

{% extends "abse.html" %}

{% block content%}
     <div class="content-right">购物车</div>
{% endblock%}

View Code

转载于:https://www.cnblogs.com/gaoyukun/p/8999384.html