Django HTML 模板继承

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",  # 把刚刚创建的应用添加到这里，否则模版文件是无法匹配到的
]

创建基础模板

    
    
    




    Home |
    About |
    Contact




    {% block content %}{% endblock %}

创建待继承base.html的模版

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

home.html

{% extends 'base.html' %}

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

{% block content %}

    
Home Page

{% endblock %}

详细解释：

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

about.html

{% extends 'base.html' %}

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

{% block content %}

    
About Page

{% endblock %}

contact.htm

{% extends 'base.html' %}

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

{% block content %}

    
Contact Page

{% 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')),
]

步骤六：运行 Django 项目

在项目根目录下运行：

python manage.py runserver

然后在浏览器中访问http://127.0.0.1:8000/，收官！