編寫博客前臺

博客前臺需要開放給所有用戶，這裏包括顯示文章列表、博客信息、文章內容和評論等功能功能。

分頁顯示文章列表

為了在主頁顯示文章列表，我們要先在渲染主頁模板的index視圖的數據庫中獲取所有文章記錄並傳入模板：

blueprints\blog.py：

from personalBlog.models import Post

@blog_bp.route(‘/‘)
def index():
    posts = Post.query.order_by(Post, timestamp.desc()).all()
    return render_template(‘
 
blog/index.html‘, posts = posts)

在主頁模板中，我們使用for語句叠代所有文章記錄，一次渲染文章標題、發表時間和正文，如下所示：

personalBlog/templates/blog/index.html：渲染文章列表

{% block content %}
    <div class="page-header">
        <h1 class="display-3">{{ admin.blog_title|default(‘Blog Title‘) }}</h1>
        <
 
h4 class="text-muted">&nbsp;{{ admin.blog_sub_title|default(‘Blog Subtitle‘ }}</h4>
    </div>
    <div class="row">
        <div class="col-sm-8">
            {% if posts %}
                {% for post in posts %}
                    <h3 class="text-primary"><
 
a href="{{ url_for(‘.show_post‘, post_id=post.id) }}">{{ post.title }}</a></h3>
                    <P>
                        {{ post.body|striptags|truncate }}
                        <small><a href="{{ url_for(‘.show_post‘, post_id=post.id) }}">Read More</a></small>
                    </P>
                    <small>
                        Comments:<a href="{{ url_for(‘.show_post‘, post_id=post.id) }}#comments">{{ post.comments|length }}</a>&nbsp;&nbsp
                        Category:<a
                            href="{{ url_for(‘.show_category‘, category_id=post.category.id }}">{{ post.category.name }}</a>
                        <span class="float-right">{{ moment(post.timestamp).format(‘LL‘) }}</span>
                    </small>
                    {% if not loop.last %}
                        <hr>
                    {% endif %}
                {% endfor %}
            {% else %}
                <div class="tip">
                    <h5>No posts yet.</h5>
                    {% if current_user.is_authenticated %}
                        <a href="{{ url_for(‘admin.new_post‘) }}">Write Now</a>
                    {% endif %}
                </div>
            {% endif %}
        </div>

這裏的.show_post是指blog藍本下的.show_post視圖函數，在藍本內部，是可以簡寫的（省略藍本名稱）

在for循環的外層，我們添加一個if判斷，如果posts不包含文章，就顯示一個“No posts”提示。如果當前用戶已經登錄，還會在提示文字下面顯示一個指向新建文章頁面的鏈接。a標簽將文章標題渲染為鏈接，鏈接中包含文章正文對應的URL。

我們隊文章正文使用了truncate過濾器，它會截取正文開頭一部分（默認為255個字符）作為文章摘要。在truncate過濾器中，默認的結束符號為“...”，你可以使用end關鍵字指定為中文省略號“……”。為了讓排版更統一，文章的正文摘要沒有使用safe過濾器，默認顯示無樣式的文章HTML源碼。我們附加了striptags過濾器以濾掉文章正文中的HTML標簽。

在文章摘要後面，我們還添加了一個指向文章頁面（show_post視圖）的Read More按鈕，同樣的，文章標題也添加了指向文章頁面的鏈接。另外，每一個文章摘要下方會使用<hr>添加分隔線，我們通過判斷loop.last的值來避免在最後一個條目後添加分隔線。

flask run命令執行時就會執行app.run()，所以在腳本中可以不寫app.run()。

因為已經生成了虛擬數據，包含50篇文章。現在運行程序，首頁會顯示一個很長的文章列表，根據創建的隨機日期排序，最新發表的排在上面，如下所示：

開始時提示404錯誤，是因為創建app的時候，沒有正確註冊blog藍本，導致blog/index.html沒有被正確的路由

如果所有的文章都在主頁顯示，無疑將會延長頁面加載時間。而且用戶需要拖動滾動條來瀏覽文章，太長的網頁會讓人感到沮喪，從而降低用戶體驗度。更好的做法是對文章數據進行分頁處理，每一頁值顯示少量的文章，並在頁面底部顯示一個分頁導航條，用戶通過單擊分頁導航上的頁數按鈕來訪問其他頁面的文章。Flask-SQLAlchemy提供了簡單的分頁功能，使用paginate()查詢方法可以分頁獲取文章記錄，下面來學習如何使用。

1、獲取分頁記錄

添加分頁支持後的index視圖，如下所示

personalBlog/blueprints/blog.py：對文章記錄進行分頁處理

@blog_bp.route(‘/‘)
def index():
    page = request.args.get(‘page‘, 1, type = int) #從查詢字符串獲取當前頁數
    per_page = current_app.config[‘PERSONALBLOG_POST_PER_PAGE‘] #每頁數量
    pagination = Post.query.order_by(Post.timestamp.desc()).paginate(page, per_page = per_page) #分頁對象
    posts = pagination.items #當前頁數的記錄列表
    return render_template(‘blog/index.html‘, pagination = pagination, posts = posts)

為了實現分頁，我們把之前的查詢執行函數all()換成了paginate()，它接收的兩個最主要的參數分別用來決定把記錄分成幾頁（per_page），返回哪一頁的記錄（page）。page參數代表當前請求的頁數，我們從請求的查詢字符串（request.args）中獲取，如果沒有設置則使用默認值1，指定int類型可以保證在參數類型錯誤時使用默認值；per_page參數設置每頁返回的記錄數量，為了方便統一修改，這個值從配置變量PERSONAL_POST_PER_PAGE獲取。

另外，可選的error_out參數用於設置當查詢的頁數超出總頁數時的行為。當error_out設為True時，如果頁面超過最大值，page或per_page為負數或非整數會返回404錯誤（默認值）；如果設為False則返回空記錄。可選的max_per_page參數則用來設置每頁數量的最大值。

如果沒有指定page和per_page參數，Flask-SQLAlchemy會自動從查詢字符串中獲取對應查詢參數（page和per_page）的值，如果沒有獲取到，默認的page值為1，默認的per_page值為20。

調用查詢方法paginate()會返回一個Pagination類實例，它包含分頁的信息，我們將其稱為分頁對象。

對這個pagination對象調用items屬性會以列表的形式返回對應頁數（默認為第一頁）的記錄。在訪問這個URL時，如果在URL後附加了查詢參數page來指定頁數，例如127.0.0.1:5000/?page=2，這時發起請求調用items變量將會獲得第二個10條記錄。

除了通過查詢字符串獲取頁數，還可以直接將頁數作為URL的一部分。下面的視圖函數就是將page作為URL變量：

@blog_bp.route(‘/‘, defaults={‘page‘:1})
@blog_bp.route(‘/page/<int:page>‘)
def index(page):
    pagination = Post.query.order_by(Post.timestamp.desc()).paginate(page, per_page=current_app.config[‘PERSONALBLOG_POST_PER_PAGE‘])
    posts = pagination.items #當前頁數的記錄列表
    return render_template(‘blog/index.html‘, pagination = pagination, posts = posts)

第一個路由使用defaults字典為page變量指定默認值，當訪問127.0.0.1:5000/時，page取默認值1，返回第一頁的記錄；當訪問127.0.0.1:5000/page/2時則會返回第2頁的記錄。註意，我們為URL規則中的page變量使用了int轉換器，以便接收正確的整形頁數值。

1、 渲染分頁導航部件

我們不能讓用戶通過在URL中附加查詢字符串來實現分頁瀏覽，而是應該在頁面底部提供一個導航部件。這個分頁導航部件應該包含上一頁、下一頁、以及跳轉到每一頁的按鈕，每個按鈕都包含指向主頁的URL，而且URL中都添加了對應的查詢參數page的值。使用paginate()方法時，它會返回一個Pagination類對象，這個類包含很多用於實現分頁導航的方法和屬性，我們可以用它來獲取所有關於分頁的信息，如下所示

Pagination類屬性：

對於博客來說，設置一個簡單的包含上一頁、下一頁按鈕的分頁部件就足夠了。

在視圖函數中，我們將分頁對象pagination傳入模板，然後在模板中使用它提供的方法和屬性來構建分頁部件。為了便於重用，我們可以創建一個pager()宏：

{% macro pager(pagination, fragment=‘‘) %}
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
            <a class="page-link" href="{{ url_for(request.endpoint, page=pagination.prev_num, **kwargs) + fragment if pagination.has_prev }}">
                <span aria-hidden="true">&larr;</span>Newer
            </a>
        </li>
        <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
            <a class="page-link" href="{{ url_for(request.endpoint, page=pagination.next_num, **kwargs) + fragment if pagination.has_next }}">
                Older <span aria-hidden="true">&rarr;</span>
            </a>
        </li>
    </ul>

</nav>
{% endmacro %}

這個宏接收分頁對象pagination和URL片段以及其他附加的關鍵字參數作為參數。我們根據pagination.has_prev和pagination.has_next屬性來選擇渲染按鈕的禁用狀態，如果這兩個屬性返回False，那麽就為按鈕添加disabled類，同時會用#作為a標簽中的URL。分頁按鈕中的URL使用request.endpoint獲取當前請求的端點，而查詢參數page的值從pagination.prev_num（上一頁的頁數）和pagination.next_num（下一頁的頁數）屬性獲取。

在使用時，從macros.html模板中導入並在需要顯示分頁導航的位置調用即可，傳入分頁對象作為參數：

templates/blog/index.html：

{% from "macros.html" import pager %}

{% if posts %}
    {% for post in posts %}
        …
    {% endfor %}
    <div class="page-footer">{{ pager(pagination) }}</div>

把settings.py文件中的PERSONALBLOG_POST_PER_PAGE變量從10改為4

訪問127.0.0.1:5000

實際上，Bootstrap-Flask已經內置了一個包含同樣功能，而且提供更多自定義設置的render_pager()宏。除此之外，他還提供了一個render_pagination()宏，可以用來渲染一個標準的Bootstrap Pagination分頁導航部件。這兩個宏的用法和我們上面編寫的pager()宏基本相同，render_pagination()宏支持的常用參數如下表所示，唯一的區別是render_pager()宏沒有ellipses參數。

render_pagination()宏的常用參數：

在程序中我們將使用這兩個宏來渲染分頁導航部件，他們要從boostrap/pagination.html模板中導入，比如：

index.html：

{% from ‘bootstrap/pagination.html‘ import render_pagination %}

    {% for post in posts %}
        …
    {% endfor %}
    <div class="page-footer">{{ render_pagination(pagination) }}</div>

使用render_pagination()宏渲染後的標準分頁導航部件如下所示：

flask實戰-個人博客-編寫博客前臺