Django模板继承extend标签实战：从views到base.html的配置详解

花开有时

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

原创

本文详细解析Django中模板继承extend标签的使用。通过修改views.py和urls.py配置路由，创建包含CSS样式的base.html基础模板，并在ordered.html等子页面中利用{% extends %}和{% block %}标签实现页面复用与布局统一，提供完整的代码示例与效果说明。

视图层views.py配置

首先需要在views.py文件中进行相应的代码修改。具体实现逻辑如所示，其中定义了ordered和shopping_car两个视图函数，分别渲染对应的HTML模板。


...
def ordered(req):
  return render(req, "ordered.html")
def shopping_car(req):
  return render(req, "shopping_car.html")

URL路由urls.py配置

接下来，需要在urls.py文件中配置URL路由规则，以确保前端请求能正确映射到后端视图。相关配置代码见，这里注册了ordered/和shopping_car/两个路径对应的视图处理。


...
  path('ordered/', views.ordered),
  path('shopping_car/', views.shopping_car),
...

基础模板base.html创建

在tmplates文件夹下创建base.html文件，作为整个网站的基础模板。该文件定义了页面的整体结构，包括头部、菜单、内容区和底部，并引入了CSS样式以美化界面。具体代码结构如所示，其中定义了.page-header、.page-body、.menu、.content和.page-footer等类的样式，并预留了{% block content %}区块供子页面填充。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .page-header{
      height:50px;
      background-color: rebeccapurple;
    }
    .page-body .menu{
      height: 500px;
      background-color: antiquewhite;
      float: left;
      width: 20%;
    }
    .page-body .content{
      height: 500px;
      background-color: cornflowerblue;
      float: left;
      width: 80%
    }
    .page-footer{
      height:50px;
      background-color: green;
      clear: both;
    }
  </style>
</head>
<body>
<div>
  <div class="page-header"></div>
  <div class="page-body">
    <div class="menu">
      <a href="/ordered/" rel="external nofollow" >订单</a><br>
      <a href="/shopping_car/" rel="external nofollow" >购物车</a>
    </div>
    {% block content %}
    {% endblock %}
  </div>
  <div class="page-footer"></div>
</div>
</body>
</html>

子页面ordered.html与shopping_car.html实现

创建ordered.html文件，用于展示订单页面。该文件通过{% extends "base.html" %}继承基础模板，并在{% block content %}中定义具体内容，如所示。同样地，shopping_car.html文件也采用相同的继承方式，展示购物车内容。


{% extends "base.html" %}
{% block content %}
    <div class="content">
      订单
    </div>
{% endblock %}
shopping_car.html 文件
{% extends "base.html" %}
{% block content %}
    <div class="content">
      购物车
    </div>
{% endblock %}