Django模板继承实战：从base.html到子模板的规范写法

山海之间

发布时间：2026-10-13| 5人浏览过

原创

本文介绍Django框架中模板继承的核心机制，通过定义base.html基础模板，利用{% extends %}和{% block %}标签实现代码复用。文章详细讲解了如何在子模板中重载标题、JS、CSS及内容区块，并强调静态文件引用的特殊性，旨在帮助开发者减少前端代码冗余，提升维护效率。

Django模板继承概述

本文通过具体示例，详细解析Django框架中静态模板的继承操作机制。

前言：这是本人的第一篇技术博客。鉴于毕业校招在即，特意抽空将过往项目中的关键技术点进行整理与回顾。

开发环境配置：Python 3.4，Django 1.8。

在初次使用Python和Django进行项目开发时，常遇到前端页面代码高度冗余的问题，尤其是头部导航和底部信息区域，各页面代码完全一致。初期采用复制粘贴方式导致维护困难，随后发现Django内置的模板继承功能极为实用。作为新手，此处仅分享个人实践经验，确认为有效方案，欢迎同行指正交流。

基础模板base.html的定义

第一步：定义基础模板，供后续子模板继承使用。

将该基础模板命名为base.html，主要用于存放各子页面共用的代码结构，确保所有继承该模板的子页面都能统一样式与布局。

base.html代码结构示例


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{% block title %}首页{% endblock %}</title>
  {% block js %} {% endblock %}
  {% block css %} {% endblock %}
</head>
<body> 
  {% block content %}{% endblock %}
</body>
</html>

子模板编写与继承规则

第二步：编写各个子模板文件。

如代码所示，{% extends 'base.html' %}指令用于指定继承的基础模板，该指令必须位于子模板文件的第一行，否则模板引擎无法正确识别继承关系。

{% block %}标签用于定义可重载的内容区块，告知模板引擎子模板可以在此处覆盖或补充内容。此外，{% include %}标签允许在模板中嵌入其他模板片段，便于模块化开发。

需特别注意CSS、JS等静态文件的引用方式，其处理逻辑与普通HTML标签有所不同，需遵循Django特定的静态文件加载规范。

子模板{% extends %}与{% block %}应用实例


{% extends 'base.html' %}
<!-- 该页面不允许出现js以及css代码,content代码可直接写在本文件中，下面只是content的实例代码 -->
{% block title %}
  <!-- 此处写页面标题 -->
{% endblock %}
{% block js %}
  <!-- 此处填充js链接 -->
  <script type="text/javascript" src="..."></script>
{% endblock %}
{% block css %}
  <!-- 此处填充css链接 -->
{% endblock %}
{% block content %}
  <!-- 此处填充页面主体内容 -->
  {% include 'taskApp/cjjdglContent.html' %}
{% endblock %}

采用模板继承方式后，不仅修改维护变得便捷，代码总量也显著减少，提升了开发效率。

希望本文所述内容能对基于Django框架的Python程序设计人员提供有益参考与帮助。