代码之家  ›  专栏  ›  技术社区  ›  Roberto Fernandez Diaz

基模板上的DIV未出现在扩展中

django-templates django
  •  0
  • Roberto Fernandez Diaz  · 技术社区  · 7 年前

    我正在扩展一个模板,容器内容块之前的两个div没有以任何方式显示,我找到的唯一解决方案是将这两个div放在子容器中,但当然,使用extend-then会失去意义。

    有人能告诉我我错过了什么?

    事先谢谢。

    我有以下基本模板: 

    <!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 回复  |  直到 7 年前
        1
  •  1
  •   Alexandr Tatarinov    7 年前

    你的 block 标记是嵌套的,因此当您重写 body 在孩子身上,你会丢失里面所有的代码 身体 从基础模板,包括那两个div。仅覆盖 content 阻止您的孩子并将其他代码放在阻止中 extra_body . 如果你以前需要密码 内容 ,在内部添加另一个块 身体 在名为like的基本模板中 before_content 把它放在孩子身上 load 投入其中。
    另外,你也失去了 if messages 重写后的代码 身体 在子模板中。

        2
  •  0
  •   Roberto Fernandez Diaz    7 年前

    我把代码留在这里,以防有人想看到解决方案,代码就在眼前。

    跟随亚历山德拉 解决方案1:

    基本.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>

    扩展.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:

    基本.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>

    扩展.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  %}
    推荐文章
    Hoshmand Qadir  ·  将数据库中的特定项提取到Django模板中(如果它是特定类型的)
    2 年前
    Game Analysis  ·  模板-循环列表的父详细信息视图(带子级)
    2 年前
    Dicky Raambo  ·  列表视图中的NoReverseMatch与表单
    7 年前
    Dicky Raambo  ·  django从模型中计算数据并在模板上显示
    7 年前
    Dicky Raambo  ·  访问OneToOne关系并传递到django中的模板
    7 年前
    Kurt Peek  ·  在Django模板中,如何指定本身是属性的字典键?
    7 年前
    William  ·  Django Ajax表单提交错误重定向到其他页面
    7 年前
    Jekson  ·  Django:输出与特定用户关联的视频文件
    7 年前
    stanley oguazu  ·  如何在django 2模板中查询主键对象
    7 年前
    kebie  ·  Django:将带有表单的Allath模板加载到div会加载其他内容
    7 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号