来看一个例子

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

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

订单的html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0px;
  9.         }
  10.         .page-header{
  11.             height: 50px;
  12.             background-color: silver;
  13.         }
  14.         .page-body .menu{
  15.             height: 400px;
  16.             background-color: aqua;
  17.             float: left;
  18.             width: 20%;
  19.  
  20.         }
  21.         .page-body .context{
  22.             height: 400px;
  23.             background-color: red;
  24.             width: 80%;
  25.             float: right;
  26.         }
  27.         .page-footer{
  28.             height: 30px;
  29.             background-color: yellow;
  30.             clear: both;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div>
  36.         <div class="page-header"></div>
  37.         <div class="page-body">
  38.             <div class="menu">
  39.                 <a href="/ordered/">订单</a>
  40. {#                这里href是一个路径，就和我们从前端怎么访问某个html的路径是一样的，也需要调用视图函数#}
  41.  
  42.                 <a href="/shopping/">购物城</a>
  43.             </div>
  44.             <div class="context">
  45.                 订单
  46.             </div>
  47.         </div>
  48.         <div class="page-footer"></div>
  49.     </div>
  50. </body>
  51. </html>

　　

购物车的html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .page-header{
  8.             height: 50px;
  9.             background-color: silver;
  10.         }
  11.         .page-body .menu{
  12.             height: 400px;
  13.             background-color: aqua;
  14.             float: left;
  15.             width: 20%;
  16.  
  17.         }
  18.         .page-body .context{
  19.             height: 400px;
  20.             background-color: red;
  21.             width: 80%;
  22.             float: right;
  23.         }
  24.         .page-footer{
  25.             height: 30px;
  26.             background-color: yellow;
  27.             clear: both;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div>
  33.         <div class="page-header"></div>
  34.         <div class="page-body">
  35.             <div class="menu">
  36.                 <a href="/ordered/">订单</a>
  37.                 <a href="/shopping/">购物城</a>
  38.             </div>
  39.             <div class="context">
  40.                 购物车1
  41.             </div>
  42.         </div>
  43.         <div class="page-footer"></div>
  44.     </div>
  45. </body>
  46. </html>

　　

然后我们写视图函数

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

父亲的html的代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0px;
  9.         }
  10.         .page-header{
  11.             height: 50px;
  12.             background-color: silver;
  13.         }
  14.         .page-body .menu{
  15.             height: 400px;
  16.             background-color: aqua;
  17.             float: left;
  18.             width: 20%;
  19.  
  20.         }
  21.         .page-body .context{
  22.             height: 400px;
  23.             background-color: red;
  24.             width: 80%;
  25.             float: right;
  26.         }
  27.         .page-footer{
  28.             height: 30px;
  29.             background-color: yellow;
  30.             clear: both;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div>
  36.         <div class="page-header"></div>
  37.         <div class="page-body">
  38.             <div class="menu">
  39.                 <a href="/ordered/">订单</a>
  40. {#                这里href是一个路径，就和我们从前端怎么访问某个html的路径是一样的，也需要调用视图函数#}
  41.  
  42.                 <a href="/shopping/">购物城</a>
  43.             </div>
  44.             {% block content %}
  45. {#             content:就是我这个盒子的名称   #}
  46.                 xxxxxxxxxxxxxxxxx
  47.             {% endblock %}
  48.         </div>
  49.         <div class="page-footer"></div>
  50.     </div>
  51. </body>
  52. </html>

　　

我们重点关注这一段

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

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

  1. {% extends "base.html" %}
  2.  
  3. {% block content %}
  4. <div class="context">
  5.     订单1
  6. </div>
  7. {% endblock %}

　　

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

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

  1.     <div class="body">
  2.         <div class="left">
  3.             <a href="/app1/test1/" title="订单">订单</a>
  4.              <a href="/app1/test2/" title="商店">商店</a>
  5.         </div>
  6.         <div class="right">
  7.             {% block context %}
  8.                 <h1>模板的数据</h1>
  9.             {% endblock %}
  10.         </div>
  11.     </div>
  12.     <div class="foot">
  13.         <em><h1>底部</h1></em>
  14.     </div>
  15. </body>

　　

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

  1. {% extends "base.html" %}
  2.  
  3. {% block context %}
  4.     <em>
  5.         <b>
  6.             <h1>商店</h1>
  7.         </b>
  8.     </em>
  9. {% endblock %}

　　

  1. {% extends "base.html" %}
  2.  
  3. {#{% block context %}#}
  4. {#    <em>#}
  5. {#        <b>#}
  6. {#            <h1>订单</h1>#}
  7. {#        </b>#}
  8. {#    </em>#}
  9. {#{% 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. REST-assured 3发送图片

    上传图片,需要media_id,从上传临时素材获取:https://work.weixin.qq.com/api/doc#10112 https://qyapi.weixin.qq.com/cgi-b ...

  2. 设置redis 密码

    redis配置密码 1.通过配置文件进行配置 yum方式安装的redis配置文件通常在/etc/redis.conf中,打开配置文件找到 [plain] view plain copy require ...

  3. latex 入门及使用

    latex 入门及使用 LaTeX新人教程,30分钟从完全陌生到基本入门 >> vim test.tex \documentclass[11pt,twoside,a4paper]{arti ...

  4. JavaScript中的坑

    内容:关于JavaScript中的一些蛋疼的问题以及面试笔试中常见的一些坑爹套路总结 此部分内容持续总结完善中... 1.undefined和null的区别 null: Null类型,代表空值,代表一 ...

  5. VS2015+Opencv半永久配置

    电脑W7 64位+VS2015+opencv3.0 刚开始学习opeencv很麻烦,配置的问题都弄了好久,一旦重装又出现很多问题,在网上看了一个论坛说的永久配置,特意记录一下! 第一步:下载openc ...

  6. jQuery ajax - serializeArray() 方法

    定义和用法 serializeArray() 方法通过序列化表单值来创建对象数组(名称和值). 您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身. ...

  7. 比较完整的URL验证

    转自:http://wuchaorang.2008.blog.163.com/blog/static/4889185220135279223253/ function IsURL(str_url){v ...

  8. 2. 修改myeclipse默认用户和时间

    方法一:将 @author 属性写死 . 通过菜单 Window->Preference 打开参数设置面板,然后选择: 1.Java -> Code Style -> Code Te ...

  9. PHP中间件--ICE

    ICE(Internet Communications Engine)是Zeroc提供的一款高性能的中间件.使用ICE能使得php(或c++,java,python)与java,c++,.net,py ...

  10. vi和vim的三种模式

    1.一般模式 用vi 或vim 命令 ——>一般模式 2. 插入模式 i,o,a,r 及其各自大写 ——>插入模式 一般用 i 3.命令行模式 用命令来完成 读取,存盘,替换,离开vim ...