11.3 如何为我们的博客列表增加分页导航

一. 修改|-app/-main/views.py

    我们之前访问主页路由时， 会返回数据库中所有的文章， 这样显得页面很庞大复杂， 于是我们对文章进行分页显示。

@main.route('/', methods=['GET', 'POST'])

def index():

    form = PostForm()
    #...
    page = request.args.get('page', 1, type=int)

    pagination = Post.query.order_by(Post.timestamp.desc()).paginate(page, per_page=current_app.config['FLASKY_POSTS_PER_PAGE'], error_out=False)

    posts = pagination.items

    return render_template('index.html', form=form, posts=posts, pagination=pagination)

1. 如果我们访问主页路由， 127.0.0.1:5000， page的值就是默认值1，相当于访问127.0.0.1:5000？page=1；
2. 如果我们访问127.0.0.1:5000？page=2， page的值就是2
3. 在得到页数之后， 我们把原来的all()替换为paginate(), 第一个参数就必填参数page， 第二个参数是每页的记录数， 第三个参数error_out的默认值为True， 如果page超出范围的话返回404； 值为False， 超出范围返回一个空列表。
4. paginate函数返回一个Pagination的类对象， 该分页对象的items属性返回该页的所有记录。

二. 新建|-app/templates/_macros.html

    我们新建一个宏保存在_macros.html里面， 用来显示分页导航， 什么是分页导航？ 看下面这个图我们就明白了：

   

    是不是很眼熟哈哈。

{% macro pagination_widget(pagination, endpoint) %}

<ul class="pagination">

    <li {% if not pagination.has_prev %} class="disabled" {%endif%}>

        <a href="{% if pagination.has_prev %} {{ url_for(endpoint, page=pagination.page-1), **kwargs }} {% else %} # {% endif %}">«</a>

    </li>

    {% for p in pagination.iter_pages() %}

        {% if p %}

            {% if p == pagination.page %}

            <li class="active">

            <a href="{{ url_for(endpoint, page=p, **kwargs) }}">{{ p }}</a>

            </li>

             {% else %}

            <li>

            <a href="{{ url_for(endpoint, page=p, **kwargs) }}">{{ p }}</a>

            </li>

            {% endif %}

        {% else %}

        <li class="disabled"><a href="#">…</a></li>

        {% endif %}

    {% endfor %}

    <li {% if not pagination.has_next %}class="disabled"{% endif %}>

        <a href="{% if pagination.has_next %} {{ url_for(endpoint, page=pagination.page+1, **kwargs) }} {% else %} # {% endif %}">»</a>

    </li>

</ul>

{% endmacro%}

三. 在index.html中使用该宏

{% extends 'base.html' %}

{% import 'bootstrap/wtf.html' as wtf %}

{% import '_macros.html' as macros %}

#...

{% import '_posts.html' %}

{% if pagination %}

<div class="pagination">

    {{ macros.pagination_widget(pagination, '.index') }}

</div>

{% endif %}

四. 在user.html中使用该宏

    方法同上， user路由修改方法也类似index路由的修改， 不再多说。

五. 效果演示

未登录用户访问主页， 显示20篇博客， 页面末端显示分页导航。

已登录用户访问资料页