Question

感谢您的帮助！所以，我正在尝试创建一个带有Bootstrap导航栏和正文内容块的简单布局，并且工作正常。但是，当我把它扩展到一个孩子时，无论我对孩子做出什么改变，都没有出现！我将发布我正在使用的两个模板。

的layout.html

    <!doctype html>
{% extends "bootstrap/base.html" %}
<html>
    <head>
        <title>{% block title %}{% endblock %} </title>
    </head>
<body>
{% block navbar %}
<nav class="navbar navbar-inverse navbar navbar-fixed-stop" role="navigation" style="border-radius:0px;">
        <div class="container-fluid">
            <div class="navbar-header"><a class="navbar-brand" href="#">BGP Monitor</a></div>
            <ul class = "nav navbar-nav">
                {% if g.user.is_authenticated %}
                <li><a href ="{{ url_for('admin_control') }}">Admin Panel</a></li>
                {% endif %}
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {% if g.user.is_authenticated %}
                <li><a href ="{{ url_for('logout') }}">Logout</li>
                {% else %}
                <li><a href ="{{ url_for('login') }}">Login</li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>
{% endblock %}
<div class="container-fluid" id="form">
    {% block container %}{% endblock %}
</div>
</body>
</html>

孩子：

{% extends "layout.html" %}
<html>
<head></head>
<body>
<h3>aaa</h3>
{% block container %}
<div class="collapse navbar-collapse" id="container">
    {{ super() }}
<form action="{{ url_for('login')}}" class="navbar-form navbar-right" method="POST">
        {{ form.hidden_tag() }}
        <div class="form-group">
        {{ form.email(class="form-control", placeholder="Username") }}
        </div>
        <div class="form-group">
        {{ form.password(class="form-control", placeholder="Password") }}
        </div>
        <div class="form-group">
        <button class="btn btn-default" type="submit">Sign In</button>
        </div>
</form>
</div>
</div>
{% endblock %}
</body>

导航栏显示，但表单根本没有显示。就好像孩子不存在一样。有任何想法吗？谢谢

P.S：所以，我改为：的layout.html

<!doctype html>
<html>
    <head>
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
<body>
<nav class="navbar navbar-inverse navbar navbar-fixed-stop" role="navigation" style="border-radius:0px;">
        <div class="container-fluid">
            <div class="navbar-header"><a class="navbar-brand" href="#">BGP Monitor</a></div>
            <ul class = "nav navbar-nav">
                {% if g.user.is_authenticated %}
                <li><a href ="{{ url_for('admin_control') }}">Admin Panel</a></li>
                {% endif %}
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {% if g.user.is_authenticated %}
                <li><a href ="{{ url_for('logout') }}">Logout</li>
                {% else %}
                <li><a href ="{{ url_for('login') }}">Login</li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid" id="container">
    {% block container %}{% endblock %}
</div>
</body>
</html>

这个孩子：

{% extends "layout.html" %}
{% block container %}
<form action="{{ url_for('login')}}" class="navbar-form navbar-right" method="POST">
        {{ form.hidden_tag() }}
        <div class="form-group">
        {{ form.email(class="form-control", placeholder="Username") }}
        </div>
        <div class="form-group">
        {{ form.password(class="form-control", placeholder="Password") }}
        </div>
        <div class="form-group">
        <button class="btn btn-default" type="submit">Sign In</button>
        </div>
</form>
{% endblock %}

这样，没有重复{％extend ...％}。它现在显示了表单，但WHOLE div是可点击的，使它几乎无用。有什么想法吗？

Answer 1

您不应该在孩子中拥有所有<html><head><body>标签。它应该只是：

{% extends "layout.html" %}

{% block container %}
<h3>aaa</h3>
<div class="collapse navbar-collapse" id="container">
    {{ super() }}
<form action="{{ url_for('login')}}" class="navbar-form navbar-right" method="POST">
        {{ form.hidden_tag() }}
        <div class="form-group">
        {{ form.email(class="form-control", placeholder="Username") }}
        </div>
        <div class="form-group">
        {{ form.password(class="form-control", placeholder="Password") }}
        </div>
        <div class="form-group">
        <button class="btn btn-default" type="submit">Sign In</button>
        </div>
</form>
</div>
</div>
{% endblock %}

注意我是如何将<h3>aaa</h3>代码移到block内的。

接下来，每次渲染只能进行一次{% extends ... %}调用（无法扩展扩展名）。因此，您需要将您的孩子合并到layout.html，为每个视图制作单独的布局。

或者，您可以更改layout.html以使用包含，每个视图只保留一个{% extends... %}：

的layout.html

{% include "bootstrap/base.html" %}

{% block navbar %}
<nav class="navbar navbar-inverse navbar navbar-fixed-stop" role="navigation" style="border-radius:0px;">
        <div class="container-fluid">
            <div class="navbar-header"><a class="navbar-brand" href="#">BGP Monitor</a></div>
            <ul class = "nav navbar-nav">
                {% if g.user.is_authenticated %}
                <li><a href ="{{ url_for('admin_control') }}">Admin Panel</a></li>
                {% endif %}
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {% if g.user.is_authenticated %}
                <li><a href ="{{ url_for('logout') }}">Logout</li>
                {% else %}
                <li><a href ="{{ url_for('login') }}">Login</li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>
{% endblock %}
<div class="container-fluid" id="form">
    {% block container %}{% endblock %}
</div>

同样，请注意<html> etc中没有重复的layout.html代码。这些已经在bootstrap/base.html

Jinja2儿童内容未显示

1 个答案: