本小节魔改教程基于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 更新：修复去除主页以外的自定页数跳转功能