Django的extend模板继承

最新推荐文章于 2023-11-04 14:47:42 发布

baobao267

最新推荐文章于 2023-11-04 14:47:42 发布

阅读量496

点赞数

分类专栏：前端 python

本文链接：https://blog.csdn.net/baobao267/article/details/82746240

版权

前端同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

python

6 篇文章 0 订阅

订阅专栏

base.html母版页设计：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: aquamarine;
            height: 30px;
        }

        .menu{
            background-color: beige;
            float: left;
            height: 500px;
            width: 20%;
        }
        .content{
            background-color: cadetblue;
            float: left;
            height:500px;
            width: 80%;
        }
        .footer{
            background-color: coral;
            height: 30px;
            clear: both;
        }

    </style>
</head>
<body>
<div>
    <div class="header"></div>
    <div class="center">
        <div class="menu">
             <a href="{% url 'shoppingcar' %}">购物车</a>
            <br>
            <a href="{% url 'ordered' %}">订单</a>
        </div>
        <div class="content">
            {% block content %}
            {% endblock %}
        </div>
    </div>
    <div class="footer"></div>
</div>
</body>
</html>

ordered.html订单页代码：

{% extends "base.html" %}
{% block content %}
    订单
{% endblock %}

shoppingcar.html购物车页代码：

{% extends "base.html" %}
{% block content %}
    购物车
{% endblock %}

url.py路由代码：

  path('ordered/',views.ordered,name='ordered'),
  path('shoppingcar/', views.shoppingcar,name='shoppingcar'),

views.py视图函数代码：

def ordered(req):
    return render(req,"ordered.html")
def shoppingcar(req):
    return render(req,"shoppingcar.html")

注意：

1、共同代码段分离至base.html中，即母版中

2、母版中使用用标签： {% block centent%} 及 {% endblock%}定义非共同部分

3、继承模版的页面，在页面最顶部位置使用代码{% extends "base.html" %}

4、继承模版的页面，非共同部分与母版中标签一致且名称一致，即 {% block centent%} 及 {% endblock%}

baobao267

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Django的extend模板继承

base.html母版页设计：代码如下： &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