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. 常见的生成全局唯一id有哪些？他们各有什么优缺点？

    分布式系统中全局唯一id是我们经常用到的,生成全局id方法由很多,我们选择的时候也比较纠结.每种方式都有各自的使用场景,如果我们熟悉各种方式及优缺点,使用的时候才会更方便.下面我们就一起来看一下常见的 ...

  2. tomcat7 开机自启动(转)

    转自 http://blog.csdn.net/rainyspring4540/article/details/51861079 环境:win7  tomcat7 开机自启动: 使用管理员打开命令提示 ...

  3. 从零开始的全栈工程师——js篇2.9（this详解）

    this 一.this是js的一个关键字 指定一个对象然后去替代他    只研究函数内的this 分两种 函数内的this和函数外的this1)函数内的this指向行为发生的主体2)函数外的this都 ...

  4. 【Java】Maven 常用命令

    Maven 常用命令 mvn compile 编译,生成target文件夹,里边有classes文件夹,存放.class文件 mvn test 执行测试 mvn package 打包,在targert ...

  5. 12个非常不错的javascript类库

    Javascript是一个解释性的编程语言.最初作为浏览器的一部份在浏览器中运行,可以和用户交互,并且控制浏览器,异步通讯,修改显示的document.在这篇文章中,我们收集了12款最新的Javasc ...

  6. ajax请求总是返回error的问题

    多半是因为返回值格式的问题,在后台返回的应与前台设定的值一直,不然就会进入error,会报404服务器错误,极有可能是后台返回的数据类型不对 public void exitSystem( HttpS ...

  7. cms-数据库设计

    业务相关的3张表 1.类型表: CREATE TABLE `t_arctype` (`id` int(11) NOT NULL AUTO_INCREMENT,//id`typeName` varcha ...

  8. COGS 201. [BYVoid S1] 埃雷萨拉斯的宝藏

    ★★   输入文件:eldrethalas.in   输出文件:eldrethalas.out   简单对比时间限制:1 s   内存限制:256 MB 问题描述 一万两千年前,精灵还是在艾萨拉女王的 ...

  9. Command Line Client（建库，建表）

    Enter password: ******Welcome to the MySQL monitor. Commands end with ; or \g.Your MySQL connection ...

  10. IOS UIActionSheet(底部 弹出框的使用)

    UIActionSheet *sheet = [[UIActionSheet alloc] initWithTitle:@"确定要注销?" delegate:self cancel ...