【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 / .html模板变为可用（此 .html跟我们app/templates里的 .html并不同），并且可以使用extends子句从应用程序模板中引用。

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

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

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

{% block   %}
    {% if   %}{{   }} - 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 / .html派生此模板，然后分别实现标题 块，导航navbar块和页面内容content块。

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

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

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

{% extends \" .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 \" .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>

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

多帅哦！