Question

我正在扩展一个模板，并且在容器的内容块之前的两个div没有以任何方式显示，我发现的唯一解决方案是将这2个div放在孩子中，但当然它会丢失然后使用extend的意义。

有人可以告诉我我错过了什么吗？

提前致谢。

我有以下基本模板：

<!doctype html>
<html lang="es">
<head>
    <title>{% block head_title %}{% endblock %}</title>
    {% block extra_head %}
    {% endblock %}
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>

    {% load static %}

    {% block extra_css %}
    {% endblock %}

</head>

<body {% block body_attributes %}  {% endblock %} >
    {% block body %}

                {% if messages %}
                    <div>
                      <strong>Messages:</strong>
                      <ul>
                        {% for message in messages %}
                            <li>{{message}}</li>
                        {% endfor %}
                      </ul>
                    </div>
                {% endif %}

                <!-- THIS 2 HERE DOESN'T APPEAR -->
                <div class="page-header header-filter" style="background-image: url({% static "material/img/pic.jpg" %}); background-size: cover; background-position: top center;">
                    <div class="container"> 
                        {% block content %}
                        {% endblock %}
                    </div>
                </div>

    {% endblock %}

    {% block extra_body %}
    {% endblock %}

    <!--   Core JS Files   -->
    <script src="{% static 'material/js/core/jquery.min.js' %} "> 
    </script>


</body>

</html>

扩展的模板如下：

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

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

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

{% block body %}

    {% load account socialaccount %}
    {% providers_media_js %}

    {% 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 %}


{% endblock  %}

Answer 1

您的block代码是嵌套的，因此当您覆盖子代中的body时，您会丢失基本模板中body内的所有代码，包括两个div。仅覆盖您孩子中的content阻止，并将其他代码放在阻止extra_body中。如果您在content之前需要该代码，请在名为body的基本模板中的before_content内添加另一个块，并在子代中覆盖它以将load放入其中。
P. S.在覆盖子模板中的if messages后，您也丢失了body代码。

Answer 2

我留下这些代码，以防有人想要在其眼前看到代码的解决方案

遵循亚历山大的方法解决方案1：

base.html文件

<!doctype html> 
<html lang="es">
<head>
    <title>{% block head_title %}{% endblock %}</title>
    {% block extra_head %}
    {% endblock %}
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>

    {% load static %}


    {% block extra_css %}
    {% endblock %}

</head>

<body {% block body_attributes %}  {% endblock %} >
    {% block body %}

        <div class="page-header header-filter" style="background-image: url({% static "material/img/office2.jpg" %}); background-size: cover; background-position: top center;">
            <div class="container">

                {% if messages %}
                    <div>
                      <strong>Messages:</strong>
                      <ul>
                        {% for message in messages %}
                            <li>{{message}}</li>
                        {% endfor %}
                      </ul>
                    </div>
                {% endif %}

                {% block content%}

                {% endblock %}

            </div>
        </div>



        {% block extra_body %}
        {% endblock %}

    {% endblock %}

    <!--   Core JS Files   -->
    <script src="{% static 'material/js/core/jquery.min.js' %} "> 
    </script>

</body>

</html>

extend.html

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

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

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



    {% load account socialaccount %}
    {% providers_media_js %}

    {% 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 %}

解决方案2：

base.html文件

考虑到@DisneylandSC的评论，我尝试了这个，即使有一种奇怪的方法来解决它，它也能完成这项工作。

<!doctype html>
<html lang="es">
<head>
    <title>{% block head_title %}{% endblock %}</title>
    {% block extra_head %}
    {% endblock %}
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>

    {% load static %}

    {% block extra_css %}
    {% endblock %}

</head>

<body {% block body_attributes %}  {% endblock %} >
    {% block body %}

                {% if messages %}
                    <div>
                      <strong>Messages:</strong>
                      <ul>
                        {% for message in messages %}
                            <li>{{message}}</li>
                        {% endfor %}
                      </ul>
                    </div>
                {% endif %}


                        {% block content_top %}
                            <div class="page-header header-filter" style="background-image: url({% static "material/img/office2.jpg" %}); background-size: cover; background-position: top center;">
                                <div class="container">
                        {% endblock %}

                        {% block content_botton %}
                                </div>
                            </div>
                        {% endblock %}

    {% endblock %}

    {% block extra_body %}
    {% endblock %}

    <!--   Core JS Files   -->
    <script src="{% static 'material/js/core/jquery.min.js' %} "> 
    </script>

</body>

</html>

extend.html

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

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

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

{% block body %}

    {% load account socialaccount %}
    {% providers_media_js %}

    {% block content_top %}
        {{ block.super }}
        <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 %}
    {% block content_botton %}
         {{ block.super }}
    {% endblock %}



{% endblock  %}

基础模板上的Div不会出现在扩展名中

2 个答案: