惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
Docker
阮一峰的网络日志
阮一峰的网络日志
T
Tailwind CSS Blog
博客园 - 【当耐特】
量子位
博客园 - 叶小钗
有赞技术团队
有赞技术团队
Jina AI
Jina AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - Franky
博客园 - 司徒正美
爱范儿
爱范儿
美团技术团队
小众软件
小众软件
酷 壳 – CoolShell
酷 壳 – CoolShell
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
V
V2EX
罗磊的独立博客
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Last Week in AI
Last Week in AI
Hugging Face - Blog
Hugging Face - Blog
I
InfoQ
D
DataBreaches.Net
宝玉的分享
宝玉的分享

爱吃肉的猫

那就,再相逢 Butterfly的魔改教程:最新评论页 离歌不夜天 前端分享 - 滑动阻尼效果 Butterfly的魔改教程:右键菜单 音乐分享 - doi微醺氛围 Butterfly的魔改教程:动态相册页 近况记事 - 11 微信公众号:Ai大模型让回复更具智能化 近况记事 - 10 PWA:让你的网站变成桌面应用APP Healthy Love Butterfly的魔改教程:关于本站 近况记事 - 9 Butterfly的魔改教程:待办清单 TrollStore - 不掉签助手 近况记事 - 8 Twikoo评论回复邮件模版 过一个很特别的七夕 The Young Boy and the Sea Butterfly的魔改教程:文章订阅页 思考题目:混乱是阶梯 近况记事 - 7 Butterfly的魔改教程:即刻短文页 Butterfly的魔改教程:loading加载动画 差旅游记 再见,不惑之年:二十又一 近况记事 - 6 堆友AI作图:3D资源设计平台,堆出你的未来 【QD-Today】自建私有自动签到服务
Butterfly的魔改教程:自定页数跳转
亦小封 · 2023-07-13 · via 爱吃肉的猫

本小节魔改教程基于Butterfly原生自定页数跳转版

创建数据

  • 修改[blogRoot]/themes/butterfly/layout/includes/pagination.pug文件内容。
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
  ···

var options = {
prev_text: '<i class="fas fa-chevron-left fa-fw"></i>',
next_text: '<i class="fas fa-chevron-right fa-fw"></i>',
mid_size: 1,
escape: false
}
+ var icat_options = {
+ prev_text: '<i class="iconfont icat-chevron-left fa-fw"></i><div class="pagination_tips_prev">上页</div>',
+ next_text: '<div class="pagination_tips_next">下页</div><i class="iconfont icat-chevron-right fa-fw"></i>',
+ mid_size: 1,
+ escape: false
+ }

if is_post()
- let prev = theme.post_pagination === 1 ? page.prev : page.next
- let next = theme.post_pagination === 1 ? page.next : page.prev
nav#pagination.pagination-post
if(prev)
- var hasPageNext = next ? 'pull-left' : 'pull-full'
.prev-post(class=hasPageNext)
a(href=url_for(prev.path) title=prev.title)
if prev.cover_type === 'img'
img.cover(src=url_for(prev.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
else
.cover(style=`background: ${prev.cover || 'var(--default-bg-color)'}`)
.pagination-info
.label=_p('pagination.prev')
.prev_info=prev.title

if(next)
- var hasPagePrev = prev ? 'pull-right' : 'pull-full'
.next-post(class=hasPagePrev)
a(href=url_for(next.path) title=next.title)
if next.cover_type === 'img'
img.cover(src=url_for(next.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
else
.cover(style=`background: ${next.cover || 'var(--default-bg-color)'}`)
.pagination-info
.label=_p('pagination.next')
.next_info=next.title
else
nav#pagination
.pagination
if is_home()
- options.format = 'page/%d/#content-inner'
- !=paginator(options)
+ !=paginator(icat_options)
+ else
+ !=paginator(options)
+ if is_home()
+ .toPageGroup
+ input#toPageText(maxlength="3" oninput="value=value.replace(/[^0-9]/g,'')" onkeyup="if (this.value === '0') this.value = ''" title="跳转到指定页面")
+ a#toPageButton(data-pjax-state="" onclick="icattoPage.toPage()")
+ i.fa-solid.fa-angles-right
  • 新建[blogRoot]/source/css/pagination.css样式文件,并新增以下内容。
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
.page .layout > .recent-posts .pagination > a:hover {
background: #00c4b6;
}

.layout > .recent-posts .pagination > a {
border: var(--style-border);
}

#pagination .pagination {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.page .layout .recent-posts #pagination .pagination .prev {
left: 0;
}
.page .layout .recent-posts #pagination .pagination .next {
right: 0;
}
.page .layout .recent-posts #pagination .pagination .prev,
.page .layout .recent-posts #pagination .pagination .next {
position: absolute;
margin: 0 0;
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 5.25em;
overflow: hidden;
}
.page .layout .recent-posts #pagination .pagination .prev:hover .pagination_tips_prev {
margin-right: 2.5px;
opacity: 1;
}
.page .layout .recent-posts #pagination .pagination .prev .pagination_tips_prev {
margin-right: -28px;
transition: margin-right .3s;
opacity: 0;
}
.page .layout .recent-posts #pagination .pagination .next:hover .pagination_tips_next {
margin-left: 2.5px;
opacity: 1;
}
.page .layout .recent-posts #pagination .pagination .next .pagination_tips_next {
margin-left: -28px;
transition: margin-left .3s;
opacity: 0;
}
@media screen and (max-width: 768px) {
.page .layout .recent-posts #pagination .pagination .prev,
.page .layout .recent-posts #pagination .pagination .next {
position: sticky;
margin: 0 6px;
display: inline-block;
width: 2.5em;
}
.page .layout .recent-posts #pagination .pagination .prev .pagination_tips_prev,
.page .layout .recent-posts #pagination .pagination .next .pagination_tips_next {
display: none;
}
}

