模板的继承

最新推荐文章于 2024-07-18 18:43:34 发布

木易丫ang

最新推荐文章于 2024-07-18 18:43:34 发布

阅读量294

点赞数 8

文章标签：前端

本文链接：https://blog.csdn.net/2303_77327646/article/details/136722438

版权

extends


def index(request):
    return render(request, 'the_6/index.html')

from django.urls import path
from .views import the_6_hello, filter_custom, index

urlpatterns = [
    path('hello/', the_6_hello),
    path('filter_custom/', filter_custom),
    path('index/', index),
]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>base页面</title>
    <style>
        .appbar{
            background: skyblue;
            height: 50px;
        }
        .main{
            {#弹性布局#}
            display: flex;
        }
        .content{
            width: 80%;
            height: 1000px;
            background: yellowgreen;
        }
        .sidebar{
            width: 20%;
            height: 1000px;
            background: darkseagreen;
        }
    </style>
</head>
<body>
    <div class='appbar'></div>
    <div class="main">
        <div class="content"></div>
        <div class="sidebar"></div>
    </div>
</body>
</html>

{# extends 继承 —— 引入 #}
{% extends 'base.html' %}

block —— 挖坑、填坑

挖坑，填坑，把需要修改的地方挖出来，再填上想要的

挖

    <div class='appbar'>
        {% block appbar %}
        我是base.html的页眉
        {% endblock %}
    </div>

填

{# extends 继承 —— 引入 #}
{% extends 'base.html' %}

{% block appbar %}
我是index.html的页眉
{% endblock %}

block.super —— 保留原有的

挖

    <div class="main">
        {% block main %}
        <div class="content">
            我是base.html的主要内容
        </div>
        {% endblock %}
        <div class="sidebar">
            我是base.html的侧边栏
        </div>
    </div>

填

{% block main %}
    {{ block.super }} <br>
    我是index.html的主要内容
{% endblock %}

include

<h3> 我是include.html的内容 </h3>

include 的引入，只能写在某个页面里

{% block main %}
    {{ block.super }} <br>
    我是index.html的主要内容
    {% include 'the_6/include.html' %}
{% endblock %}