Django中extend和block的使用

最新推荐文章于 2023-10-31 11:37:16 发布

原创最新推荐文章于 2023-10-31 11:37:16 发布 · 737 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Django

Django笔记专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个关于模板继承与重写的实战案例，通过具体的代码示例展示了如何使用 Django 的模板语言来实现页面布局的复用及内容的定制化替换。

{%extend 公共模板html文件名 %}
需要写在子模板中的开头
{% block 模板块名%}
…… 写在公共模板中为可以被继承并重写的内容，
写在子模板中为替换公共模板中相同名字的模板块内容
{% endblock %}
{{ block.super }} 写在子模板中的模板块中，可以在显示父模板块中的内容同时添加新内容

这是templates下面的base.html中的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <div class="cont"><a href="/blog/shopcart/">购物车</a></div>
</div>
{% block first %}
    <div style="width: 100px;height: 100px;background-color: #5eff2e;">
        我是公共模板的第一个模板块
    </div>
{% endblock %}
<div>
    <span>这是公共模板的内容</span>
</div>

{% block second %}
{#   公共模版的块中如果有内容，则子模板会继承此内容，子模板可以通过添加内容覆盖 #}
<div style="width: 100px;height: 100px;background-color: #ff0062;">
    我是公共模板的第二个模板块
</div>
{% endblock %}
</body>
</html>

我让子模板中覆盖first块中的内容，second中的内容通过{{ block.super }}显示到子模板中，
shopcart.html中的代码如下：

{% extends "base.html" %}
{#位置要放在页面的最上面#}

{% block first %}
    <div>
        <div class="cont">这是购物车页面，替换了第一个模板块</div>
    </div>
{% endblock %}

{% block second %}

    <span>这是购物车的内容，下面是通过block.super显示的公共模板内容</span>
    {{ block.super }}
{% endblock %}

extend必须放在最上面继承公共模板，结果显示：
在这里插入图片描述