Django项目模板同时使用extends与load静态文件时样式失效如何解决

问题根因 #

你当前的写法不符合Django模板继承的规则：当使用{% extends %}标签时，子模板中所有没有包裹在block块内的内容都会被Django直接忽略，不会渲染到最终页面中。你把CSS引入、title等内容都写在了block外，所以继承父模板时这些样式代码根本没有被加载，自然没有样式效果；而你去掉{% extends %}后，整个子模板内容都被渲染，CSS就正常生效了。
另外用include引入父模板时结构错乱，是因为include会把index.html的完整代码直接插入到当前位置，相当于页面出现了两套<html>、<head>、<body>标签，违反HTML结构规范导致排版错乱。

解决方案 #

第一步：修改父模板index.html，预留插槽 #

在父模板的对应位置添加block插槽，用于子模板插入自定义内容，示例如下：

<!-- index.html head标签内 -->
<head>
    <!-- 父模板原有公共CSS、meta等内容 -->
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/common.css' %}">
    <!-- 预留title插槽，子模板可覆盖 -->
    <title>{% block title %}Audi Our Love{% endblock %}</title>
    <!-- 预留自定义CSS插槽，子模板可插入单独样式 -->
    {% block css %}{% endblock %}
</head>
<body>
    <!-- 父模板原有导航、公共内容 -->
    <nav>...</nav>

    <!-- 预留正文内容插槽 -->
    {% block content %}{% endblock %}

    <!-- 父模板原有页脚 -->
    <footer>...</footer>
</body>

第二步：修改子模板register_user.html，所有自定义内容放入对应block #

子模板只保留{% extends %}和各个block块内的内容，不要额外写<head>、<body>等父模板已经有的标签：

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

<!-- 插入自定义title -->
{% block title %}Register - Audi Our Love{% endblock %}

<!-- 插入当前页面专属CSS -->
{% block css %}
<link rel="stylesheet" href="{% static 'css/register/register.css' %}">
{% endblock %}

<!-- 插入正文内容 -->
{% block content %}
<h1>Register User</h1>
<form method="post">{% csrf_token %}
    {% for field in register_form %}
        <p>
            {{ field.label_tag }}
            {{ field }}
            {% if field.help_text %}
                {{ field.help_text }}
            {% endif %}

            {% for error in field.errors %}
                <p style="color:red;">{{ error }}</p>
            {% endfor %}
        </p>
    {% endfor %}
    <button type="submit" class="register-button">Register</button>
</form>
<div>
    <p>Already have an account ? | <a href="{% url 'login' %}">Login</a></p>
</div>
{% endblock %}

内容的提问来源于stack exchange，提问作者Милен Георгиев