后台管理布局之模板继承2 补充 继承拼接


<p>{{ block.super }}  world</p>
接上文 使用  {{block.super}}继承base.html中的内容进行拼接

2.block不可以使用重复名字

3.继承必须写在第一行



base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .header {
        width: 100%;
        height: 48px;
        background-color: darkgrey;
        position: fixed;
        top: 0;
        left: 0;
    }

    .left {
        width: 200px;
        position: absolute;
        top: 48px;
        left: 0;
        bottom: 0;
        background-color: greenyellow;
    }

    .right {
        position: absolute;
        top: 48px;
        bottom: 0;
        left: 200px;
        right: 0;
        overflow: scroll;
        background-color: beige;
    }

    .left a {
        display: inline-block;
        width: 100%;
        padding: 20px;
        background-color: lightskyblue;
        color: black;
    }
</style>
<body>
<div class="header"></div>
<div class="box">
    <div class="left">
        <a href="/addArticle/">添加文章</a>
    </div>
    <div class="right">
        {% block content %}
            hello
        {% endblock %}
    </div>

</div>
</body>
</html>

2.addArticle.html

{% extends "base.html" %}


{% block content %}
<p>{{ block.super }}  world</p>

{% endblock %}


猜你喜欢

转载自blog.csdn.net/wuxingpu5/article/details/77604419