Django HTML 模板继承

在使用 Django 构建 Web 应用时，HTML 模板继承能够更加灵活和有效地管理和组织前端代码。通过继承，我们可以在不同的页面之间共享相同的结构和布局，减少代码冗余，提高可维护性。本文将讲述Django 中的 HTML 模板继承，并以示例讲解具体的使用方法。

Maitre Chen

1431人浏览 · 2024-01-14 15:52:39

Maitre Chen · 2024-01-14 15:52:39 发布

1 写在前面

在使用 Django 构建 Web 应用时，HTML 模板继承能够更加灵活和有效地管理和组织前端代码。通过继承，我们可以在不同的页面之间共享相同的结构和布局，减少代码冗余，提高可维护性。本文将讲述 Django 中的 HTML 模板继承，并以示例讲解具体的使用方法。

需要说明的是，笔者在web开发时希望导航栏内容保持不变，而修改网页主体的内容，尝试了在页面底部引入 jQuery，并添加用于异步加载的脚本，但这样的方法稍显复杂，其实对于这类问题继承就可以搞定了。

2 基础概念

2.1 模板继承的作用

HTML 模板继承允许我们创建一个基础模板（base template），其中包含页面的共同结构和布局，然后在其他模板中继承这个基础模板，并根据需要覆盖或扩展特定部分。这样，我们就能够在整个应用中维护一致的外观，同时方便地调整或添加特定页面的内容。

2.2 基础模板的创建

在 Django 中，我们可以在基础模板中使用 {% block %} 标签来标识可被继承的块（block）。这些块可以在子模板中被覆盖，或者通过 {% block %} 和 {% endblock %} 标签之间的内容进行扩展。

3 示例讲解

为了示例的完整性，以及便于初学者能够有一个系统的认识，笔者从django项目创建开始，手把手开始演示：

步骤一：创建 Django 项目

首先，打开终端或命令提示符，导航到你想要创建项目的目录，然后运行以下命令：

django-admin startproject async_loading_demo

这将创建一个名为 async_loading_demo 的 Django 项目目录。

步骤二：创建 Django 应用

进入项目目录，并创建一个 Django 应用，这里称为“main_app”：

cd async_loading_demo
python manage.py startapp main_app

步骤三：定义 Django 视图

在 main_app/views.py 文件中定义视图：

from django.shortcuts import render

def home(request):
    return render(request, 'home.html')

def about(request):
    return render(request, 'about.html')

def contact(request):
    return render(request, 'contact.html')

步骤四：定义 Django 模版

首要的是

在main_app目录创建templates文件夹，然后在django项目目录async_loading_demo下的setting.py中添加应用名称，如下：

# Application definition

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "main_app",  # 把刚刚创建的应用添加到这里，否则模版文件是无法匹配到的
]

创建基础模板

<!-- base.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 %}Async Loading Demo{% endblock %}</title>
</head>
<body>

<nav>
    <a href="{% url 'home' %}" class="main-link">Home</a> |
    <a href="{% url 'about' %}" class="main-link">About</a> |
    <a href="{% url 'contact' %}" class="main-link">Contact</a>
</nav>

<!-- 页面内容区域 -->
<main id="content">
    {% block content %}{% endblock %}
</main>

</body>
</html>

创建待继承base.html的模版

这里我们创建三个模版，home.html、about.html、contact.html，如下：

home.html

{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% block content %}

    <h1>Home Page</h1>

{% endblock %}

详细解释：

{% extends 'base.html' %}：这是继承模板的声明。前面我们已经创建了一个基础模板base.html，其中包含整个网站的共同结构和样式，所以现在可以继承这个基础模板，填充具体内容。
{% block title %}Home{% endblock %}：这是一个块（block）的定义。块是在继承模板中定义的可以被子模板填充的区域。在这个例子中，title 是一个块的名称，用于定义页面的标题。在子模板中，我们可以通过在块中提供内容来填充这个区域。这里我们使用 {% block title %}Home{% endblock %}，那么 title 这个块的内容将被替换为 "Home"，而不是基类模版的“Async Loading Demo”。
{% block content %}...{% endblock %}： 同样是一个块的定义，这次是用于填充页面的主体内容。在这个例子中，content 是主体内容块的名称。在子模板中，我们可以在块中提供具体的 HTML 内容，替换掉基础模板中相同块的内容。这样，每个子模板可以有自己独特的主体内容。比如我们这里的主体内容就是“Home Page”。

about.html

{% extends 'base.html' %}

{% block title %}About{% endblock %}

{% block content %}

    <h1>About Page</h1>

{% endblock %}

contact.htm

{% extends 'base.html' %}

{% block title %}Contact{% endblock %}

{% block content %}

    <h1>Contact Page</h1>

{% endblock %}

步骤五：配置 URL 路由

在 main_app/urls.py 文件中定义 URL 路由：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('about/', views.about, name='about'),
    path('contact/', views.contact, name='contact'),
]

在 async_loading_demo/urls.py 文件中包含应用main_app的 URL 路由：

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('main_app.urls')),
]