📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

最后更新于 2023 年 07 月 13 日

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

本小节魔改教程基于 Butterfly 原生自定页数跳转版
更多参考 - Shine

  • 修改 [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 样式文件，并新增以下内容
    （也可以在自建的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 文件，并新增以下内容
    （也可以在自建的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();

// 自定页数跳转