网站实现简单分页

2020年1月8日 16:19 阅读 523 评论 0

当博客上发布的文章越来越多时,通常需要进行分页显示,以免所有的文章都堆积在一个页面,影响用户体验。Django 内置的 Pagination 能够帮助我们实现简单的分页功能。

Paginator 类的常用方法

分页功能由 Django 内置的 Paginator 类提供,这个类位于 django.core.paginator 模块,需要使用它时,只需在适当的地方导入这个类即可:

from django.core.paginator import Paginator 下面的代码摘自 Django 的官方文档中 Pagination 的示例,只需实例化一个 Paginator 对象,并在实例化时传入一个需要分页的列表对象,就可以得到分页后的对象。

# 对 item_list 进行分页,每页包含 2 个数据。
>>> item_list = ['john', 'paul', 'george', 'ringo']
>>> p = Paginator(item_list, 2)

取特定页的数据:

# 取第 2 页的数据
>>> page2 = p.page(2)
>>> page2.object_list
['george', 'ringo']

查询特定页的当前页码数:

>>> page2.number
2

查看分页后的总页数:

>>> p.num_pages
2

查看某一页是否还有上一页,以及查询该页上一页的页码:

# 查询第二页是否还有上一页
>>> page2.has_previous()
True

# 查询第二页上一页的页码
>>> page2.previous_page_number()
1

查看某一页是否还有下一页,以及查询该页下一页的页码:

# 查询第二页是否还有下一页
>>> page2.has_next()
False

# 查询第二页下一页的页码
>>> page2.next_page_number()
Traceback (most recent call last):
...
EmptyPage: That page contains no results

更多方法和属性请参阅 Django Pagination 的官方文档。

用 Paginator 给文章列表分页

使用上面的一些方法,我们可以实现一个类似于 Django 官方博客一样的简单分页效果,效果如下。

Django官方博客简单分页效果

这里,Django 的官方文档中给出了一个在视图函数中对列表进行分页的示例,这个视图函数获取一个联系人列表并对其分页:

from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.shortcuts import render

def listing(request):
    contact_list = Contacts.objects.all()
    paginator = Paginator(contact_list, 25) # 每页显示 25 个联系人

    page = request.GET.get('page')
    try:
        contacts = paginator.page(page)
    except PageNotAnInteger:
        # 如果用户请求的页码号不是整数,显示第一页
        contacts = paginator.page(1)
    except EmptyPage:
        # 如果用户请求的页码号超过了最大页码号,显示最后一页
        contacts = paginator.page(paginator.num_pages)

    return render(request, 'list.html', {'contacts': contacts})

这就是在视图函数中使用分页的代码逻辑,你可以把它当做一个模板应用于自己的任何需要分页的视图函数。不过在我们的博客项目中,我们不必写这些代码了。回顾在 Django 官方推荐的姿势:类视图 中的内容,我们已将函数视图转换成了类视图。而类视图 ListView 已经帮我们写好了上述的分页逻辑,我们只需通过指定 paginate_by 属性来开启分页功能即可,即在类视图中指定 paginate_by 属性的值:

blog/views.py

class IndexView(ListView):
    model = Post
    template_name = 'blog/index.html'
    context_object_name = 'post_list'
    # 指定 paginate_by 属性后开启分页功能,其值代表每一页包含多少篇文章
    paginate_by = 10

这里我们设置了每 10 篇文章一页。

在模板中设置分页导航 接下来便是在模板中设置分页导航,比如上一页、下一页的按钮,以及显示一些页面信息。我们这里设置和 Django 官方博客那样的分页导航样式(具体的样式见上图)。ListView 传递了以下和分页有关的模板变量供我们在模板中使用:

paginator ,即 Paginator 的实例。 page_obj ,当前请求页面分页对象。 is_paginated,是否已分页。只有当分页后页面超过两页时才算已分页。 object_list,请求页面的对象列表,和 post_list 等价。所以在模板中循环文章列表时可以选 post_list ,也可以选 object_list。 模板中使用示例:

templates/blog/index.html

