来看一个例子

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

所以我们的订单的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. appium 3-31603调试分析方法

    1.Appium Log 清晰记录了所有的请求和结果 @Test public void testDebug() throws InterruptedException,IOException{ Mo ...

  2. Tcprstat测试mysql响应时间

    Tcprstat测试mysql响应时间 一.tcprstat工具安装与使用 tcprstat 是一个基于 pcap 提取 TCP 应答时间信息的工具,通过监控网络传输来统计分析请求的响应时间. 使用方 ...

  3. STL容器能力一览表和各个容器操作函数异常保证

    STL容器能力一览表 Vector Deque List Set Multiset map Multimap 典型内部 结构 dynamic array Array of arrays Doubly ...

  4. Solr学习总结（六）solr的函数查询Function Queries

    摘要: 函数查询允许你使用一个或多个数字字段的真实值生成一个相关性分数,函数查询在standard,DisMax,eDisMax下都能使用. 查询函数可以是常量,字段或者其他函数的组合.使用函数可以影 ...

  5. nodejs——压缩文件_archiver

    工作需要,由于html无法访问并下载带有中文的路径,例子:“127.0.0.1::8088/files/第一张图片.jpg”,所以想到了先将原图片压缩并命名为不带中文的文件名,下载后用户自行解压缩的方 ...

  6. png，jpg，gif这些图片格式解释一下，分别什么时候用，webp呢

    gif图形交换格式,索引颜色格式,颜色少的情况下,产生的文件极小,支持背景透明,动画,图形渐进,无损压缩(适合线条,图标等),缺点只有256种颜色 jpg支持上百万种颜色,有损压缩,压缩比可达180: ...

  7. Wechall 部分WP

    前言: 开始打CTF,掌握一些新的姿势与知识. 这里我选择的平台是Wechall.这里从简单到难 WP部分: Training: Get SourcedAnswer: 查看网页源代码 Training ...

  8. python3中的mysql数据库操作

    软硬件环境 OS X EI Capitan Python 3.5.1 mysql 5.6 前言 在开发中经常涉及到数据库的使用,而python对于数据库也有多种解决方法.本文以python3中的mys ...

  9. Spring MVC 学习笔记1 - First Helloworld by Eclipse【& - java web 开发Tips集锦】

    Spring MVC 学习笔记1 - First Helloworld by Eclipse reference:http://www.gontu.org 1. 下载 Spring freamwork ...

  10. 31. Next Permutation + 46. Permutations + 47. Permutations II + 60. Permutation Sequence

    ▶ 问题:字典序生成有关的问题. ▶ 31. 由当前序列生成字典序里的下一个序列. ● 初版代码,19 ms class Solution { public: void nextPermutation ...