【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>

請注意，在此實現中，當該方向沒有任何更多內容時，我將應用禁用狀態，而不是隱藏下一個或上一個鏈接，這將使鏈接顯示爲灰色
讓我們康康效果！！

多帥哦！