认识与修改hexo的paginator(分页)系统

前言

为啥我会出这篇博客呢？不出意外的当然是又出意外了。我的分页系统出现了一点问题。
当然，它可能从最开始就有一点问题，只不过是随着页面的增加我才渐渐注意到而已。
问题就是它会跳到当前页面+当前页面+分页，比如在archives界面点击第二页就会跳转到
domain/archives/archives/page/2
这个界面。这很明显是错误的
为了修正这个问题我又是对着各种源码一顿查找。

修改方案

老规矩，先贴出来修改方案。如果问题和我不同的就不要跟着做了。
首先找到我们需要修改的文件夹

<your hexo directory>/node_modules/hexo/lib/plugins/helper/pagintor

将第八行更改为

return i => '/' + url_for.call(ctx, i === 1 ? base : base + format.replace('%d', i));

同时要保证在hexo目录中的配置文件_config.yml中主目录的地址路由为’’

即index_generator中的path属性的值为''

index_generator:
  path: ''
  per_page: 10
  order_by: -date

详解paginator

我觉得我直接贴注释就好

'use strict';

const { htmlTag, url_for } = require('hexo-util');

//这个函数就是用来创建链接的，它决定了路径的内容
const createLink = (options, ctx) => {
  const { base, format } = options;
  
    //加一个'/'是为了能够返回主目录
  return i => '/' + url_for.call(ctx, i === 1 ? base : base + format.replace('%d', i));
};

//这个函数生成html界面的内容，具体说就是界面的按钮（数字加链接）
const createPageTag = (options, ctx) => {
  const link = createLink(options, ctx);
  const { current, escape, transform } = options;

  return i => {
    if (i === current) {
      return htmlTag('span', { class: 'page-number current' }, transform ? transform(i) : i, escape);
    }
    return htmlTag('a', { class: 'page-number', href: link(i) }, transform ? transform(i) : i, escape);
  };
};

//为生成的所有的按钮进行排序与包装
const showAll = (tags, options, ctx) => {
  const { total } = options;

  const pageLink = createPageTag(options, ctx);

  for (let i = 1; i <= total; i++) {
    tags.push(pageLink(i));
  }
};

const pagenasionPartShow = (tags, options, ctx) => {
  const {
    current,
    total,
    space,
    end_size: endSize,
    mid_size: midSize
  } = options;

  const leftEnd = Math.min(endSize, current - 1);
  const rightEnd = Math.max(total - endSize + 1, current + 1);
  const leftMid = Math.max(leftEnd + 1, current - midSize);
  const rightMid = Math.min(rightEnd - 1, current + midSize);
  const spaceHtml = htmlTag('span', { class: 'space' }, space, false);

  const pageTag = createPageTag(options, ctx);

  // Display pages on the left edge
  for (let i = 1; i <= leftEnd; i++) {
    tags.push(pageTag(i));
  }

  // Display spaces between edges and middle pages
  if (space && leftMid - leftEnd > 1) {
    tags.push(spaceHtml);
  }

  // Display left middle pages
  for (let i = leftMid; i < current; i++) {
    tags.push(pageTag(i));
  }

  // Display the current page
  tags.push(pageTag(current));

  // Display right middle pages
  for (let i = current + 1; i <= rightMid; i++) {
    tags.push(pageTag(i));
  }

  // Display spaces between edges and middle pages
  if (space && rightEnd - rightMid > 1) {
    tags.push(spaceHtml);
  }

  // Display pages on the right edge
  for (let i = rightEnd; i <= total; i++) {
    tags.push(pageTag(i));
  }
};

//这是函数的入口，它接受option参数
function paginatorHelper(options = {}) {
  options = Object.assign({
    base: this.page.base || '', //文章的路径
    current: this.page.current || 0,    //当前页
    format: `${this.config.pagination_dir}/%d/`,    //待格式化的page路径
    total: this.page.total || 1,    //总页面
    end_size: 1,
    mid_size: 2,
    space: '&hellip;',
    next_text: 'Next',  //下一个界面的信息 
    prev_text: 'Prev',  //上一个界面的信息
    prev_next: true,
    escape: true
  }, options);

  const {
    current,
    total,
    prev_text: prevText,
    next_text: nextText,
    prev_next: prevNext,
    escape
  } = options;

  if (!current) return '';

  const link = createLink(options, this);

  const tags = [];

  // Display the link to the previous page
  if (prevNext && current > 1) {
    tags.push(htmlTag('a', { class: 'extend prev', rel: 'prev', href: link(current - 1)}, prevText, escape));
  }

  if (options.show_all) {
    showAll(tags, options, this);
  } else {
    pagenasionPartShow(tags, options, this);
  }

  // Display the link to the next page
  if (prevNext && current < total) {
    tags.push(htmlTag('a', { class: 'extend next', rel: 'next', href: link(current + 1) }, nextText, escape));
  }

  return tags.join('');
}

module.exports = paginatorHelper;

碎碎念

本来以为分页应该也是在ejs中生成的，我只需要修改ejs文件即可。

可是万万没想到hexo的分页是直接通过一个插件的函数生成html内容然后显示上的

所以这个改的还挺艰难的，差点给我愁死