1.模板继承

  • 模板继承可以减少页面内容的重复定义，实现页面内容的重用
  • 典型应用：网站的头部、尾部是一样的，这些内容可以定义在父模板中，子模板不需要重复定义
  • block标签：在父模板中预留区域，在子模板中填充
  • extends继承：继承，写在模板文件的第一行
  • 定义父模板base.html
{ %block block_name%}

这里可以定义默认值

如果不定义默认值，则表示空字符串

{ %endblock%}
  • 定义子模板index.html
{ % extends "base.html" %}
  • 在子模板中使用block填充预留区域
{ %block block_name%}

实际填充内容

{ %endblock%}

　　说明

  • 如果在模版中使用extends标签，它必须是模版中的第一个标签
  • 不能在一个模版中定义多个相同名字的block标签
  • 子模版不必定义全部父模版中的blocks，如果子模版没有定义block，则使用了父模版中的默认值
  • 如果发现在模板中大量的复制内容，那就应该把内容移动到父模板中
  • 使用可以获取父模板中block的内容
  • 为了更好的可读性，可以给endblock标签一个名字
{ % block block_name %}

区域内容

{ % endblock block_name %}

2.三层继承结构

  • 三层继承结构使代码得到最大程度的复用，并且使得添加内容更加简单
  • 如下图为常见的电商页面

　　（1）创建根级模板

  • 名称为“base.html”
  • 存放整个站点共用的内容
<!DOCTYPE html>

<html>

<head>

    <title>{%block title%}{%endblock%} 水果超市</title>

</head>

<body>

top--{{logo}}

<hr/>

{%block left%}{%endblock%}

{%block content%}{%endblock%}

<hr/>

bottom

</body>

</html>

　　（2）创建分支模版

  • 继承自base.html
  • 名为“base_*.html”
  • 定义特定分支共用的内容
  • 定义base_goods.html
{%extends 'temtest/base.html'%}

{%block title%}商品{%endblock%}

{%block left%}

<h1>goods left</h1>

{%endblock%}
  • 定义base_user.html
{%extends 'temtest/base.html'%}

{%block title%}用户中心{%endblock%}

{%block left%}

<font color='blue'>user left</font>

{%endblock%}
  • 定义index.html，继承自base.html，不需要写left块
{%extends 'temtest/base.html'%}

{%block content%}

首页内容

{%endblock content%}

　　（3）为具体页面创建模板，继承自分支模板

  • 定义商品列表页goodslist.html
{%extends 'temtest/base_goods.html'%}

{%block content%}

商品正文列表

{%endblock content%}
  • 定义用户密码页userpwd.html
{%extends 'temtest/base_user.html'%}

{%block content%}

用户密码修改

{%endblock content%}

　　（4）视图调用具体页面，并传递模板中需要的数据

  • 首页视图index
logo='welcome to itcast'

def index(request):

    return render(request, 'temtest/index.html', {'logo': logo})
  • 商品列表视图goodslist
def goodslist(request):

    return render(request, 'temtest/goodslist.html', {'logo': logo})
  • 用户密码视图userpwd
def userpwd(request):

    return render(request, 'temtest/userpwd.html', {'logo': logo})

5.配置url

from django.conf.urls import url

from . import views

urlpatterns = [

    url(r'^$', views.index, name='index'),

    url(r'^list/$', views.goodslist, name='list'),

    url(r'^pwd/$', views.userpwd, name='pwd'),

]

3.实例

　　（1）隔代继承

　　（2）隔代传参数

