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

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

前言

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

修改方案

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

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

将第八行更改为

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

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

index_generator中的path属性的值为''

1
2
3
4
index_generator:
path: ''
per_page: 10
order_by: -date

详解paginator

我觉得我直接贴注释就好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
'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内容然后显示上的

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


认识与修改hexo的paginator(分页)系统
2022/10/07/technology/framework/recognize_pagintor/
作者
charlesix59
发布于
2022年10月7日
许可协议