来看一个例子

我们有一个订单的页面和购物车的页面,比如下面的截图,我的购物车的页面和订单的页面只有圆圈中的截图的内容不一样

 

 

所以我们的订单的html页面和购物车的html业务的html几乎都是一致的

订单的html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
        }
        .page-header{
            height: 50px;
            background-color: silver;
        }
        .page-body .menu{
            height: 400px;
            background-color: aqua;
            float: left;
            width: 20%;

        }
        .page-body .context{
            height: 400px;
            background-color: red;
            width: 80%;
            float: right;
        }
        .page-footer{
            height: 30px;
            background-color: yellow;
            clear: both;
        }
    </style>
</head>
<body>
    <div>
        <div class="page-header"></div>
        <div class="page-body">
            <div class="menu">
                <a href="/ordered/">订单</a>
{#                这里href是一个路径,就和我们从前端怎么访问某个html的路径是一样的,也需要调用视图函数#}

                <a href="/shopping/">购物城</a>
            </div>
            <div class="context">
                订单
            </div>
        </div>
        <div class="page-footer"></div>
    </div>
</body>
</html>

  

购物车的html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .page-header{
            height: 50px;
            background-color: silver;
        }
        .page-body .menu{
            height: 400px;
            background-color: aqua;
            float: left;
            width: 20%;

        }
        .page-body .context{
            height: 400px;
            background-color: red;
            width: 80%;
            float: right;
        }
        .page-footer{
            height: 30px;
            background-color: yellow;
            clear: both;
        }
    </style>
</head>
<body>
    <div>
        <div class="page-header"></div>
        <div class="page-body">
            <div class="menu">
                <a href="/ordered/">订单</a>
                <a href="/shopping/">购物城</a>
            </div>
            <div class="context">
                购物车1
            </div>
        </div>
        <div class="page-footer"></div>
    </div>
</body>
</html>

  

然后我们写视图函数

 

 如果有上面的例子,我们就可以写一个基本的html文件,也就是父亲html文件

父亲的html的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
        }
        .page-header{
            height: 50px;
            background-color: silver;
        }
        .page-body .menu{
            height: 400px;
            background-color: aqua;
            float: left;
            width: 20%;

        }
        .page-body .context{
            height: 400px;
            background-color: red;
            width: 80%;
            float: right;
        }
        .page-footer{
            height: 30px;
            background-color: yellow;
            clear: both;
        }
    </style>
</head>
<body>
    <div>
        <div class="page-header"></div>
        <div class="page-body">
            <div class="menu">
                <a href="/ordered/">订单</a>
{#                这里href是一个路径,就和我们从前端怎么访问某个html的路径是一样的,也需要调用视图函数#}

                <a href="/shopping/">购物城</a>
            </div>
            {% block content %}
{#             content:就是我这个盒子的名称   #}
                xxxxxxxxxxxxxxxxx
            {% endblock %}
        </div>
        <div class="page-footer"></div>
    </div>
</body>
</html>

  

我们重点关注这一段

这里的意思 有一个盒子,名称是content,这个名字不能重复,这里的xxxxxxxxxxx的意思是如果在子html如果没有替换content这个盒子,就会默认显示xxxxxxxxxxxxxxx,如果有的话,就会显示为子html文件的内容

下面我们看下子html文件中的内容,首先需要引入父html文件,然后替换盒子名称为content的盒子,替换为的内容就中间包裹起来的标签内容

{% extends "base.html" %}

{% block content %}
<div class="context">
    订单1
</div>
{% endblock %}

  

如果在模板的的块中写上数据,那么如果其他html文件在继承模板的时候没有重xieblock中内容,则会继承模板中的数据

比如下面的例子,我在模板中定义了a标签

    <div class="body">
        <div class="left">
            <a href="/app1/test1/" title="订单">订单</a>
             <a href="/app1/test2/" title="商店">商店</a>
        </div>
        <div class="right">
            {% block context %}
                <h1>模板的数据</h1>
            {% endblock %}
        </div>
    </div>
    <div class="foot">
        <em><h1>底部</h1></em>
    </div>
</body>

  

我在订单页面没有重写context,而在商店重写了context

{% extends "base.html" %}

{% block context %}
    <em>
        <b>
            <h1>商店</h1>
        </b>
    </em>
{% endblock %}

  

{% extends "base.html" %}

{#{% block context %}#}
{#    <em>#}
{#        <b>#}
{#            <h1>订单</h1>#}
{#        </b>#}
{#    </em>#}
{#{% endblock %}#}

  

我们看页面的效果

订单页面

 

商店页面

 

posted on 2018-04-07 00:33  bainianminguo  阅读(223)  评论(0编辑  收藏  举报