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. 一张图掌握移动Web前端所有技术（大前端、工程化、预编译、自动化）

    你要的移动web前端都在这里! 大前端方向:移动Web前端.Native客户端.Node.js. 大前端框架:React.Vue.js.Koa  跨终端技术:HTML 5.CSS 3.JavaScri ...

  2. stm8 全局变量定义 声明

    1.ST Visual Develop 开发环境下.h文件里面不能定义变量,要把变量定义在.C文件里面,然后在.H文件里面声明即可.补充:今天突然发现还有一种情况,变量在一个.h文件里定义后,在另外的 ...

  3. 关于在C++中调用system函数

    先看看下面的这一段程序: #include <iostream> #include <cstdlib> int main(int argc, char* argv[]) { s ...

  4. Oracle添加自增长字段方法步骤

    第一步:创建自增长序列 CREATE SEQUENCE ZH_ALARM_INFO_SEQ--自动增长列 INCREMENT BY 1 -- 每次加几个 START WITH 1 -- 从1开始计数 ...

  5. html5 app开发实例 Ajax跨域访问C# webservices服务

    通过几天的研究效果,如果在vs2010工具上通过webservice还是比较简单的,毕竟是一个项目. 如果您想通过HTML5 做出来的移动APP去访问c#做出来的webservice,那么就没那么简单 ...

  6. nrm—源管理工具

    全局安装 npm install -g nrm 查看可选源 nrm ls 其中,带*的是当前使用的源,上面的输出表明当前源是hiknpm 切换源 nrm use taobao 新增源 nrm add ...

  7. 在MVC中加载view(点开链接)的方式

    主要有: Html.ActionLink Html.RenderPartial Html.RenderAction Html.Partial AJAX.ActionLink load 浏览器对象模型 ...

  8. 国外常用代理IP对比【仅供参考】

    国外常用代理IP对比[仅供参考]http://www.it588.cn/vmware/2019-03-22/547.html

  9. Linux环境下使用xampp配置php开发环境

    XAMPP (Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包.这个软件包原来的名字是LAMPP,但是为 了避免误 解,最新的几个版本就改名为 XAMPP 了.它可以在Win ...

  10. Bootstrap历练实例：响应式标签页

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...