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, ...

随机推荐

php metaphone()函数解析
php metaphone() 函数计算字符串的 metaphone 键,本文章向码农们介绍 php metaphone() 函数的基本用法和实例,需要的码农可以参考一下本文章的方法和实例. 定义和用 ...
ElasticSearch Document API
删除索引库可以看到id为1的索引库不见了这里要修改下配置文件 slave1,slave2也做同样的操作,在这里就不多赘述了. 这个时候记得要重启elasticseach才能生效,怎么重启这里就不多 ...
Python - Django - App 的概念
App 方便我们在一个大的项目中,管理实现不同的业务功能创建 App: 命令行: python manage.py startapp app名使用 Pycharm 创建: 文件 -> 新建项 ...
SpringJdbc之queryForXXX大全解读
一.查询单个字段 Object queryForObject(String sql, Object[] args, Class requiredType) 其中Class requiredTy ...
1.vue和react的区别
1.个人感觉Vue好用,react不咋地呀. 2.(网上搜的)Vue的解决方案适用于小型应用,但对于对于大型应用而言不太适合.
SparkSession
在2.0版本之前,使用Spark必须先创建SparkConf和SparkContext catalog:目录 Spark2.0中引入了SparkSession的概念,SparkConf.SparkCo ...
js 断点调试
Devexpress 百分号显示格式
百分号:{0:P}表示显示为百分号模式.如数据源中为0.5.表示出来为50%
使用JSP页面生成PDF报表
转自:http://developer.51cto.com/art/200907/134261.htm 1.iText简介 iText是一个开放源码的Java类库,可以用来方便地生成PDF文件.大家通 ...
scheduling.quartz.CronTriggerBean has interface org.quartz.CronTrigger as super class
转自:https://blog.csdn.net/lzj0470/article/details/17786587 quartz版本号:2.1.7 错误: Caused by: <a href= ...

Django的模板继承

Django的模板继承的更多相关文章

随机推荐

热门专题