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, ...
随机推荐
- Unreal Engine 4（虚幻UE4）GameplayAbilities 插件入门教程（二）
我们接着学习.如果没有学习第一篇,请前往学习. 由于GameplayAbilities插件基本上没有资料(除了前面提供的那篇Dave的博文以外,再无资料,有迹象表明Dave是这个插件的开发者). 这个 ...
- Mybatis 接口绑定
MyBatis的接口绑定: 参考链接:http://blog.csdn.net/chris_mao/article/details/48836039 接口映射就是在IBatis中任意定义接口,然后把接 ...
- 解决“Can't bind to local 8630 for debugger”错误--查杀多余进程
Can't bind to local 8630 for debugger 表明本地8630端口被占用 1.Windows平台 在windows命令行窗口下执行: 1.查看所有的端口占用情况 C:\& ...
- 序列化 ,hashlib ,configparser ,logging ,collections模块
# 实例化 归一化 初始化 序列化 # 列表 元组 字符串# 字符串# .......得到一个字符串的结果 过程就叫序列化# 字典 / 列表 / 数字 /对象 -序列化->字符串# 为什么要序列 ...
- Java网络编程详解
内容: 1.网络通信协议 2.UDP与TCP 3.UDP通信 4.TCP通信 5.网络编程总结 1.网络通信协议 (1)基本概念 网络:由多台计算机以及外部设备连接起来的一个系统,我们称之为网络 通信 ...
- WGCNA 分析
https://www.jianshu.com/p/f80de3468c04 https://mp.weixin.qq.com/s/-DthUKY2RTY6vxtxapzLkw https://www ...
- uva-639-枚举
题意: 象棋里的車可以吃横竖的車,题目加了一个墙,用于阻断攻击,问4x4的棋盘最多可以放多少只車, 思路:枚举每一个点,2^16次方种情况 #include<stdio.h> #inclu ...
- 1.line (线)
1.横线 HTML代码: 横线(水平线) <hr/> <div class="row"> 横线(盒子上边框线) </div> CSS代码: .r ...
- LeaderF常用用法
常用: 搜索当前目录下的文件 :LeaderfFile <leader>f 搜索当前的Buffer :LeaderfBuffer <leader>b 搜索最近使用过的文件( s ...
- redhat 7安装CentOS 7 yum源
http://www.bubuko.com/infodetail-2004218.html http://www.bubuko.com/infodetail-2004218.html ******** ...