.pagination input {
width: 2.5em;
height: 2.5em;
border-radius: 8px;
border: var(--style-border-always);
transition: all 0.3s;
outline-style: none;
padding-left: 12px;
background: var(--icat-secondbg);
color: var(--icat-fontcolor);
}

.pagination .toPageGroup:hover input,.pagination .toPageGroup input:focus {
border: 1px solid #00c4b6;
outline-style: none;
width: 100px;
}

.toPageGroup {
display: inline-flex !important;
position: relative;
margin: 0 6px !important;
}

a#toPageButton {
display: flex;
position: absolute;
width: 2.5em;
height: 2.5em;
border-radius: 8px;
justify-content: center;
align-items: center;
transition: all 0.3s;
background: var(--card-bg);
border: var(--style-border-always);
cursor: text !important;
pointer-events: none;
}

.toPageGroup:hover a#toPageButton, .toPageGroup:focus-within a#toPageButton {
margin-top: 4px;
width: 27px;
height: 27px;
margin-left: 70px;
background: var(--icat-card-bg);
border: 1px solid var(--icat-none);
border-radius: 4px;
opacity: 0.2;
transition: all 0.3s !important;
}

.toPageGroup:focus-within a#toPageButton.haveValue {
opacity: 1;
cursor: pointer;
}

a#toPageButton.haveValue {
opacity: 1!important;
cursor: pointer!important;
pointer-events: all;
}

a#toPageButton.haveValue:hover {
background: var(--icat-theme);
color: var(--icat-white);
}

@media screen and (max-width: 768px) {
.toPageGroup {
display: none !important;
}
}


  • 创建[blogRoot]/source/js/pagination.js文件,并新增以下内容。
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
var icattoPage = {
toPage: function() {
console.log("执行跳转");
var e = document.querySelectorAll(".page-number")
, t = parseInt(e[e.length - 1].innerHTML)
, n = document.getElementById("toPageText")
, a = parseInt(n.value);
if (!isNaN(a) && a > 0 && "0" !== ("" + a)[0] && a <= t) {
var s = 1 == a ? "/" : "/page/" + a + "/#content-inner";
document.getElementById("toPageButton").href = s
}
},
listenToPageInputPress() {
var e = document.getElementById("toPageText")
, t = document.getElementById("toPageButton");
e && (e.addEventListener("keydown", (e=>{
13 === e.keyCode && (icattoPage.toPage(),
pjax.loadUrl(t.href))
}
)),
e.addEventListener("input", (function() {
"" === e.value || "0" === e.value ? t.classList.remove("haveValue") : t.classList.add("haveValue");
var n = document.querySelectorAll(".page-number")
, a = +n[n.length - 1].innerHTML;
+document.getElementById("toPageText").value > a && (e.value = a)
}
)))
}
}
icattoPage.listenToPageInputPress();


参考文献

更多参考 - Shine

更新历史

  • 230713 更新:修复去除主页以外的自定页数跳转功能

Butterfly的魔改教程:自定页数跳转

此文章版权归 MeuiCat 所有,完整转载,请注明来源!