Django模板继承详解

一、什么是Django模板继承

Django的模板继承机制提供了一种高效的方式来构建可复用的页面结构。其核心原理是定义一个基础模板（父模板），然后通过子模板进行扩展或内容覆盖，从而显著减少代码重复。

这种设计遵循DRY原则（Don't Repeat Yourself），既能保持网站整体布局的一致性，又能为各个页面保留定制内容的灵活性。通过这种模块化的管理方式，大大提升了模板维护的效率。

二、父模板

让我们从一个简单的父模板入手。假设有一个名为 base.html 的模板，它定义了网站的基本框架结构：

html 复制代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Website{% endblock %}</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <main>
        {% block content %}
        <!-- 默认内容 -->
        <p>This is the default content.</p>
        {% endblock %}
    </main>

    <footer>
        <p>&copy; 2023 My Website</p>
    </footer>
</body>
</html>

该模板通过 {% block %} 标签定义了可覆盖区域，其中 title 和 content 是两个关键块，子模板可通过重写这些块来实现内容自定义。

三、子模板

现在，我们创建一个子模板 home.html，它将继承 base.html 并覆盖其中的特定部分内容。以下是具体实现步骤和示例：

继承基础模板

在 home.html 文件的开头，我们需要使用 {% extends "base.html" %} 标签声明继承关系，这样 Django 模板引擎会先加载 base.html 的框架结构。例如：
html 复制代码
```
{% extends "base.html" %}
```
覆盖区块内容
base.html 中通过 {% block block_name %}， {% endblock %} 定义的区块可以在子模板中重新实现。假设基础模板有一个名为 title，content的区块，我们可以这样覆盖它：
html 复制代码
```
{% block title %}Home - My Website{% endblock %}

{% block content %}
<h2>Home Page</h2>
<p>Welcome to the home page of our website!</p>
{% endblock %}
```

完整示例

一个典型的 home.html 可能如下：

html 复制代码

{% extends "base.html" %}

{% block title %}Home - My Website{% endblock %}

{% block content %}
<h2>Home Page</h2>
<p>Welcome to the home page of our website!</p>
{% endblock %}

通过这种方式，我们可以高效地复用模板代码，同时保持各个页面的灵活性和独特性。

四、输出结果

当渲染 home.html 时，Django会将子模板的内容插入到父模板的相应块中，生成以下HTML：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home - My Website</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <main>
        <h2>Home Page</h2>
        <p>Welcome to the home page of our website!</p>
    </main>

    <footer>
        <p>&copy; 2023 My Website</p>
    </footer>
</body>
</html>