{% if is_paginated %}
<div class="pagination-simple">
  <!-- 如果当前页还有上一页,显示一个上一页的按钮 -->
  {% if page_obj.has_previous %}
    <a href="?page={{ page_obj.previous_page_number }}">上一页</a>
  {% endif %}
  <!-- 显示当前页面信息 -->
  <span class="current">{{ page_obj.number }} 页 / 共 {{ paginator.num_pages }}</span>
  <!-- 如果当前页还有下一页,显示一个下一页的按钮 -->
  {% if page_obj.has_next %}
    <a href="?page={{ page_obj.next_page_number }}">下一页</a>
  {% endif %}
</div>
{% endif %}

其中 {{ }} 模板变量中的内容,其含义已在文章开头部分的 Paginator 类的常用方法中已有介绍。另外还要注意一点,请求哪一个页面通过 page 查询参数传递给 django 视图,django 会根据 page 的值返回对应页面的文章列表,所以上一页和下一页超链接的 href 属性指向的 url 带上了 page 查询参数。

最终我们得到如下的分页效果: 当然这只是一个简单示例,分页导航处的视觉效果并不是很好看,你可以自行为其添加 CSS 样式使其看上去更加美观。

完善分页功能

我们实现了一个简单的分页导航。但效果有点差强人意,我们只能点上一页和下一页的按钮进行翻页。比较完善的分页效果应该像下面这样,但想实现这样一种效果,Django Pagination 内置的 API 已无能为力。接下来我们将通过拓展 Django Pagination 来实现下图这样比较完善的分页效果。

分页效果概述 一个比较完善的分页效果应该具有以下特性,就像上图展示的那样,很多网站都采用了类似这种的分页导航方式。

始终显示第一页和最后一页。 当前页码高亮显示。 显示当前页码前后几个连续的页码。 如果两个页码号间还有其它页码,中间显示省略号以提示用户。

扩展功能参考造梦人物的博客。

分页思路 如果需要自己来实现分页效果,我们会怎么做呢?先来分析一下导航条的组成部分,可以看到整个分页导航条其实可以分成 七个部分:

第 1 页页码,这一页需要始终显示。 第 1 页页码后面的省略号部分。但要注意如果第 1 页的页码号后面紧跟着页码号 2,那么省略号就不应该显示。 当前页码的左边部分,比如这里的 3-4。 当前页码,比如这里的 5。 当前页码的右边部分,比如这里的 6-7。 最后一页页码前面的省略号部分。但要注意如果最后一页的页码号前面跟着的页码号是连续的,那么省略号就不应该显示。 最后一页的页码号。 因此我们的思路是,在视图中依据上述规则生成页码列表,然后在模板中循环显示页码列表就可以了。有了思路,实现起来其实也并不很难。不过对于这类常见需求,别人早就帮我们实现好了,本着不重复造轮子的原则,直接拿来用就好。

第一个 Django 第三方拓展:django-pure-pagination

我们第一次开始接触 django 第三方拓展,在此之前我们一直都基于 django 本身我们提供的功能在开发,然而 django 强大的地方就在于海量的第三方应用供我们挑选,几乎大部分 web 开发中的需求,django 都能找到他人已经写好的第三方应用,拿来即用。

事实上,正确的 django 开发姿势应该是这样的:

充分理解你的需求,想一想,如果自己实现,我会怎么做? 通过 Google、GitHub、开发者社区论坛等调研已有的实现类似需求的应用 拿来即用,并尝试理解他人是如何实现这个功能的 以我们的分页功能举例:

首先我们上面分析了分页需求的实现。然后我在 GitHub 上通过 django pagination 关键词进行搜索,在比较了多个 star 数比较高的项目后,发现 django-pure-pagination 文档最清晰,使用最简单,因此决定将这个应用集成到我们的博客来。值得一提的是,尽管这个应用显示作者最后一次更新代码在 4 年前,但我粗略浏览了一下源码,发现其依赖的 django api 4 年来异常稳定,所以确保能在 django 2.2 中使用。

接下来我们就来使用它,首先安装它:

pip install django-pure-pagination

然后将它注册到 INSTALLED_APPS 里:

INSTALLED_APPS = [
    # ...
    'pure_pagination',  # 分页

    'blog.apps.BlogConfig',  # 注册 blog 应用
    'comments.apps.CommentsConfig',  # 注册 comments 应用
]

修改一下 IndexView,让它继承 django-pure-pagination 提供的 PaginationMixin,这个混入类将为我们提供上述提到的分页功能。

