Django的模板继承
来看一个例子
我们有一个订单的页面和购物车的页面，比如下面的截图，我的购物车的页面和订单的页面只有圆圈中的截图的内容不一样
所以我们的订单的html页面和购物车的html业务的html几乎都是一致的
订单的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
}
.page-header{
height: 50px;
background-color: silver;
}
.page-body .menu{
height: 400px;
background-color: aqua;
float: left;
width: 20%; }
.page-body .context{
height: 400px;
background-color: red;
width: 80%;
float: right;
}
.page-footer{
height: 30px;
background-color: yellow;
clear: both;
}
</style>
</head>
<body>
<div>
<div class="page-header"></div>
<div class="page-body">
<div class="menu">
<a href="/ordered/">订单</a>
{# 这里href是一个路径，就和我们从前端怎么访问某个html的路径是一样的，也需要调用视图函数#} <a href="/shopping/">购物城</a>
</div>
<div class="context">
订单
</div>
</div>
<div class="page-footer"></div>
</div>
</body>
</html>
购物车的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.page-header{
height: 50px;
background-color: silver;
}
.page-body .menu{
height: 400px;
background-color: aqua;
float: left;
width: 20%; }
.page-body .context{
height: 400px;
background-color: red;
width: 80%;
float: right;
}
.page-footer{
height: 30px;
background-color: yellow;
clear: both;
}
</style>
</head>
<body>
<div>
<div class="page-header"></div>
<div class="page-body">
<div class="menu">
<a href="/ordered/">订单</a>
<a href="/shopping/">购物城</a>
</div>
<div class="context">
购物车1
</div>
</div>
<div class="page-footer"></div>
</div>
</body>
</html>
然后我们写视图函数
如果有上面的例子，我们就可以写一个基本的html文件，也就是父亲html文件
父亲的html的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
}
.page-header{
height: 50px;
background-color: silver;
}
.page-body .menu{
height: 400px;
background-color: aqua;
float: left;
width: 20%; }
.page-body .context{
height: 400px;
background-color: red;
width: 80%;
float: right;
}
.page-footer{
height: 30px;
background-color: yellow;
clear: both;
}
</style>
</head>
<body>
<div>
<div class="page-header"></div>
<div class="page-body">
<div class="menu">
<a href="/ordered/">订单</a>
{# 这里href是一个路径，就和我们从前端怎么访问某个html的路径是一样的，也需要调用视图函数#} <a href="/shopping/">购物城</a>
</div>
{% block content %}
{# content:就是我这个盒子的名称 #}
xxxxxxxxxxxxxxxxx
{% endblock %}
</div>
<div class="page-footer"></div>
</div>
</body>
</html>
我们重点关注这一段
这里的意思 有一个盒子，名称是content，这个名字不能重复，这里的xxxxxxxxxxx的意思是如果在子html如果没有替换content这个盒子，就会默认显示xxxxxxxxxxxxxxx，如果有的话，就会显示为子html文件的内容
下面我们看下子html文件中的内容，首先需要引入父html文件，然后替换盒子名称为content的盒子，替换为的内容就中间包裹起来的标签内容
{% extends "base.html" %}
{% block content %}
<div class="context">
订单1
</div>
{% endblock %}
如果在模板的的块中写上数据，那么如果其他html文件在继承模板的时候没有重xieblock中内容，则会继承模板中的数据
比如下面的例子，我在模板中定义了a标签
<div class="body">
<div class="left">
<a href="/app1/test1/" title="订单">订单</a>
<a href="/app1/test2/" title="商店">商店</a>
</div>
<div class="right">
{% block context %}
<h1>模板的数据</h1>
{% endblock %}
</div>
</div>
<div class="foot">
<em><h1>底部</h1></em>
</div>
</body>
我在订单页面没有重写context，而在商店重写了context
{% extends "base.html" %}
{% block context %}
<em>
<b>
<h1>商店</h1>
</b>
</em>
{% endblock %}
{% extends "base.html" %}
{#{% block context %}#}
{# <em>#}
{# <b>#}
{# <h1>订单</h1>#}
{# </b>#}
{# </em>#}
{#{% endblock %}#}
我们看页面的效果
订单页面
商店页面
Django的模板继承的更多相关文章
- Django框架----模板继承和静态文件配置
母板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- Django之模板继承
为了在Django模板配置中减少代码的冗余,需使用模板继承 1. 语法 {% block classinfo %} {% endblock} 2. 步骤 (1)创建一个base.html把需要显示的页 ...
- Django学习:模板继承和配置静态文件
一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...
- Django【第4篇】：Django之模板继承
jango框架之模板继承和静态文件配置 一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.htm ...
- django之模板继承以和模板导入
1,模板继承 一,模板继承 1.在template下面新建一个master.html的文件,当做母版. 2. 母版里需要被替代的部分,以block开始,以endblock结尾 {% block con ...
- Django框架(六) Django之模板继承
模版导入和继承 模版导入 一个页面只能继承一个模板,如何解决了?如何使用多个模板,或者引入其他页面 <% include "a.html" %> 可以引用多次 模板,i ...
- django，模板继承常用标签和规则
一.定义基础模板 在html内容中定义多个block块,block由子模板引用同名block块,来决定是否替换这些部分{% block title %}一些内容,这里可不填{% endblock %} ...
- django 前端模板继承显示model中使用choices的字段
比如model中的一个class Need class Need(models.Model): """ 任务 """ party_a=mod ...
- django html模板继承 {%block 标记名｝ ｛%endblock%｝
对于url文件 url(r'^tp1/', views.tp1) 对于views文件,跳转到tp1.html 同时将list列表传到前端 def tp1(request): list = [1, 2, ...
随机推荐
- 初次从eclipse转到intellij idea上的一些经验
如果出现:mvn 请使用 -source 7 或更高版本以启用 diamond 运算符 这种问题 pom.xml里 <build>标签里面 需要加入这么一段 <plugins> ...
- [UE4]添加机器人
跟玩家角色一样,机器人也是继承自“Character”,动画蓝图也是跟角色玩家的一样,区别是机器人要使用“AIController”来控制
- Jade简单教程
Express框架里内嵌了Jade模板引擎.正好项目里也要用到,本篇整理了下Jade的相关用法. 安装与执行 标签和属性 多行文本 变量 语句 Mixin 模板 注释 过滤器 安装与执行 安装很简单: ...
- 关于oracle数据库压力测试
今天接到需求,需要对oracle数据库进行压力测试,就这几个字的需求. 然后查看了以下软件: 1.Benchmark Factory是一款专业的服务器性能测试工具,专为数据库测试和可扩展性测量而设计, ...
- Python3 引入sqlite3时出现错误：ModuleNotFoundError: No module named '_sqlite3'
在Python3 中内置了SQLite3,但是在编译安装完之后执行: import sqlite3 出现错误: ModuleNotFoundError: No module named '_sqlit ...
- python+selenium+requests爬取我的博客粉丝的名称
爬取目标 1.本次代码是在python2上运行通过的,python3的最需改2行代码,用到其它python模块 selenium 2.53.6 +firefox 44 BeautifulSoup re ...
- activemq的学习
https://blog.csdn.net/csdn_kenneth/article/category/7352171/1
- 1.Redis的应用场景
转自:http://www.runoob.com/redis/redis-tutorial.html Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在 ...
- PHP图像 因其本身有错无法显示
昨天终于将客户的一个网站迁移至虚拟主机上,满怀希望的敲入网址.唰的一声,网站很轻松的被打开了. 心里那个高兴啊~~~ 咦,怎么产品图片都没有显示出来.一块块都是空白.敲入img src对应的地址,看看 ...
- delegate() 事件绑定 事件委托
定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适用于当前或未来 ...