Django模板继承与引用实战：从重复代码到高效复用

小满

发布时间：2026-10-14| 4人浏览过

原创

本文深入解析Django模板引擎的核心功能——模板继承与引用。通过对比传统独立编写HTML与使用模板继承两种方式，详细演示如何利用extends和block标签构建基础骨架，实现头部、底部及侧边栏等公共区域的复用。文章涵盖具体代码示例、CSS样式覆写技巧及block.super的使用，帮助开发者消除冗余代码，提升Django项目的可维护性与开发效率。

引言

建议开发者浏览各类主流网站（如电商平台），仔细观察不同页面间的共性与差异。

经过观察不难发现，尽管不同页面的具体数据内容各异，但其前端排版结构和部分公共模块往往高度一致。

这自然会引发一个疑问：是否每个页面都需要单独编写代码？这种重复劳动显然效率低下且令人沮丧。

然而，软件开发的一条核心原则是：绝不重复造轮子。

针对上述现象，Django提供了“模板继承与引用”这一关键机制来解决该问题。

1.模板的继承与引用

Django模板引擎最强大且复杂的特性在于模板继承。它允许开发者创建一个包含站点所有通用元素的“基础”模板，并定义可供子模板覆盖的blocks（代码块）。

（1）常规思路：每个页面独立编码——以下展示三个独立HTML模板文件及其对应的页面效果：

①第一个HTML模板：

a_first.html文件内容如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 200px;
            background: darkgoldenrod;
        }
        .con{
            height: 500px;
            background: aqua;
        }
        .but{
            height: 150px;
            background: sandybrown;
        }
    </style>
</head>
<body>
<div>
    <div class="top">头部</div>
    <div class="con">内容一</div>
    <div class="but">底部</div>
</div>
</body>
</html>

页面效果展示：

②第二个HTML模板：

a_second.html文件内容如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 200px;
            background: darkgoldenrod;
        }
        .con{
            height: 500px;
            background: aqua;
        }
        .but{
            height: 150px;
            background: sandybrown;
        }
        .con .left{
            width: 70%;
            float: left;
            height: 100%;
            background: red;
        }
        .con .right{
            width: 30%;
            float: left;
            height: 100%;
            background: #352fff;
        }
    </style>
</head>
<body>
<div>
    <div class="top">头部</div>
    <div class="con">
        <div class="left">内容二</div>
        <div class="right">广告</div>
    </div>
    <div class="but">底部</div>
</div>
</body>
</html>

页面效果展示：

③第三个HTML模板：

a_third.html文件内容如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 200px;
            background: darkgoldenrod;
        }
        .con{
            height: 500px;
            background: aqua;
        }
        .but{
            height: 150px;
            background: sandybrown;
        }
        .con .left{
            width: 70%;
            float: left;
            height: 100%;
            background: #f338ff;
        }
        .con .right{
            width: 30%;
            float: left;
            height: 100%;
            background: #24ff44;
        }
    </style>
</head>
<body>
<div>
    <div class="top">头部</div>
    <div class="con">
        <div class="left">内容三</div>
        <div class="right">广告</div>
    </div>
    <div class="but">底部</div>
</div>
</body>
</html>

页面效果展示：

分析：从上述三个界面可以看出，头部和底部结构完全相同，且后两个页面的右侧均包含广告模块。若采用独立编码方式，需重复编写大量相同代码，既耗时又费力。既然编程语言支持类继承，HTML模板是否也能实现继承？答案是肯定的。接下来我们将通过模板继承技术展示其优势：

（2）高级思路：应用模板继承与引用！

①编写父级模板base.html：

编写父级模板的原则是：将公共部分直接写入代码，供子模板直接继承（通过extends标签实现）；将可变部分通过block标签开放接口，供子模板覆盖（通过block标签实现）。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 200px;
            background: darkgoldenrod;
        }
        .con{
            height: 500px;
            background: aqua;
        }
        .but{
            height: 150px;
            background: sandybrown;
        }
        .con .right{
            width: 30%;
            float: left;
            height: 100%;
            background: #352fff;
        }
    </style>
    {% block style %}{% endblock %}			  {#让子模板可以对css样式进行覆写！#}
</head>
<body>
<div>
    <div class="top">头部</div>
    <div class="con">
        {% block con %}
            {% block left %}

            {% endblock %}

            {% block right %}
                <div class="right">广告</div>
            {% endblock %}
        {% endblock %}
    </div>
    <div class="but">底部</div>
</div>
</body>
</html>

②第一个子模板：a_first.html文件：


{% extends 'music/base.html' %}


{% block con %}
    内容一
{% endblock %}

②第二个子模板：

a_second.html文件：


{% extends 'music/base.html' %}

{% block style %}
    <style>
            .con .left{
            width: 70%;
            float: left;
            height: 100%;
            background: red;
        }
    </style>
{% endblock %}

{% block left %}
    <div class="left">内容二</div>
{% endblock %}

②第三个子模板：a_third.html文件：


{%  extends 'music/base.html' %}

{% block style %}
    <style>
        .con .left{
            width: 70%;
            float: left;
            height: 100%;
            background: #f338ff;
        }
        .con .right{
            width: 30%;
            float: left;
            height: 100%;
            background: #24ff44;
        }
    </style>
{% endblock %}

{% block left %}
    <div class="left">内容三</div>
{% endblock %}

（3）通过模板继承与引用实现的效果与上述独立编码完全一致，但代码量大幅精简。