Question

Flask-Bootstrap 需要像大多数其他 Flask 插件一样被初始化：

app/ init .py : Flask-Bootstrap 实例。

# ...
from flask_bootstrap import Bootstrap

app = Flask(__name__)
# ...
bootstrap = Bootstrap(app)

在初始化插件之后， bootstrap/base.html 模板就会变为可用状态，你可以使用 extends 子句从应用模板中引用。

但是，回顾一下，我已经使用了 extends 子句来继承我的基础模板，这使我可以将页面的公共部分放在一个地方。 base.html 模板定义了导航栏，其中包含几个链接，并且还导出了一个 content 块。 应用中的所有其他模板都从基础模板继承，并为内容块提供页面的主要内容。

那么我怎样才能适配 Bootstrap 基础模板呢？ 解决方案是从使用两个层级到使用三个层级。 bootstrap/base.html 模板提供页面的基本结构，其中引入了 Bootstrap 框架文件。 这个模板为派生的模板定义了一些块，例如 title ， navbar 和 content （参见块的 完整列表 ）。 我将更改 base.html 模板以从 bootstrap/base.html 派生，并提供 title ， navbar 和 content 块的实现。 反过来， base.html 将为从其派生的模板导出 app_content 块以定义页面内容。

下面你可以看到从 Bootstrap 基础模板派生的 base.html 的代码。 请注意，此列表不包含导航栏的整个 HTML，但你可以在 GitHub 上或下载本章的代码来查看完整的实现。

app/templates/base.html ：重新设计后的基础模板。

{% extends 'bootstrap/base.html' %}

{% block title %}
    {% if title %}{{ title }} - Microblog{% else %}Welcome to Microblog{% endif %}
{% endblock %}

{% block navbar %}
    <nav>
        ... navigation bar here (see complete code on GitHub) ...
    </nav>
{% endblock %}

{% block content %}
    <div>
        {% with messages = get_flashed_messages() %}
        {% if messages %}
            {% for message in messages %}
            <div role="alert">{{ message }}</div>
            {% endfor %}
        {% endif %}
        {% endwith %}

        {# application content needs to be provided in the app_content block #}
        {% block app_content %}{% endblock %}
    </div>
{% endblock %}

从中你可以看到我如何从 bootstrap/base.html 派生此模板，接下来分别实现了页面标题、导航栏和页面内容的这三个模块。

title 块需要使用 <title> 标签来定义用于页面标题的文本。 对于这个块我简单地挪用了原始基本模板中 <title> 标签内部的逻辑。

navbar 块是一个可选块，用于定义导航栏。 对于此块，我调整了 Bootstrap 导航栏文档中的示例，以便它在左侧展示网站品牌，跟着是 Home 和 Explore 的链接。 然后我添加了个人主页和登录或注销链接并使其与页面的右边界对齐。 正如我上面提到的，我在上面的例子中省略了 HTML，但是你可以从本章的下载包中获得完整的 base.html 模板。

最后，在 content 块中，我定义了一个顶级容器，并在其中设定了呈现闪现消息的逻辑，这些消息现在将显示为 Bootstrap 警示的样式。 接下来是一个新的 app_content 块，这个块用于从其派生的模板来定义他们自己的内容。

所有页面模板的原始版本在名为 content 的块中定义了它们的内容。 正如你在上面看到的，Flask-Bootstrap 使用名为 content 的块，所以我将我的内容块重命名为 app_content 。 所以我所有的模板都必须重命名为使用 app_content 作为它们的内容块。 例如，这是 404.html 模板的修改后版本的展示：

app/templates/404.html ：重新设计后的 404 错误模板。

{% extends "base.html" %}

{% block app_content %}
    <h1>File Not Found</h1>
    <p><a href="{{ url_for('index') }}">Back</a></p>
{% endblock %}