Django的extend模板继承

曾经终败给现在 2022-05-12 11:44 193阅读 0赞

**base.html母版页设计**：

![70][]

代码如下：

<!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" %\}**