【Flask/跟着学习】Flask大型教程项目#10：美化

跟着学习（新版）：https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-xi-facelift
回顾上一章：https://blog.csdn.net/weixin_41263513/article/details/85084206

本章内容

• Bootstrap扩展
• 渲染Bootstrap表单
• 渲染博客
• 渲染分页

现在已经专注应用程序的实际逻辑太久了，你可能会 觉得 我们写出来的页面贼丑，是的，我也是这样觉得的，这一章，将会花一点时间让我们的网页变得更加精致 ，显得更加专业

Bootstrap扩展

最受欢迎的CSS框架之一是由Twitter创建的Bootstrap。

以下是使用Bootstrap为您的网页设置样式的一些好处：
在所有主流Web浏览器中看起来相似
处理台式机，平板电脑和手机屏幕尺寸
可定制的布局
风格精美的导航栏，表格，按钮，提醒，弹出窗口等。

现在，有一个名为Flask-Bootstrap的Flask扩展，它提供了一个随时可用的基本模板，先pip安装flask-bootstrap

Flask-Bootstrap需要像大多数其他Flask扩展一样进行初始化
文件：/app/–init–.py

# ...
from flask_bootstrap import Bootstrap

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

初始化扩展后，bootstrap / base.html模板变为可用（此base.html跟我们app/templates里的base.html并不同），并且可以使用extends子句从应用程序模板中引用。

那么我如何适应Bootstrap基础模板呢？我们的想法是使用三级层次结构而不是两层。 bootstrap / base.html模板提供了页面的基本结构，其中包括Bootstrap框架文件。此模板为导出的模板导出几个块，例如标题，导航栏和内容（此处有完整块列表）。我将更改我的base.html模板以从bootstrap / base.html派生，并提供标题，导航栏和内容块的实现。反过来，base.html将为其派生模板导出自己的app_content块以定义页面内容。

下面你可以看看base.html修改它后如何从Bootstrap基础模板继承：
文件：/app/templates/base.html

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

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

{% block navbar %}
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{{ url_for('index') }}">Microblog</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="{{ url_for('index') }}">Home</a></li>
                    <li><a href="{{ url_for('explore') }}">Explore</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if current_user.is_anonymous %}
                    <li><a href="{{ url_for('login') }}">Login</a></li>
                    {% else %}
                    <li><a href="{{ url_for('user', username=current_user.username) }}">Profile</a></li>
                    <li><a href="{{ url_for('logout') }}">Logout</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
{% endblock %}

{% block content %}
    <div class="container">
        {% with messages = get_flashed_messages() %}
        {% if messages %}
            {% for message in messages %}
            <div class="alert alert-info" 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块，导航navbar块和页面内容content块。

导航栏是一个可选块，可用于定义导航栏。对于这个块，我在Bootstrap导航栏文档中修改了示例，以便它在左端包含站点标记，然后是Home和Explore链接。然后，我添加了与页面右边框对齐的配置文件和登录或注销链接

最后，在内容块中我定义了一个顶级容器，在其中我有渲染闪存消息的逻辑，现在它们将显示为Bootstrap警报。接下来是一个新的app_content块，其定义只是为了派生模板可以定义自己的内容

所有页面模板的原始版本都在名为content的块中定义了它们的内容。如上所述，Flask-Bootstrap使用名为content的块，因此我将内容块重命名为app_content。因此，我的所有模板都必须重命名为使用app_content作为其内容块。例如，这里404.html模板的修改版本：
文件：/app/templates/404.html:

{% extends "base.html" %}

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

渲染Bootstrap表单

Flask-Bootstrap有一个很棒的工作就是渲染表格

Flask-Bootstrap不是必须逐个设置表单字段的样式，而是附带一个宏，它接受Flask-WTF表单对象作为参数，并使用Bootstrap样式呈现完整的表单
文件：/app/templates/register.html

{% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block app_content %}
    <h1>Register</h1>
    <div class="row">
        <div class="col-md-4">
            {{ wtf.quick_form(form) }}
        </div>
    </div>
{% endblock %}

顶部附近的import语句与模板侧的Python导入类似。 这会添加一个wtf.quick_form（）宏，它在一行代码中呈现完整的表单，包括对显示验证错误的支持，以及适用于Bootstrap框架的所有样式。
很多页面都需要这样的翻新，可以下载作者网页上的附件来进行参考哦~

渲染博客

呈现单个博客帖子的表示逻辑被抽象为名为_post.html的子模板。 我需要对此模板进行一些小的调整，以便在Bootstrap下看起来很好
文件：/app/templates/_post.html

    <table class="table table-hover">
        <tr>
            <td width="70px">
                <a href="{{ url_for('user', username=post.author.username) }}">
                    <img src="{{ post.author.avatar(70) }}" />
                </a>
            </td>
            <td>
                <a href="{{ url_for('user', username=post.author.username) }}">
                    {{ post.author.username }}
                </a>
                says:
                <br>
                {{ post.body }}
            </td>
        </tr>
    </table>

渲染分页

分页链接是Bootstrap提供直接支持的另一个领域。为此，我再一次参加Bootstrap文档并调整其中一个示例
文件：/app / templates / index.html

    ...
    <nav aria-label="...">
        <ul class="pager">
            <li class="previous{% if not prev_url %} disabled{% endif %}">
                <a href="{{ prev_url or '#' }}">
                    <span aria-hidden="true">&larr;</span> Newer posts
                </a>
            </li>
            <li class="next{% if not next_url %} disabled{% endif %}">
                <a href="{{ next_url or '#' }}">
                    Older posts <span aria-hidden="true">&rarr;</span>
                </a>
            </li>
        </ul>
    </nav>

请注意，在此实现中，当该方向没有任何更多内容时，我将应用禁用状态，而不是隐藏下一个或上一个链接，这将使链接显示为灰色
让我们康康效果！！

多帅哦！