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. 玩转Docker之常用API（四）

    原文地址:http://accjiyun.cn/wan-zhuan-dockerzhi-chang-yong-api-si/ 任何一个开发的平台都会向开发者开发API,以供开发者更加自由地使用平台所提 ...

  2. jQuery开发插件的两个方法 js 深浅拷贝

    1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法.由全局函数来调用, 主要是用来拓展个全局函数 2.jQuery.fn.extend(object);为jQu ...

  3. Consider everything deeply but still remain fearless.

    Consider everything deeply but still remain fearless.愿你能深思熟虑,但始终无所畏惧.

  4. Nobody gives away anything valuable for free.

    Nobody gives away anything valuable for free.没人会给你免费的午餐.

  5. 原生js添加类名，删除类名

    1.添加类名: document.getElementById("myDiv").classList.add('mystyle'); 2.删除类名: document.getEle ...

  6. vim 粘贴复制操作

    原文链接:http://www.cnblogs.com/lansh/archive/2010/08/19/1803378.html vi编辑器有3种模式:命令模式.输入模式.末行模式.掌握这三种模式十 ...

  7. AngularJS 整理学习

    参考博客:  https://blog.csdn.net/weixin_33178524/article/details/79179597 https://blog.csdn.net/qq_42128 ...

  8. 详细讲解：通过phpstudy 设置站点域名、站点域名管理

    我们在本地编程的时候,会遇到路径特别长的情况,这样子我们在url中的输入就会变得不方便而且容易报错,那么在phpstudy这个环境中,有一个很好的功能,就是“站点域名管理”,他能让我们的url网址大大 ...

  9. 从.net到java，从基础架构到解决方案。

    这一年,职业生涯中的最大变化,是从.net到java的直接跨越,是从平台架构到解决方案的不断完善. 砥砺前行 初出茅庐,天下无敌.再学三年,寸步难行.很多时候不是别人太强,真的是自己太弱,却不自知. ...

  10. python setup.py install 报错

    python setup.py install 报错信息 [root@VM_25_28_centos psutil-2.0.0]# python setup.py install running in ...