Django模版引擎中最强大也是最复杂的部分就是模版继承了。模版继承可以让您创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的 block。

模板继承:

1.    新建muban.html模板文件,在形影需要替换的不同位置加上不同名称的block标签

{% block content %}

模板内容

{% endblock %}或者{% endblock content %}

2.    在新的html文件开头写:

{% extends "muban.html" %}

3.    接下来重写模板中的block标签内容:

注意:每个block标签不能同名,可以有多个(一般css/js/内容都可以有)

{% block content %}

……

{% endblock %}或者{% endblock content %}

4.    要想继承保留模板block中的内容,在重写时加上

{{ block.super }}

模板继承演示:

  muban.html  

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {margin: 0; padding: 0; }
.c1, .nav {margin: 0 auto; width: 1200px; background-color: #d6d6d6; color: white; }
.fixed:after {content: "";display: block; clear: both; }
.navleft {float: left; }
.navright {float: right; }
ul, li {list-style: none; display: inline; }
.contentleft {float: left; width: 300px; background-color: red; height: 100px; }
.contentright {float: left; width: 900px; height: 100px; background-color: green; }
.c2 {margin: auto auto; text-align: center;vertical-align: middle; }
</style>
<title>模板继承测试</title>
</head>
<body>
<div class="c1">
<div class="nav fixed">
<div class="navleft ">
<ul>
<li>古诗</li>
<li>绝句</li>
<li>诗经</li>
</ul>
</div>
<div class="navright">
<ul>
<li>登录</li>
<li>注册</li>
</ul>
</div>
</div> <div class="content fixed">
<div class="contentleft">
<div class="c2">
<a href="http://127.0.0.1:8888/muban/">简介</a><br>
<a href="http://127.0.0.1:8888/muban_1/">古诗1</a><br>
<a href="http://127.0.0.1:8888/muban_2/">古诗2</a></div>
</div>
<div class="contentright">
<div class="c2">
{% block content %}
模板内容---简介
{% endblock %}
</div>
</div>
</div> </div>
</body>
</html>

  muban_1.thml

 {% extends "muban.html" %}
{% block content %}
<h2>You never fail just when you give up!</h2>
{% endblock %}

  muban_2.thml

 {% extends "muban.html" %}
{% block content %}
{{ block.super }}<!--继承保留模板对应标签的内容-->
<h2>Do whatever you want and smile veryday!</h2>
{% endblock %}

views.py

 def muban(request):
return render(request,"muban.html")
def muban_1(request):
return render(request,"muban_1.html")
def muban_2(request):
return render(request,"muban_2.html")

  渲染效果

  

  

  

Django模板之模板继承(extends/block)的更多相关文章

  1. Django---MTV和MVC的了解,Django的模版语言变量和逻辑,常见的模板语言过滤器,自定义过滤器,CSRF了解,Django的母版(继承extends,块block,组件include,静态文件的加载load static),自定义simple_tag和inclusion_tag

    Django---MTV和MVC的了解,Django的模版语言变量和逻辑,常见的模板语言过滤器,自定义过滤器,CSRF了解,Django的母版(继承extends,块block,组件include,静 ...

  2. django学习-8.django模板继承(block和extends)

    1.前言 django模板继承的作用:模板可以用继承的方式来实现复用,减少冗余内容. 一般来说,一个网站里一般存在多个网页的头部和尾部内容都是一致的,我们就可以通过模板继承来实现复用. 父模板用于放置 ...

  3. django基础 -- 4. 模板语言 过滤器 模板继承 FBV 和CBV 装饰器 组件

    一.语法 两种特殊符号(语法): {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 二.变量 1. 可直接用  {{ 变量名 }} (可调用字符串, 数字 ,列表,字典,对象等) ...

  4. Django项目中模板标签及模板的继承与引用【网站中快速布置广告】

    Django项目中模板标签及模板的继承与引用 常见模板标签 {% static %} {% for x in range(x) %}{% endfor %} 循环的序号{% forloop %} 循环 ...

  5. Django——4 模板标签 模板的继承与引用

    Django 模板标签 常用标签 模板的继承与引用 模板标签 标签在渲染的过程中提供任意的逻辑 标签语法: 由%}和 {% 来定义的,例如:{%tag%} {%endtag%} 这个定义是刻意模糊的. ...

  6. Django入门--模板标签、继承与引用

    一.模板标签 Django模板引擎提供的可以在模板中进行的各种逻辑操作,是函数调用的一种特殊形式,如循环.判断等功能,期语法规则为: {% tag %} content {% tag 参数1 参数2 ...

  7. Django学习手册 - 模板继承与导入

    核心: PS:一个页面只能继承一个模板. 前置: 配置url. 配置views 关键字: 1. {% extends "index模板.html" %} 声明继承于哪个模板 ,关联 ...

  8. Django进阶Template篇002 - 模板包含和继承

    包含 {% include %} 允许在模板中包含其他模板的内容. {% include "foo/bar.html" %} {% include template_name %} ...

  9. Django day07 (一) 模板的导入 母板的继承 静态文件配置

    一:模板的导入 -写一个模板 {% include '模板的名字' %} 二:母板的继承 -写一个母版(可以留多个盒子) {% block 名字 %} / {% endblock %} 三:静态文件配 ...

  10. python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

    python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...

随机推荐

  1. 20199326《Linux内核原理与分析》第十一周作业

    Shellsock攻击实验 实验背景 2014年9月24日,Bash中发现了一个严重漏洞shellshock,该漏洞可用于许多系统,并且既可以远程也可以在本地触发. Shellshock,又称Bash ...

  2. python学习08排序算法举例

    '''''''''排序算法:前提是所有数按照从小到大的顺序排列.1.冒泡算法将第一数与第二个数比较大小,如果第一个数比第二个数大,则沉底(交换位置,使大数在小数后面,这个过程类似于大泡沉底的过程) ' ...

  3. jstat命令查看JVM 的GC状态

    转载于   https://www.cnblogs.com/alter888/p/10407952.html jstat命令可以查看堆内存各部分的使用量,以及加载类的数量.命令的格式如下: jstat ...

  4. vue-cli创建的webpack工程中引用ExtractTextPlugin导致css背景图设置无效的解决方法

    当我们用vue-cli创建项目后,如果在我们的template模板文件中的css样式设置中,有设置了background-image的属性,并且url值传入的是相对路径,那么当我们在打包生产代码时,w ...

  5. 前线观察 | AWS re:Invent 2018见闻实录

    作为云计算行业科技盛会,AWS:reInvent大会近年来越来越受关注,其中尤其被关注的分别是CEO Andy Jassy和CTO Werner Vogels的Keynote演讲.2018年11月28 ...

  6. [20170616]recover copy of datafile 6.txt

    [20170616]no copy of datafile 6 found to recover.txt --//最近几天一直被这个问题纠缠,我虽然不知道问题在哪来,还是找到简单的解决方法,做1个记录 ...

  7. windows中配置安装mysql数据库

    MySql 是一种免费的关系型数据库,相较于 MsSqlServer 和 Oracle 比较轻量化,安装也很简单,而且免费不需要的版权费用,个人认为一般的小项目采用还是比较合适的,当然也有部分数据量很 ...

  8. MYSQL数据库配置安装、重置密码以及工具连接

    一.下载mysql安装包 下载地址:https://dev.mysql.com/downloads/mysql/ 下载解压好之后,就是一个文件夹的形式. 二.配置环境变量 环境变量的配置,就是把MyS ...

  9. turtle库应用实例2-六芒星的绘制

    六芒星的绘制 ‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪ ...

  10. M - 昂贵的聘礼 最短路 dij

    http://poj.org/problem?id=1062 这个题目有一点点特别,因为数据很小也可以用Floyd跑,但是个人比较钟爱dij. 这个dij是怎么走的呢,首先就是普通的建图,然后就是带上 ...