Django模板继承异常：继承base.html后home.html内容不显示

数据老陈

2026-8-19

Django模板继承后子模板内容不显示的问题修复

核心问题分析

子模板（home.html）的内容未包裹在父模板定义的body_block块中，Django模板继承仅会渲染对应块内的内容，块外内容不会被加载。
父模板（base.html）存在HTML结构错误，干扰模板渲染逻辑。
静态文件路径使用Windows风格反斜杠\，不符合Django要求（需用正斜杠/）。

具体修复步骤

1. 修正base.html

移除重复的<body>标签
闭合<link>标签
替换静态文件路径的反斜杠为正斜杠
确保块标签结构完整

修正后的base.html代码：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="{% static 'css/base.css' %}" />
</head>
<body>
  <nav class="navbar">
    <ul class="navbar-nav">
      <li class="nav-item">Home</li>
      <li class="nav-item">About</li>
      <!-- Dropdown will go here -->
    </ul>
  </nav>

  {% block body_block %} 
  {% endblock %}
</body>
</html>

2. 修正home.html

将所有内容包裹到{% block body_block %}与{% endblock %}标签内
替换静态文件路径的反斜杠为正斜杠
闭合<link>标签
修正拼写错误：contianer改为container
变量名统一为小写（符合Python命名规范）

修正后的home.html代码：

{% extends 'base.html' %} 
{% load static %}

{% block body_block %}
<div class="container">
  <div class="heading">NEW RENTALS</div>
  {% for listing in listings %}
  <div class="items">
    <img src="{% static listing.itempicture %}" alt="" />
    <div class="Info">
      <h1>{{ listing.title }}</h1>
      <p>{{ listing.about }}</p>

      <a class="button" href="{{ listing.get_absolute_url }}">Contact</a>
    </div>
  </div>
  {% endfor %}
</div>
<link rel="stylesheet" href="{% static 'css/home.css' %}" />
{% endblock %}