Django开发个人博客项目-(7) 分页功能实现

0.216字数 269阅读 10

欢迎访问我的博客:小羊驼的部落阁
现在我们的博客可能只有几篇文章,因此可以全部在首页展示出来,随着博客数量的增加,当达到几十上百篇时,全部展现在首页是不显示也是不友好的,这个时候我们就需要对博客进行分页了。django有它自带的分页功能:django-pure-pagination

1、安装

在虚拟环境中通过pip安装:

pip install django-pure-pagination

2、设置

在setting.py中设置:

INSTALLED_APPS = (
    ...
    'pure_pagination',
)
PAGINATION_SETTINGS = {
    'PAGE_RANGE_DISPLAYED': 3,    #中间显示的个数
    'MARGIN_PAGES_DISPLAYED': 2,  #两边显示的个数

    'SHOW_FIRST_PAGE_WHEN_INVALID': True,
}

用于展示底部分页栏中数量的显示,可以对其进行更改尝试不同效果。

3、视图函数

from pure_pagination import PageNotAnInteger, Paginator

class IndexView(View):
    def get(self, request):
        all_blog = Blog.objects.all().order_by('-id')

        # 分页
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_blog, 5, request=request)  #5为每页展示的博客数目
        all_blog = p.page(page)

        return render(request, 'index.html', {
            'all_blog': all_blog,
        })

4、前端展示

在for循环时,需要在all_blog后多加个object_list:

{% for blog in all_blog.object_list %}
    ...
{% endfor %}

然后将分页展示下的内容替换成如下,这里面参数具体含义,可以参考前面给到的官方文档:

<nav class="pagination" style="opacity: 1; display: block;">
                {% if all_blog.has_previous %}
                    <a class="extend prev" rel="prev" href="?{{ all_blog.previous_page_number.querystring }}"><i
                            class="fa fa-angle-left"></i></a>
                {% endif %}
                {% for page in all_blog.pages %}
                    {% if page %}
                        {% ifequal page all_blog.number %}
                            <a class="page-number current" href="?{{ page.querystring }}">{{ page }}</a>
                        {% else %}
                            <a class="page-number" href="?{{ page.querystring }}">{{ page }}</a>
                        {% endifequal %}
                    {% else %}
                        <span class="space">…</span>
                    {% endif %}
                {% endfor %}
                {% if all_blog.has_next %}

                    <a class="extend next" rel="next" href=" ?{{ all_blog.next_page_number.querystring }}"><i
                            class="fa fa-angle-right"></i></a>
                {% endif %}
            </nav>

5、显示效果

可以在后台多添加几篇博客,看看显示效果。

推荐阅读更多精彩内容