认识与修改hexo的paginator(分页)系统
# 认识与修改hexo的pagintor(分页)系统
## 前言
为啥我会出这篇博客呢？不出意外的当然是又出意外了。我的分页系统出现了一点问题。
当然，它可能从最开始就有一点问题，只不过是随着页面的增加我才渐渐注意到而已。
问题就是它会跳到当前页面+当前页面+分页，比如在archives界面点击第二页就会跳转到
`domain/archives/archives/page/2`
这个界面。这很明显是错误的
为了修正这个问题我又是对着各种源码一顿查找。
<!-- more -->
## 修改方案
老规矩，先贴出来修改方案。如果问题和我不同的就不要跟着做了。
首先找到我们需要修改的文件夹
`<your hexo directory>/node_modules/hexo/lib/plugins/helper/pagintor`
将第八行更改为
```javascript
return i => '/' + url_for.call(ctx, i === 1 ? base : base + format.replace('%d', i));
```
同时要保证在hexo目录中的配置文件`_config.yml`中主目录的地址路由为''
即`index_generator`中的`path`属性的值为`''`
```yaml
index_generator:
path: ''
per_page: 10
order_by: -date
```
## 详解paginator
我觉得我直接贴注释就好
```javascript
'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: '…',
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内容然后显示上的
所以这个改的还挺艰难的，差点给我愁死😭