Flask - base.html 中的引导程序答案

【问题标题】：Flask - Bootstrap in base.htmlFlask - base.html 中的引导程序
【发布时间】：2023-03-10 12:55:01
【问题描述】：

我想将 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，导航栏只会显示在这个站点上。我该如何解决？

【问题讨论】：

标签： python flask flask-bootstrap

【解决方案1】：

问题可能来自您的 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 %}

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

【讨论】：

【解决方案2】：

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

【讨论】：