from pure_pagination.mixins import PaginationMixin
class IndexView(PaginationMixin, generic.ListView):
    model = Article
    template_name = 'index.html'
    context_object_name = 'articles'
    paginate_by = 2
    paginate_orphans = 4

然后我们可以在 common.py 配置中配置一下分页的效果,这是 django-pure-pagination 提供的配置项,用于个性化配置分页效果:

# django-pure-pagination 分页设置
PAGINATION_SETTINGS = {
    'PAGE_RANGE_DISPLAYED': 4, # 分页条当前页前后应该显示的总页数(两边均匀分布,因此要设置为偶数),
    'MARGIN_PAGES_DISPLAYED': 1, # 分页条开头和结尾显示的页数
    'SHOW_FIRST_PAGE_WHEN_INVALID': True, # 当请求了不存在页,显示第一页
}

PAGE_RANGE_DISPLAYED是将显示的当前页面附近的页面数(默认为10)

MARGIN_PAGES_DISPLAYED是将显示的第一页和最后一页附近的页数(默认为2)

如果您只想在提供无效页面而不是404错误时仅显示第一页,则将SHOW_FIRST_PAGE_WHEN_INVALID设置为True。

在模板中写入分页html文件: psot.html:

<!-- PAGINATION -->
{# The following renders the pagination html #}
{% include "blog/_pagination.html" %}

重构后的前端界面样式

_pagination.html:

    {% load  comment_tags %}
    <!-- BLOG POSTS -->
    {% for article in articles %}
    <!-- POST -->
    <div class="card card-horizontal">
        <div class="card-body">
            <div class="card-horizontal-left">
                <div class="card-category">
                    <span class="badge badge-warning">
                    <a class="cate" href="/category/{{ article.category.slug }}"><i class="fa fa-book mr-1" aria-hidden="true"></i>&nbsp;{{ article.category.name }}</a>
                    </span>
                </div>
                <h3 class="card-title"><a href="/article/{{ article.slug }}" target="_blank">{{ article.title }}</a></h3>
                <div class="card-excerpt">
                    <p class="d-none d-sm-block mb-2 f-15">{{ article.summary_to_markdown|safe }} </p>
                </div>
                <div class="card-horizontal-meta">
                    <div class="freen-author-meta">
                        <div style="width: 1.5rem;">
                        <a href=" " class="author-meta">
                        {% if article.author.socialaccount_set.exists and article.author.avatar.url == '/media/avatar/default.png' %}
                        <img style="border-radius: 100%;" src="{{ article.author.socialaccount_set.all.0.get_avatar_url }}" alt="{{ article.author }}">
                        {% else %}
                        <img style="border-radius: 100%;" src="{{ article.author.avatar.url }}" alt="{{ article.author }}">
                        {% endif %}
                        </a>
                        </div>
                        <a class="author-meta" href="author.html">{{ article.author }}</a>
                    </div>
                    <div class="freen-date-meta">
                        <a><i class="fa fa-clock ml-2 mr-1"></i> {{ article.create_date|date:'Y-m-d' }}</a>
                    </div>
                    <div class="freen-reading-meta"><a><i class="fa fa-eye ml-2 mr-1"> {{ article.views }}浏览</i></a><a> <i class="fa fa-comments-o"></i> 
                    <a target="_blank" href="/article/{{ article.slug }}#comments">{% get_comment_count article %}评论</a></a></div>
                </div>
            </div>
            <div class="card-horizontal-right" >
                <a class="card-featured-img" href="/article/{{ article.slug }}">
                <img style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;" class="w-100" src="{{ article.img.url }}">
                </a>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="no-post">暂时还没有发布的文章!</div>
    {% endfor %}
<!-- PAGINATION -->
{# The following renders the pagination html #}
{% include "blog/_pagination.html" %}
<div class="clearfix"></div>
<!-- DIVIDER -->
<hr class="section-divider" />

更多信息参考官网:https://pypi.org/project/django-pure-pagination/

github源码:https://github.com/Freen247/django_blog

原创文章,转载请注明出处:https://boywithacoin.cn/article/wang-zhan-shi-xian-jian-dan-fen-ye/


您尚未登录,请 登录注册 后评论
    0 人参与 | 0 条评论
    暂时没有评论,欢迎来尬聊!