Div на базовом шаблоне не отображается в расширении - PullRequest
Новая
       2

Div на базовом шаблоне не отображается в расширении

0 голосов
/ 20 мая 2018

Я расширяю шаблон, и два элемента div перед блоком содержимого контейнера не отображаются ни в одном из способов. Единственное решение, которое я нашел, это поместить эти два элемента div в дочерний элемент, но, конечно, он потеряетсмысл использовать расширение тогда.

Кто-то может сказать мне, что мне не хватает?

Заранее спасибо.

У меня есть следующий базовый шаблон: 

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

Ответы [ 2 ]

0 голосов
/ 21 мая 2018

Я оставляю здесь код на случай, если кто-то захочет увидеть решение с кодом перед глазами

Следуя подходу Александра Решение 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>

exte.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>

exte.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  %}
0 голосов
/ 21 мая 2018

Ваши теги block являются вложенными, поэтому при переопределении body в child вы теряете весь код внутри body из базового шаблона, включая эти два элемента div.Переопределите только блок content в вашем ребенке и поместите другой код в блок extra_body.Если вам нужен этот код до content, добавьте еще один блок внутри body в базовый шаблон с именем, например before_content, и переопределите его в child, чтобы поместить в него этот load.
PS Вы также потеряли if messages код после переопределения body в дочернем шаблоне.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...