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 %}#}

我们看页面的效果

订单页面

商店页面

转载于:https://www.cnblogs.com/bainianminguo/p/8729579.html

Django的模板继承相关推荐

django html 模板继承,Django模板的继承
模板的继承模板里写入{%block %}开头,{% endblock %}结尾字段,代表可以被继承以下是dd.html Title h1{ color: blue; } {% block name ...
Flask后端笔记（三）Jinja2模板、过滤器、表单、宏、模板继承、包含
Flask后端笔记 Jinja2模板基本流程变量过滤器字符串过滤器支持链式使用过滤器列表过滤器自定义过滤器表单不使用Flask-WTF扩展时,表单需要自己处理使用Flask-WTF ...
Django 模板继承4.2
模板继承模板继承可以减少页面内容的重复定义,实现页面内容的重用典型应用:网站的头部.尾部是一样的,这些内容可以定义在父模板中,子模板不需要重复定义 block标签:在父模板中预留区域,在子模板中填 ...
Django模板继承
继承这个概念在很多语言中都有,主要是子类从父类继承一些属性和函数,当然子类也可以重写父类函数的一些功能等等.在Django也有类似功能,这里的继承是指子类继承了父类的"界面布局" ...
Django从理论到实战(part23)--模板继承
学习笔记,仅供参考参考自:Django打造大型企业官网–Huang Y: 本系列Blog以应用为主,理论基础部分我在后端专栏的Django系列博客已经写过了,如果有些需要补充的知识点,我会在这个系列 ...
Python框架篇之Django（Template模版：标签tag、自定义filter、extend模板继承）
文章目录一.标签的使用(tag) 二.自定义filter和simple_tag 三.extend模板继承一.标签的使用(tag) 1.语法格式:{% tags %} 2.提供的几种标签 {% if ...
Django模板自定义标签和过滤器，模板继承（extend），Django的模型层
上回精彩回顾视图函数:request对象request.path 请求路径request.GET GET请求数据 QueryDict {}request.POST POST请求数据 QueryDic ...
html静态模板继承,Django框架（七）-- 模板层：模板导入、模板继承、静态文件...
一.模板导入要复用一个组件,可以将该组件写在一个文件中,在使用的时候导入即可在模板中使用 1.语法 {% include '模板名字' %} 2.使用 ad.html页面 Panel title ...
Django网页模板的继承include与复用extends
Django使用网页模板的方式分为两种, 一是建立代码块, 在新的页面导入代码块, 关键词为include 二是建立模板,新的页面在模板基础上扩充, 关键词为extends 导入代码块 include ...

Django的模板继承

Django的模板继承相关推荐

最新文章

热门文章