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

随机推荐

shell 7echo命令
echo用于字符串的输出 1. 显示普通字符串 #shell #!/bin/sh echo "Hello world" echo Hello world Hello world H ...
Asynchronous programming with Tornado
Asynchronous programming can be tricky for beginners, therefore I think it’s useful to iron some bas ...
javascript的节点的概念
<html> <head> <title></title> </head> <body> </body> </ ...
Java 泛型小结
1.什么是泛型? 泛型(Generics )是把类型参数化,运用于类.接口.方法中,可以通过执行泛型类型调用分配一个类型,将用分配的具体类型替换泛型类型.然后,所分配的类型将用于限制容器内使用的值, ...
Spark交互式工具spark-shell
REPL Spark REPL Spark shell 下面我们启动一下(我这里搭建的是3节点集群) sc.后面按TAB键可以把提示调出来查看hdfs上文件内容这个数据从这里下载的 https:/ ...
sql server不要插入大数据，开销太大
sql server或者说关系型数据库中不要做一个字段存储大数据量的设计,比如要插入3000w条数据,然后每条数据中有一个文章字段,这个字段每条大概都需要存储几m的数据,那么算下来这个表就得有几百个G ...
ES６
1属性的遍历:上个图
web本质
知识内容: 1.网络协议复习 2.模拟web 3.web本质总结参考: http://www.cnblogs.com/wupeiqi/articles/5237672.html http://www ...
linux7系统开机报错failed to start login service
1.开机报错failed to start login service 参考网站:https://unix.stackexchange.com/questions/264994/kali-sudden ...
Ubuntu jdk 8 与 6 切换（安装与配置）
Switch To Oracle JDK8 Switch To Oracle JDK8 1.1 Switch Oracle JDK in the Unbuntu 14.04 Step1 : Downl ...

Django的模板继承

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

随机推荐

热门专题