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, ...
随机推荐
- Fragment之介绍(转)
http://www.cnblogs.com/plokmju/p/3239265.html 前言 开门见山开篇名义,本篇博客将讲解一下Android中Fragment的内容,必要的地方会提供相应的演示 ...
- [UE4]Axis Mappings轴映射和动作映射Action Mappings的区别
这里添加的映射只能在“玩家角色(Character)”的事件蓝图中使用. 从它们设置和蓝图使用界面就能看出他们的区别
- Nginx的启动、停止、重启
启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root@LinuxServer sbin]# /usr/local/nginx/sbin/nginx -c /us ...
- Windows 8的用户模式Shim Engine小探及利用
转载: https://bbs.pediy.com/thread-175483.htm Windows Shim Engine,即Windows 兼容性模式实现引擎,在exe文件的属性对话框中有一个兼 ...
- bravado哺乳内衣适合试穿体验，分享给需要买哺乳内衣的妈妈们。
看来看去还是觉得在美德乐天猫旗舰店(www.bravadobravado.com)购买最保险. 这款内衣穿起来非常舒服,感觉一点都不勒,而且面料也很透气,我生宝宝之前怀孕的时候穿80C,这个本来一开始 ...
- 运行inetmgr提示“找不到文件”无法打开IIS管理器的解决办法
运行inetmgr提示“找不到文件”无法打开IIS管理器的解决办法 不知道什么时候开始运行inetmgr就提示找不到文件了,本以为是IIS坏了,这两天发现IIS服务还是可以运行的,只是运行inetmg ...
- File处理
package com.cfets.ts.u.shchgateway.util; import java.io.BufferedInputStream; import java.io.Buffered ...
- 《GPU高性能编程CUDA实战》第十一章 多GPU系统的CUDA C
▶ 本章介绍了多设备胸膛下的 CUDA 编程,以及一些特殊存储类型对计算速度的影响 ● 显存和零拷贝内存的拷贝与计算对比 #include <stdio.h> #include " ...
- Python函数名为参数
1.定义两个函数,求和函数和最大函数 def add(x, y): return x + y def maxnum(x, y): return x if x > y else y lst= [2 ...
- spring data jpa 注解
@Data 注解引出的 lombok 小辣椒 今天在看代码的时候, 看到了这个注解, 之前都没有见过, 所以就查了下, 发现还是个不错的注解, 可以让代码更加简洁. 这个注解来自于 lombok, ...