个人网站搭建（Day 15）— 分页器的设计

唉？这篇博客应当是放到较前的位置的，因为忘了所以就在这里补上啦2333，莫介意 (´- ω ก`)

今天说的是分页器的设计，随着我们的博客越写越多，在同一个页面内放下所有的博客的话，就会显得emmm，不方便阅读也不好看2333。

本文参考博客：杨仕航—我的网站搭建(第3天) Django分页器 

分页器的设计主要有两方面的内容：1. 博客分页处理；2. 前端相关设计

 

一、博客分页处理

首先，由于Django中有自带的分页器，因此我们也就不需要再造轮子啦，以下是一些示例代码：

from django.core.paginator import Paginator  #导入分页器
from blog.models import Blog 
 
blogs = Blog.objects.all()             #获取全部博文
pages = Paginator(blogs, 10)          #每10个博文对象分为1页
 
#分页器相关的方法和属性
print pages.count                     #得到里面总共有多少个模型对象
print pages.num_pages                 #总页数
print pages.page_range                #页面列表，可以拿来遍历得到全部页码
 
#得到第1页包含的模型对象，该对象集合可以用于遍历得到里面的模型对象
blogs_page = pages.page(1) 
print blogs_page.number               #得到该对象集合当前是哪一页
print blogs_page.has_previous()       #判断是否有前一页
print blogs_page.has_next()           #判断是否有后一页

然后呢，动手写一个属于自己的分页器吧，为了方便后面管理，我们在这里创建一个helper文件夹，用来存放一些我们自己改造过的轮子，之后调用起来就会方便一些啦。

PS：我们在创建了helper文件夹后，在其中创建一个空的 __inti__.py 文件，这样才会把这个文件夹识别为包，可作为第三方库被引用2333。

当当，接下来创建 helper/paginator.py 文件，内容如下：

from django.core.paginator import Paginator
from django.conf import settings

def getPages(request, objectlist):
    """ 分页器 """
    # 获取GET方法请求的参数，得到当前的页码。若获取失败则默认为1
    currentPage = request.GET.get('page', 1)

    # 每7个对象为一页，参数可写于 setting.py 里面
    paginator = Paginator(objectlist, settings.EACHPAGE_NUMBER)
    objectlist = paginator.page(currentPage)
 
    return paginator, objectlist

对应的博客列表显示的后台代码（因为在其他的地方还会使用到显示特定类型的博客，这里我们将获取数据与显示分开成两个函数）：

def blog_list_show(request, pages, blogs):
    random_blogs = random_recommend()    
    recommend_blogs = author_recommend()

    context = { 
        'blogs': blogs, 
        'pages': pages,  
        'random_blogs': random_blogs, 
        'recommend_blogs': recommend_blogs,
    }
    return render(request, 'blog/blog_list.html', context)

def blog_index(request):
    """ 显示博客的列表 """
    blogs = Blog.objects.all()
    pages, blogs = getPages(request, blogs)
    return blog_list_show(request, pages, blogs)

 

二、前端相关设计

前端设计比较麻烦，因为原来的代码在我的项目上会出现一些问题，所以改得有点乱，建议直接参考原来的博客

<div class="text-center" style="float:none">
    <div>
        共{{pages.count}}篇博文。当前第{{blogs.number}}页，共{{pages.num_pages}}页
    </div>
    <div class="blog-pages" style="display: inline-table">
        <ul>
            <li class="page_li">
                {% if blogs.has_previous %}
                <a href="?page={{blogs.previous_page_number}}" aria-label="Previous" class="btn btn-default" style="border: #6e9fc7 1px solid;  margin: 10px;">
                    <span aria-hidden="true">&laquo;</span>
                </a>
                {% else %}
                <a href="?page={{blogs.number}}" aria-label="Previous" class="btn btn-default" style="border: #6e9fc7 1px solid;  margin: 10px;">
                    <span aria-hidden="true">&laquo;</span>
                </a>
                {% endif %}
            </li>

            {% for page in pages.page_range %}
            <li class="page_li"><a href="?page={{page}}" class="btn btn-default" style="border: #6e9fc7 1px solid;  margin: 10px;">{{page}}</a></li>
            {% endfor %}

            <li class="page_li">
                {% if blogs.has_next %}
                <a href="?page={{blogs.next_page_number}}" aria-label="Next" class="btn btn-default" style="border: #6e9fc7 1px solid;  margin: 10px;">
                    <span aria-hidden="true">&raquo;</span>
                </a>
                {% else %}
                <a href="?page={{blogs.number}}" aria-label="Next" class="btn btn-default" style="border: #6e9fc7 1px solid;  margin: 10px;">
                    <span aria-hidden="true">&raquo;</span>
                </a>
                {% endif %}
            </li>
        </ul>
    </div>
</div>

 

 

三、实际效果

看起来还行2333，不过目前还存在一个问题，当博客越写越多的时候，页码显示的区域占用的空间也会越来越长，很不雅观，之后再谈谈如何优化分页器的设计。