1

我想将 Bootstrap 添加到我的网站。我有 base.html 和其他文件，它们继承自 base.html，但在我的 base.html 中，我希望有导航栏，它将显示在每个站点上。不幸的是，添加一些引导代码后，它没有显示，但是如果我将此代码添加到 index.html，它将显示。

我的base.html：

{% extends "bootstrap/base.html" %}
{% block head %}
    {{ super() }}
    {% if title %}
    <title> {{ title }} - Book Blog</title>
    {% else %}
    <title> Welcome to Book Blog!</title>
    {% endif %}
{% endblock %}

{% block navbar %}
Microblog: 
    <ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="{{ url_for('index') }}">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('show_books') }}">Books</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('login') }}">Login</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
    </li>
</ul>
{% endblock %}

<body>

<hr>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
    {% for message in messages %}
    <li>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</body>

所以在这种情况下，导航栏不显示。正如我上面写的，如果我将导航类添加到 index.html，导航栏只会显示在这个网站上。我该如何解决？

4

2 回答 2

2

问题可能来自您的index.html页面。原则上，您的索引页面必须继承自base.html模板。应该给这个：

{% extends "base.html" %}
{% block title %}Welcome to Book Blog!{% endblock %}

{% block content %}
    <div>
        <h1>Your content</h1>
    </div>
{% endblock %}

您的模板base.html也可以稍微改变：

{% extends "bootstrap/base.html" %}
{% block head %}
    {{ super() }}
    {% if title %}
        <title> {{ title }} - Book Blog</title>
    {% else %}
        <title> Welcome to Book Blog!</title>
    {% endif %}
{% endblock %}

{% block body %}
<body>

{% block navbar %}
Microblog: 
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="{{ url_for('index') }}">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('show_books') }}">Books</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('login') }}">Login</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
    </li>
</ul>
{% endblock %}

    <hr>
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <ul>
                {% for message in messages %}
                    <li>{{ message }}</li>
                {% endfor %}
           </ul>
       {% endif %}
    {% endwith %}
    {% block content %}{% endblock %}
</body>
{% endblock %}

我在模板的正文标签中添加了一个块标签。现在您应该在所有希望具有相同结构（导航栏等）的页面中继承此模板

于 2018-11-14T10:10:44.953 回答
0

您可能需要在每个页面上导入引导库（Js、Css）。我建议编写一个<title></title>可以在每个页面中导入的文件。属性也是如此：为导航栏编写一个文件，并在需要导航栏时将其导入“基本 Html”。希望我能帮上忙

于 2018-11-13T18:14:14.600 回答