django 網站實現簡單分頁

娃哈哈店長發表於2020-01-10

當部落格上釋出的文章越來越多時,通常需要進行分頁顯示,以免所有的文章都堆積在一個頁面,影響使用者體驗。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-pagin...

github原始碼:https://github.com/Freen247/django_blog

本作品採用《CC 協議》,轉載必須註明作者和本文連結

文章來源首發於我的部落格Stray_Camel(^U^)ノ~YO

相關文章