Step24: using django-pure-pagination

Author: yangxg

Pipfile

@@ -11,6 +11,7 @@ django = "*"
 markdown = "*"
 gunicorn = "*"
 faker = "*"
+django-pure-pagination = "*"
 
 [requires]
 python_version = "3.6"

Pipfile.lock

@@ -144,6 +144,7 @@ tutorial 分支为项目的主分支，每一篇教程的代码都和历史提
 21. [Django 官方推荐的姿势：类视图](https://www.zmrenwu.com/courses/hellodjango-blog-tutorial/materials/79/)
 22. [在脚本中使用 ORM：Faker 批量生成测试数据](https://www.zmrenwu.com/courses/hellodjango-blog-tutorial/materials/80/)
 23. [通过 Django Pagination 实现简单分页](https://www.zmrenwu.com/courses/hellodjango-blog-tutorial/materials/81/)
+24. [稳定易用的 Django 分页库，完善分页功能](https://www.zmrenwu.com/courses/hellodjango-blog-tutorial/materials/82/)
 
 ## 公众号
 <p align="center">

README.md

@@ -5,11 +5,12 @@
 from django.utils.text import slugify
 from django.views.generic import DetailView, ListView
 from markdown.extensions.toc import TocExtension
+from pure_pagination.mixins import PaginationMixin
 
 from .models import Category, Post, Tag
 
 
-class IndexView(ListView):
+class IndexView(PaginationMixin, ListView):
     model = Post
     template_name = 'blog/index.html'
     context_object_name = 'post_list'

blog/views.py

@@ -30,6 +30,8 @@
     'django.contrib.messages',
     'django.contrib.staticfiles',
 
+    'pure_pagination',  # 分页
+
     'blog.apps.BlogConfig',  # 注册 blog 应用
     'comments.apps.CommentsConfig',  # 注册 comments 应用
 ]
@@ -110,3 +112,10 @@
 
 STATIC_URL = '/static/'
 STATIC_ROOT = os.path.join(BASE_DIR, 'static')
+
+# 分页设置
+PAGINATION_SETTINGS = {
+    'PAGE_RANGE_DISPLAYED': 4,
+    'MARGIN_PAGES_DISPLAYED': 2,
+    'SHOW_FIRST_PAGE_WHEN_INVALID': True,
+}

blogproject/settings/common.py

@@ -28,31 +28,7 @@ <h1 class="entry-title">
   {% endfor %}
 
   {% 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>
+    {{ page_obj.render }}
   {% endif %}
 
-{#  <div class="pagination">#}
-{#    <ul>#}
-{#      <li><a href="">1</a></li>#}
-{#      <li><a href="">...</a></li>#}
-{#      <li><a href="">4</a></li>#}
-{#      <li><a href="">5</a></li>#}
-{#      <li class="current"><a href="">6</a></li>#}
-{#      <li><a href="">7</a></li>#}
-{#      <li><a href="">8</a></li>#}
-{#      <li><a href="">...</a></li>#}
-{#      <li><a href="">11</a></li>#}
-{#    </ul>#}
-{#  </div>#}
 {% endblock main %}

templates/blog/index.html

@@ -0,0 +1,27 @@
+<div class="text-center pagination" style="width: 100%">
+  <ul>
+    {% if page_obj.has_previous %}
+      <li><a href="?{{ page_obj.previous_page_number.querystring }}"
+             class="prev">&lsaquo;&lsaquo; </a></li>
+    {% else %}
+      <li><span class="disabled prev">&lsaquo;&lsaquo; </span></li>
+    {% endif %}
+    {% for page in page_obj.pages %}
+      {% if page %}
+        {% ifequal page page_obj.number %}
+          <li class="current"><a href="#">{{ page }}</a></li>
+        {% else %}
+          <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
+        {% endifequal %}
+      {% else %}
+        ...
+      {% endif %}
+    {% endfor %}
+    {% if page_obj.has_next %}
+      <li><a href="?{{ page_obj.next_page_number.querystring }}" class="next"> &rsaquo;&rsaquo;</a>
+      </li>
+    {% else %}
+      <li><span class="disabled next"> &rsaquo;&rsaquo;</span></li>
+    {% endif %}
+  </ul>
+</div>