6. Django templates模板（三）

最新推荐文章于 2025-04-08 00:05:43 发布

梦否

最新推荐文章于 2025-04-08 00:05:43 发布

阅读量278

点赞数

CC 4.0 BY-SA版权

分类专栏： python 文章标签： django templates

本文链接：https://blog.csdn.net/qq_26460841/article/details/88997963

python 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了Django模板系统中的模板继承机制，通过实例演示如何利用extend标签和block标签实现代码复用，有效减少模板间的重复代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

extend模板继承

1. 先看看include 模板标签

1.1 引入其他模板

#在time.html中，引入我们的blog.html文件
<body>
    <h1>{{ num | multi:2 }}</h1>
    <h1>nickname1 : {% weizu %}</h1>
    <hr>
    {% load static %}
    {% include 'blog.html' %}
</body>

效果：

通过效果不难发现，不光引用了blog.html中的内容，还引入了blog.html中的css等资源文件。下面我们查看它的源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>24</h1>
    <h1>nickname1 : WEIZU</h1>
    <hr>
    
    <!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/test.css">
    <script src="/static/home.js"></script>

    
    <script src=/static/home.js></script>
    <title></title>
</head>
<body>
    <h1>Home of my blog.</h1>
</body>
</html>
</body>
</html>

发现，源码比较畸形，其实就是直接将文件从blog.html中完全写入到我们引入的文件time.html文件中。

2. extend(继承)模板标签

可以看做是对上面代码冗余的一种优化。它结合{% block %}块，很方便的就能实现不同位置的代码的植入。

第一步：定义基础模板,该框架之后将由子模板所继承。

如：base.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    {% block content %}
        <h1>My helpful timestamp site</h1>
    {% endblock %}

    {% block footer %}
        <hr>
        <p>Thanks for visiting my site.</p>
    {% endblock %}
</body>
</html>

第二步：在需要继承使用模板的html中，使用：

如：在time.html中定义我们自己的内容：

{% extends 'base.html' %}          #继承需要写在首行

{% block title %}
    Time Page.
{% endblock %}

{% block content %}
    {% load my_tags %}
    <h1>{{ num | multi:2 }}</h1>
    <h1>nickname1 : {% weizu %}</h1>
{% endblock %}

{% block footer %}
    <h1>版权所有：weizu</h1>
{% endblock %}

结果：

注意：

<1>如果在模板中使用 {% extends %} ，必须保证其为模板中的第一个模板标记。 否则，模板继承将不起作用。

<2>一般来说，基础模板中的 {% block %} 标签越多越好。 记住，子模板不必定义父模板中所有的代码块，因此
    你可以用合理的缺省值对一些代码块进行填充，然后只对子模板所需的代码块进行（重）定义。 俗话说，钩子越
    多越好。
<3>如果发觉自己在多个模板之间拷贝代码，你应该考虑将该代码段放置到父模板的某个 {% block %} 中。
    如果你需要访问父模板中的块的内容，使用 {{ block.super }}这个标签吧，这一个魔法变量将会表现出父模
    板中的内容。 如果只想在上级代码块基础上添加内容，而不是全部重载，该变量就显得非常有用了。

<4>不允许在同一个模板中定义多个同名的 {% block %} 。 存在这样的限制是因为block 标签的工作方式是双向的。
    也就是说，block 标签不仅挖了一个要填的坑，也定义了在父模板中这个坑所填充的内容。如果模板中出现了两个
    相同名称的 {% block %} 标签，父模板将无从得知要使用哪个块的内容。

案例：

base.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>{% block title %}{% endblock %}</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            font-size: 32px;
        }
        a{
            text-decoration: none;
        }
        .nav{
            width:100%;
            height:50px;
            background-color: cadetblue;
            color: white;
            text-align: center;
        }
        .left{
            width: 20%;
            min-height: 600px;
            background-color: burlywood;
            color: white;
            text-align: center;
        }
        .content{
            width:70%;
            min-height: 600px;
            text-align: center;
        }
        .float-left{
            float: left;
        }
    </style>
    {% block styles %}
    {% endblock %}
</head>
<body>
    <div class="nav">导航栏</div>
    <div class="container">
        <div class="left float-left">
            <p><a href="/sutdent/">学生管理</a></p>
            <p><a href="/teacher/">教工管理</a></p>
            <p><a href="/money/">薪资查询</a></p>
        </div>
        <div class="content float-left">
            {% block content %}
                <h1>Welcome to page.</h1>
            {% endblock %}
        </div>
    </div>
</body>
</html>

在student.html中：

{% extends 'base.html' %}

{% block title %}
    学生管理
{% endblock %}

{% block styles %}
    <style>
        li{
            text-decoration: none;
            color: red;
        }
    </style>
{% endblock %}

{% block content %}
    查询到的学生的数据是：<br>
    {% for i in list %}
        <li>{{ i }}</li>
    {% endfor %}
{% endblock %}

至于路由匹配条目urls.py，和传入的数据views.py列表list就不在这里给出了。

值得注意的是，就连css文件的定义，也可以放在block中。