效果图
使用以下代码替换\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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| -
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
}
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)
if is_home()
input#textnumer(oninput="value=value.replace(/[^0-9]/g,'')" maxlength="3" onkeyup='this.value=this.value.replace(/[^u4e00-u9fa5w]/g,"")')
a#textbtn(onclick='textbtn()') 跳转
if is_home()
.js-css
script.
function textbtn(){var e=document.querySelectorAll(".page-number"),t=e[e.length-1].innerHTML,n=Number(t),a=document.getElementById("textnumer"),o=Number(a.value);if(""!=o&&!isNaN(o)&&o%1==0)if(1==o)document.getElementById("textbtn").href="/";else if(o>n){var d="/page/"+n+"/";document.getElementById("textbtn").href=d}else d="/page/"+a.value+"/",document.getElementById("textbtn").href=d}
style.
#pagination .pagination .extend{display: none!important}
/* 确保分页导航按钮和输入框可见 */
#pagination .pagination .prev-post,
#pagination .pagination .next-post,
#pagination .pagination input#textnumer,
#pagination .pagination a#textbtn {
display: inline-block;
}
.prev-post .cover,
.next-post .cover {
display: inline-block;
}
#textnumer {
width: 50px;
margin-left: 10px;
}
#textbtn {
cursor: pointer;
margin-left: 5px;
}
#pagination .pagination .extend {
display: inline-block!important;
}
|
实现的内容是分页导航按钮和输入框可见，互不影响
参考教程
