Django模板中如何使用block实现子模板填充content与sidebar区域

问题根源 #

Django 模板的{% include %}是即时渲染逻辑：被引入模板内部定义的block无法被继承父模板的子模板覆盖。你当前的流程是：

1. base.html 加载时先渲染_sidebar.html，此时里面的{% block sidebar %}为空，直接输出空内容
2. 后续处理子模板 index.html 时，找不到 base.html 中定义的sidebar块占位，你写的{% block sidebar %}内容完全不会被渲染到页面

解决方案 #

方案1：直接在base.html中定义sidebar块（最推荐，改动最小） #

调整base.html结构，把sidebar块的占位放到外层，不需要嵌套在被include的文件里：

{% block sidebar %}
  <!-- 这里可以放全局公共的侧边栏内容，子模板需要保留时可以调用{{ block.super }} -->
  {% include 'partials/_sidebar.html' %}
{% endblock %}

{% block content %}{% endblock %}

如果你的_sidebar.html里只有空的block占位，直接删掉这个文件，把块占位写在base.html里即可。

方案2：多层模板继承（适合需要单独维护侧边栏结构的场景） #

调整模板继承关系，避免在include的文件里写可覆盖的block：

1. 修改_sidebar.html作为最底层父模板，定义全局结构：

<!DOCTYPE html>
<html>
<head>
  <!-- 公共头部、css引入等内容 -->
</head>
<body>
  {% block sidebar %}{% endblock %}
  {% block main %}
    {% block content %}{% endblock %}
    {% include 'partials/_footer.html' %}
  {% endblock %}
</body>
</html>

2. 修改base.html继承sidebar.html，不需要额外改内容即可保留原结构。

额外语法修正 #

你当前index.html里的sidebar块有标签错误：第一行的div提前闭合了，需要修改为：

{% block sidebar %}
<!-- 删掉末尾的</div>，不要提前闭合 -->
<div class="bg-white py-2 collapse-inner rounded">
    <h6 class="collapse-header">Custom Components:</h6>
    <a class="collapse-item" href="{% url 'veggies' %}">veggies</a>
    <a class="collapse-item" href="{% url 'fruits' %}">fruits</a>
</div>
{% endblock %}

内容的提问来源于stack exchange，提问作者moon_cat