4 Template层 -模板继承的更多相关文章

  1. tp框架---View视图层---模板继承（举例说明）

    当我们做动态页面时,我们会发现一个网站的头部和尾部是相同的,那么我们如何用tp框架来做模板呢 ? 先看一下注意事项: (1)每个区块由<block></block>标签组成 ( ...

  2. Django——模板层(template)（模板语法、自定义模板过滤器及标签、模板继承）

    前言:当我们想在页面上给客户端返回一个当前时间,一些初学者可能会很自然的想到用占位符,字符串拼接来达到我们想要的效果,但是这样做会有一个问题,HTML被直接硬编码在 Python代码之中. 1 2 3 ...

  3. python 全栈开发，Day70(模板自定义标签和过滤器,模板继承 (extend),Django的模型层-ORM简介)

    昨日内容回顾 视图函数: request对象 request.path 请求路径 request.GET GET请求数据 QueryDict {} request.POST POST请求数据 Quer ...

  4. Django基础(2)--模板自定义标签和过滤器,模板继承 (extend),Django的模型层-ORM简介

    没整理完 昨日回顾: 视图函数: request对象 request.path 请求路径 request.GET GET请求数据 QueryDict {} request.POST POST请求数据 ...

  5. Django模板自定义标签和过滤器，模板继承（extend），Django的模型层

    上回精彩回顾 视图函数: request对象 request.path 请求路径 request.GET GET请求数据 QueryDict {} request.POST POST请求数据 Quer ...

  6. 模板(template)包含与继承

    Django 模板查找机制: Django 查找模板的过程是在每个 app 的 templates 文件夹中找(而不只是当前 app 中的代码只在当前的 app 的 templates 文件夹中找). ...

  7. 4 Template层 -定义模板

    1.模板介绍 作为Web框架,Django提供了模板,可以很便利的动态生成HTML 模版系统致力于表达外观,而不是程序逻辑 模板的设计实现了业务逻辑(view)与显示内容(template)的分离,一 ...

  8. Django框架（七）-- 模板层：模板导入、模板继承、静态文件

    一.模板导入 要复用一个组件,可以将该组件写在一个文件中,在使用的时候导入即可 在模板中使用 1.语法 {% include '模板名字' %} 2.使用 ad.html页面 <div clas ...

  9. Django框架（八）—— 模板层：模板导入、模板继承、静态文件

    目录 模板导入.继承.静态文件 一.模板导入 1.语法 2.使用 二.模板的继承 1.使用模板的继承 2.强调(注意点) 三.静态文件 1.在配置文件settings中配置过静态文件 2.导入使用静态 ...

随机推荐

  1. 面向对象设计与构造：oo课程总结

    面向对象设计与构造:OO课程总结 第一部分:UML单元架构设计 第一次作业 UML图 MyUmlInteraction类实现接口方法,ClassUnit和InterfaceUnit管理UML图中的类和 ...

  2. 移植mavlink协议到STM32详细教程

    1准备材料, 首先准备一个带串口的stm32程序(这里选用整点原子的官方串口例程这里自己去找不讲)作者:恒久力行 QQ:624668529,然后去mavlink官网下载mavlink源码,这里重点讲解 ...

  3. while循环,break和continue,运算符,格式化输出

    一丶while循环 while条件: 代码块(循环体) #数数 打印1-100 count = 1 while count <= 100: print(count) count += 1 执行顺 ...

  4. 关于IE和Firefox兼容性问题及解决办法

    1.//window.eventIE:有window.event对象FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMove(e ...

  5. angular 学习笔记（1） 使用angular完整写法

    视图部分: <div ng-app="myapp"> <div ng-controller="myctrl"> <p>{{n ...

  6. iOS编程规范(整理)

    一.文档结构管理 1.建立Libraries文件夹,所有第三方库放入其中. 2.建立Utilities文件夹,自已封装的类放入其中. 3.建立Constants.h头文件,所有的常量定义于其中.Con ...

  7. Hadoop 分片、分组与排序

    首先需要明确的是,hadoop里的key一定要是可排序的,要么key自身实现了WritableComparator接口,要么有一个排序类可以对key进行排序.如果key本身不实现WritableCom ...

  8. UVA 340 Master-Mind Hints 猜密码游戏（水）

    题意: 给一串密码(第一行),接着再给你很多行猜测,针对每行猜测,输出两个数字,分表代表:同一列上匹配的个数,不同列上匹配的个数.注:匹配指的是一次,一旦配对,不能再与其他配对. 思路: 每接受一行猜 ...

  9. innerHTML和outerHTML的区别

    一.区别:1)innerHTML: 从对象的起始位置到终止位置的全部内容,不包括Html标签.2)outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身. 二.例子: &l ...

  10. slice 与 substring

    Array数组:slice() slice() : 截取 Array 的部分元素,然后返回一个新的Array. var arr = ['a', ' b', 'c', 'd', 'e', 'f', 'g ...