个人博客分页

随着个人网站的博客越来越多，博客分页也提上了日程，否则每次进入网站的博客页面，都要同时加载几十篇博客的文本和封面图片，用户体验太差（虽然用户只有我）。于是今天抽了些时间动手把它做了。

其实之前搭建的搜索引擎也用了分页，但由于是封装在搜索引擎函数中，所以不知道具体怎么弄的。今天看了些资料后发现，原来搜索引擎也是使用了 Django 的分页函数 paginator。这样就简单多了，只要在原来的 views 函数里插入关于分页的一两行代码，然后把分页结果传给前端就行了。

首先是 Django 的 paginator 类：

class Paginator(object):
 
    def __init__(self, object_list, per_page, orphans=0,
                 allow_empty_first_page=True):
        self.object_list = object_list
        self.per_page = int(per_page)
        self.orphans = int(orphans)
        self.allow_empty_first_page = allow_empty_first_page

修改 views：

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

def blog_list(request):
    context = {
     }
    blogs = Blog.objects.all()
    blogs = blogs.order_by("-created_time")
    paginator = Paginator(blogs, 6, 3)  # Show 6 contacts per page, and items in last page no less than 3
    page = request.GET.get('page')
    try:
        pnumber = paginator.page(page)
    except PageNotAnInteger:
        # If page is not an integer, deliver first page.
        pnumber = paginator.page(1)
    except EmptyPage:
        # If page is out of range (e.g. 9999), deliver last page of results.
        pnumber = paginator.page(paginator.num_pages)
    context['max_left_item_count'] = '2'  # items in item bar no longer than 5
    context["blogs"] = pnumber # upload results of pagination
    context["blog_types"] = BlogType.objects.all()
    return render(request, 'index.html', context)

知道了函数后修改 views 是很简单的。真正耗我时间的是前端分页导航栏的制作。

一开始我是使用 Bootstrap 的 pagination，但前端效果很不好，和我的博客风格不搭配。效果如下：

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previousa>li>
  <li class="page-item"><a class="page-link" href="#">1a>li>
  <li class="page-item active"><a class="page-link" href="#">2a>li>
  <li class="page-item"><a class="page-link" href="#">3a>li>
  <li class="page-item"><a class="page-link" href="#">Nexta>li>
ul>

而我希望一种简约、淡雅的导航栏风格。一开始我的思路是查找修改 Bootstrap 的 pagination 的方法，但修改没有生效，HTML 文件太多，我也懒得再去排错。而且就算修改生效，最后的结果也应该不会太理想，因为可以改它的颜色、大小、字体，但它的基本格式应该不会变，太过商品化大众化。

最后我想，既然前端简约，其组件一定也复杂不到哪去，所以直接用 HTML 写就完事了。不要按钮，不要图形，就用独立的数字与其链接，改改字体、颜色、大小，一个简洁的分页导航栏不就出来了吗？

<div class="pagination" id="fh5co-main-content" style="font-family: Courier; font-size: larger">
    {% if blogs.has_previous %}
        {% if blogs.number >= max_left_item_count|add:max_left_item_count %}
            <a aria-hidden="true" style="color: lightpink; font-size: larger" href="?page=1">«a>
        {% endif %}
            <a class="page-link" href="?page={
      { blogs.previous_page_number }}">
                <span aria-hidden="true" style="color: hotpink; font-size: medium;" class="glyphicon glyphicon-chevron-left">span>
            a>
    {% endif %}

    {% for pg in blogs.paginator.page_range %}
        {% if blogs.number == pg %}
            <a class="page-link" href="?page={
      { pg }}" style="color: deeppink"><u>{
    { pg }}u>a>
        {% elif blogs.number|add:max_left_item_count >= pg and pg|add:max_left_item_count >= blogs.number  %}
            <a class="page-link" href="?page={
      { pg }}" style="color: pink">{
    { pg }}a>
        {% endif %}
    {% endfor %}

    {% if blogs.has_next %}
            <a class="page-link" href="?page={
      { blogs.next_page_number }}">
                <span aria-hidden="true" style="color: hotpink; font-size: medium" class="glyphicon glyphicon-chevron-right">span>
            a>
            {% if  blogs.paginator.num_pages >  blogs.number|add:max_left_item_count  %}
                <a aria-hidden="true" style="color: lightpink; font-size: larger;" href="?page={
      { blogs.paginator.num_pages }}">»a>
            {% endif %}
    {% endif %}
div>

大功告成。然后顺着这个思路对搜索结果页面的分页导航栏也做了一些小修改。

个人网站地址：https://mekakuactor.cn/blog/home/