来看一个例子

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

所以我们的订单的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 %}#}

　　

我们看页面的效果

订单页面

商店页面

Django的模板继承的更多相关文章

  1. Django框架----模板继承和静态文件配置

    母板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  2. Django之模板继承

    为了在Django模板配置中减少代码的冗余,需使用模板继承 1. 语法 {% block classinfo %} {% endblock} 2. 步骤 (1)创建一个base.html把需要显示的页 ...

  3. Django学习:模板继承和配置静态文件

    一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...

  4. Django【第4篇】：Django之模板继承

    jango框架之模板继承和静态文件配置 一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.htm ...

  5. django之模板继承以和模板导入

    1,模板继承 一,模板继承 1.在template下面新建一个master.html的文件,当做母版. 2. 母版里需要被替代的部分,以block开始,以endblock结尾 {% block con ...

  6. Django框架(六) Django之模板继承

    模版导入和继承 模版导入 一个页面只能继承一个模板,如何解决了?如何使用多个模板,或者引入其他页面 <% include "a.html" %> 可以引用多次 模板,i ...

  7. django，模板继承常用标签和规则

    一.定义基础模板 在html内容中定义多个block块,block由子模板引用同名block块,来决定是否替换这些部分{% block title %}一些内容,这里可不填{% endblock %} ...

  8. django 前端模板继承显示model中使用choices的字段

    比如model中的一个class Need class Need(models.Model): """ 任务 """ party_a=mod ...

  9. django html模板继承 {%block 标记名｝ ｛%endblock%｝

    对于url文件 url(r'^tp1/', views.tp1) 对于views文件,跳转到tp1.html 同时将list列表传到前端 def tp1(request): list = [1, 2, ...

随机推荐

  1. http接口测试工具——RESTClient

    摘要: RESTClient是用java Swing编写的基于http协议的接口测试工具,工具比较灵巧,便于做接口的调试,源码在官网上可以下到,感兴趣的可以研究一下 WizTools.org REST ...

  2. Linux-mail设置

    邮箱文件设置 #配置发邮件 /etc/mail.rc中追加 set bsdcompat set from=c4kaichen@163.com .com set smtp-auth-user=c4kai ...

  3. Oracle跨库复制表结构

    1.首先建立远程连接 create public database link LINK_SJPSconnect to system identified by manager using '(DESC ...

  4. Chrome 鼠标左键-新标签打开

    改chrome设置 1.打开google搜索主页2.打开右下角Settings选项->Search Settings3.找到where results open选项4.把Open each se ...

  5. mysql更新(八) 可视化工具Navicat的使用 索引

    17-索引   一.索引的介绍 数据库中专门用于帮助用户快速查找数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置吗,然后直接获取. 二 .索引的作用 约束和加速查 ...

  6. faker之python构造虚拟数据

    python中可以使用faker来制造一些虚拟数据 首选安装faker pip install Faker 老版的叫法是faker-factory,但是已不适用 使用faker.Factory.cre ...

  7. JavaScript字符串练习

    题目: 预备代码: // 自定义输出 var log = function () { console.log.apply(this, arguments); }; // ====== // 测试 // ...

  8. Python之模块(一)

    模块 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护.为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少 ...

  9. archlinux上安装sublime text

    因为sublime text不是开源所以在官方库没有收纳,但是在archlinuxcn上面有. #vim /etc/pacman.conf 在末尾添加: [archlinuxcn] SigLevel ...

  10. JAVA WebSocKet ( 实现简单的前后端即时通信 )

    1, 前端代码 HTML5 部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...