模板继承时Base模板指定Div未显示的问题求助

我来帮你排查这个问题——你遇到的核心问题其实是子模板重写了Base模板里的body块，直接覆盖掉了Base中body块内的所有内容，包括那两个你想要保留的div。

咱们先拆解代码逻辑：

• Base模板里，那两个关键的div是放在{% block body %}内部的，嵌套在{% block content %}的外层
• 但你的子模板直接声明了{% block body %}，这就意味着子模板完全替换了Base模板中body块的所有原有内容——包括Base里的消息提示、page-header容器、外层div，全都被替换成子模板里的登录表单代码了，自然看不到那两个div

解决办法 #

你完全不需要把div挪到子模板里，只需要调整子模板的块重写逻辑，让它只重写需要自定义的content块，而不是整个body块。如果子模板需要在body里加额外代码（比如社交登录的媒体JS），可以利用Base模板已预留的extra_body块，或者在Base里新增专门的前置块。

修正后的子模板示例

{% extends "account/base.html" %} 
{% load i18n %} 
{% load account socialaccount %}

{% block head_title %}{% trans "Sign In" %}{% endblock %} 

{% block body_attributes %} class="login-page" {% endblock %} 

{# 移除原来的{% block body %}，不要重写整个body块！ #}

{# 把社交登录的JS放到Base预留的extra_body块里，不影响原有结构 #}
{% block extra_body %}
    {{ block.super }}
    {% providers_media_js %}
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-4 col-sm-6 ml-auto mr-auto">
        <div class="card card-signup">
            <form class="form" method="POST" action="{% url 'account_login' %}">
                {% csrf_token %}
                <div class="card-header card-header-primary text-center">
                    <h4 class="card-title">Log in</h4>
                    <div class="social-line">
                        <a href="{% provider_login_url 'facebook' method='js_sdk' %}" class="btn btn-just-icon btn-link">
                            <i class="fa fa-facebook-square"></i>
                        </a>
                        <a href="{% provider_login_url 'twitter' %}" class="btn btn-just-icon btn-link">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="{% provider_login_url 'google' %}" class="btn btn-just-icon btn-link">
                            <i class="fa fa-google-plus"></i>
                        </a>
                    </div>
                </div>
                <p class="description text-center">Or Be Classical</p>
                <div class="card-body">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="material-icons">face</i>
                        </span>
                        <input type="text" name="login" placeholder="Nombre de Usuario ..." autofocus="autofocus" maxlength="150" required id="id_login" class="form-control" >
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="material-icons">lock_outline</i>
                        </span>
                        <input type="password" name="password" placeholder="Password..." required id="id_password" class="form-control">
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="remember" id="id_remember" checked> Remember me
                        </label>
                    </div>
                </div>
                <div class="footer text-center">
                    <button id="login-btn"class="btn btn-primary btn-link btn-wd btn-lg" type="submit">Sing in</button>
                    <a class="btn btn-primary btn-link btn-wd btn-lg" href="{% url 'account_reset_password' %}">Has olvidado la contraseña</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

为什么这样有效？

• 子模板不再重写body块，Base模板里body块的所有内容（包括消息提示、那两个外层div）都会被完整保留
• 社交登录的JS被放到extra_body块里，Base模板已经在body末尾预留了这个位置，不会破坏原有结构
• body_attributes块依然可以正常重写，用来设置body的class属性

这样就能完美保留Base模板的通用结构，同时实现子模板的自定义内容，完全发挥模板继承的优势啦！

内容的提问来源于stack exchange，提问作者Roberto Fernandez Diaz