moh Hexo http://example.com/ All rights reserved 2026, moh 活着就好 moh`blog 2026-04-07T04:52:41.640Z moh

本文参考文档来自

🪧引用站外地址，不保证站点的可用性和安全性
Butterfly魔改教程
效果展示

一、前置知识

创建一个自定义文件[blogRoot]/source/css/june.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
/* 颜色 */
:root {
    --june: #E68282;
    --june-theme-op: #4259ef23;
    --june-gray-op: #9999992b;
    --june-white: #fff;
    --june-black: #000;
    --june-none: rgba(0, 0, 0, 0);
    --june-purple: #E764FF;
    --june-gray: #999999;
    --june-light-grey: #F2F2F2;
    --june-yellow: #ffc93e;
    --june-orange: #ff9900;
    --june-border-radius: 8px;
    --june-main: var(--june-theme);
    --june-main-op: var(--june-theme-op);
    --june-shadow-theme: 0 8px 12px -3px var(--june-theme-op);
    --june-shadow-main: 0 8px 12px -3px var(--june-main-op);
    --june-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, 0.2);
    --june-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, 0.2);
    --june-shadow-black: 0 0 12px 4px rgba(0, 0, 0, 0.05);
    --june-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, 0.12);
    --june-shadow-red: 0 8px 12px -3px #ee7d7936;
    --june-shadow-green: 0 8px 12px -3px #87ee7936;
    --june-shadow-border: 0 8px 16px -4px #2c2d300c;
    --june-logo-color: linear-gradient(215deg, #4584ff 30%, #ff7676 70%);
    --style-border: 1px solid var(--june-card-border);
    --june-blue-main: #3b70fc;
    --style-border-hover: 1px solid var(--june-main);
    --style-border-dashed: 1px dashed var(--june-theme-op);
    --style-border-avatar: 4px solid var(--june-background);
    --style-border-always: 1px solid var(--june-card-border);
    --june-white-acrylic1: #fefeff !important;
    --june-white-acrylic2: #fcfdff !important;
    --june-black-acrylic2: #08080a !important;
    --june-black-acrylic1: #0b0b0e !important;
    --middle-y-multiplier: 1.5; /* 假设元素在 Y 轴上的平移为原始位置的 1.5 倍 */
    --middle-scale-multiplier: 1.2; /* 假设元素的纵向缩放为原始大小的 1.2 倍 */
    --heo-theme: var(--june-border) !important;
    
    /* 布局尺寸 */
    --layout-width: 1400px;
    --aside-width: 312px;
    
    /* 圆角 */
    --border-radius-small: 6px;
    --border-radius-medium: 8px; /* = --june-border-radius */
    --border-radius-large: 12px;
    --border-radius-xlarge: 24px;
    
    /* 动画 */
    --transition-time: 0.3s;
    
    /* 字体大小 */
    --global-font-size: 16px;
}

[data-theme="light"] {
    --june-theme: #E68282;
    --june-theme-op: #4259ef23;
    --june-blue: #3b70fc;
    --june-red: #d8213c;
    --june-pink: #ff7c7c;
    --june-green: #57bd6a;
    --june-fontcolor: #4c4948;
    --june-background: #f7f9fe;
    --june-reverse: #000;
    --june-maskbg: rgba(255, 255, 255, 0.6);
    --june-maskbgdeep: rgba(255, 255, 255, 0.85);
    --june-hovertext: var(--june);
    --june-ahoverbg: #f7f7fa;
    --june-lighttext: var(--june-main);
    --june-secondtext: rgba(60, 60, 67, 0.6);
    --june-scrollbar: rgba(60, 60, 67, 0.4);
    --june-card-btn-bg: #edf0f7;
    --june-post-blockquote-bg: #fafcff;
    --june-post-tabs-bg: #f2f5f8;
    --june-secondbg: #f7f7f9;
    --june-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
    --june-card-bg: #fff;
    --june-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
    --june-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
    --june-card-border: #c0c6d8;
    --june-copyright-bg: #eff1f3;
    --june-border: #E68282
}

[data-theme="dark"] {
    --june-theme: #333333;
    --june-theme-op: #0084ff23;
    --june-blue: #0084ff;
    --june-red: #ff3842;
    --june-pink: #ff7c7c;
    --june-green: #57bd6a;
    --june-fontcolor: #f7f7fa;
    --june-background: #18171d;
    --june-reverse: #fff;
    --june-maskbg: rgba(0, 0, 0, 0.6);
    --june-maskbgdeep: rgba(0, 0, 0, 0.85);
    --june-hovertext: #0a84ff;
    --june-ahoverbg: #fff;
    --june-lighttext: #f2b94b;
    --june-secondtext: #a1a2b8;
    --june-scrollbar: rgba(200, 200, 223, 0.4);
    --june-card-btn-bg: #30343f;
    --june-post-blockquote-bg: #000;
    --june-post-tabs-bg: #121212;
    --june-secondbg: #30343f;
    --june-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
    --june-card-bg: #1b1c20;
    --june-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
    --june-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
    --june-card-border: #42444a;
    --june-copyright-bg: #323335;
    --june-border: #c8c8c8
}

二、复制

效果

未改造前的效果:
image-20260406192205694

改造后的效果:

image-20260406192301154

教程

1、将以下代码复制到june.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
.snackbar-container{
    border-radius: 12px!important;
    background-color: #000000aa!important;
}
.OwO-body{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: #ffffff77!important;
}

.snackbar-container .action{
    color:var(--june-theme)!important;
    background-color: transparent!important;
}
.snackbar-container{
    font-family: HYTMR,'PingFang SC','Ubuntu Mono','Noto Sans','Microsoft Yahei','SimSun'!important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
@media screen and (max-width:640px) {
    .snackbar-container {
        border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        -moz-border-radius: 0px !important;
        -ms-border-radius: 0px !important;
        -o-border-radius: 0px !important;
    }
}

2、修改_config.butterfly.yml

1
2
3
4
5
6
7
8
9
# Snackbar (Toast Notification 彈窗)
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' # The background color of Toast Notification in light mode
  bg_dark: '#1f1f1f' # The background color of Toast Notification in dark mode

扩展教程(一定要是https或者local、http不行)

只有点击代码复制按钮才有提示，复制文字该怎么添加?

修改[blogRoot]\themes\butterfly\layout\includes\head\config.pug中copyright部分，大概在第41行左右，直接复制下面代码替换即可

(查找方式 直接ctrl+f。输入copyright 后面将代码进行替换就好)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let copyright = 'undefined';
if (theme.copy.enable) {
  copyright = JSON.stringify({
    copy: theme.copy.enable,
    copyrightEbable: theme.copy.copyright.enable,
    limitCount: theme.copy.copyright.limit_count,
    languages: {
      author: _p("copy_copyright.author") + ': ' + config.author,
      link: _p("copy_copyright.link") + ': ',
      source: _p("copy_copyright.source") + ': ' + config.title,
      info: _p("copy_copyright.info")
    }
  })
}

修改[blogRoot]\themes\butterfly\source\js\main.js中的addCopyright函数，直接复制下面代码替换即可

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
/**
 * 複製時加上版權信息
 */
const addCopyright = () => {
  const { limitCount, languages, copy, copyrightEbable } = GLOBAL_CONFIG.copyright;

  const handleCopy = e => {
    if (copy) {
      btf.snackbarShow(GLOBAL_CONFIG.copy.success,true);
    }
    if (copyrightEbable) {
      e.preventDefault();
      const copyFont = window.getSelection(0).toString();
      let textFont = copyFont;
      if (copyFont.length > limitCount) {
        textFont = `${copyFont}\n\n\n${languages.author}\n${languages.link}${window.location.href}\n${languages.source}\n${languages.info}`;
      }
      if (e.clipboardData) {
        return e.clipboardData.setData("text", textFont);
      } else {
        return window.clipboardData.setData("text", textFont);
      }
    }
  };

  document.body.addEventListener("copy", handleCopy);
}

修改[blogRoot]themes/butterfly/languages/zh-CN.yml中的以下代码, 其中 copy.success 就是弹窗中的内容

1
2
3
4
5
6
7
8
9
footer:
  framework: 框架
  theme: 主题

copy:
  success: 复制成功，转载请标注本文地址
  error: 复制失败
  noSupport: 浏览器不支持

效果展示

image-20260406195805350

下面是佬的用法,带链接跳转

效果展示:

image-20260406200026411

找到[blogRoot]\themes\butterfly\source\js\utils.js中的snackbarShow函数,直接替换成以下的函数即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
snackbarShow: (text, showAction = false, duration = 2000) => {
  const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar
  const bg = document.documentElement.getAttribute('data-theme') === 'light' ? bgLight : bgDark
  Snackbar.show({
    text,
    backgroundColor: bg,
    showAction,
    duration,
    pos: position,
    onActionClick: function (element) {
      window.open("/copyright")
    },
    actionText: "版权声明",
    customClass: 'snackbar-css'
  })

},

三、欢迎与Cookie弹窗

效果:

image-20260406203140568

新建welcome.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
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
//首次访问弹窗
if (localStorage.getItem("popWelcomeWindow") !== "0") {
    if (document.referrer === undefined || document.referrer.indexOf("blog.june_pj.cn") !== -1 || document.referrer.indexOf("www.blog.june_pj.cn") !== -1) { //改成自己域名，注意是referrer!!! qwq

    } else {
        localStorage.setItem("popWelcomeWindow", "0");
    }
    Snackbar.show({
        text: '哎嘿，被发现了呢~ (～o￣3￣)～ ',
        pos: 'top-right',
        onActionClick: function (element) {
            window.open("/about")
        },
        actionText: "关于我",
    });
}
if (sessionStorage.getItem("popCookieWindow") !== "0") {
    setTimeout(function () {
        Snackbar.show({
            text: '本站使用Cookie和本地/会话存储保证浏览体验和网站统计',
            pos: 'bottom-left',
            actionText: "版权声明",
            onActionClick: function (element) {
                window.open("/privacy")
            },
        })
    }, 3000)
}
//不在弹出Cookie提醒
sessionStorage.setItem("popCookieWindow", "0");

//自带上文浏览器提示

function browserTC() {
    btf.snackbarShow("");
    Snackbar.show({
        text: '浏览器版本较低，网站样式可能错乱',
        actionText: '关闭',
        duration: '6000',
        pos: 'bottom-left'
    });
}

function browserVersion() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
    var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //Edge浏览器
    var isFirefox = userAgent.indexOf("Firefox") > -1; //Firefox浏览器
    var isOpera = userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1; //Opera浏览器
    var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Edge") === -1 && userAgent.indexOf("OPR") === -1; //Chrome浏览器
    var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1 && userAgent.indexOf("Edge") === -1 && userAgent.indexOf("OPR") === -1; //Safari浏览器
    if (isEdge) {
        if (userAgent.split('Edge/')[1].split('.')[0] < 90) {
            browserTC()
        }
    } else if (isFirefox) {
        if (userAgent.split('Firefox/')[1].split('.')[0] < 90) {
            browserTC()
        }
    } else if (isOpera) {
        if (userAgent.split('OPR/')[1].split('.')[0] < 80) {
            browserTC()
        }
    } else if (isChrome) {
        if (userAgent.split('Chrome/')[1].split('.')[0] < 90) {
            browserTC()
        }
    } else if (isSafari) {
        //不知道Safari哪个版本是该淘汰的老旧版本
    }
}

//2022-10-29修正了一个错误：过期时间应使用toGMTString()，而不是toUTCString()，否则实际过期时间在中国差了8小时
function setCookies(obj, limitTime) {
    let data = new Date(new Date().getTime() + limitTime * 24 * 60 * 60 * 1000).toGMTString()
    for (let i in obj) {
        document.cookie = i + '=' + obj[i] + ';expires=' + data
    }
}

function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}

if (getCookie('browsertc') !== 1) {
    setCookies({
        browsertc: 1,
    }, 1);
    browserVersion();
}

四、分类、标签页

效果:

image-20260406205751899

在june.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
/* 分类页 */
.category-lists .category-list {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    margin: 5em 0 3em;
}
.category-lists ul {
    padding: 0;
}
.category-lists ul li {
    display: flex;
    width: fit-content;
    font-size: 1.2em !important;
    padding: 0.2em 0.5em;
    background: var(--june-card-bg);
    margin: 0.5em 0.5em;
    border-radius: 12px;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    border: var(--style-border-always);
    box-shadow: var(--june-shadow-border);
    align-items: center;
}
.category-lists .category-list a {
    color: var(--june-fontcolor) !important;
}
.category-lists .category-list a:hover {
    color: var(--june-blue) !important;
}
.category-lists ul li:before {
    position: unset;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: 0;
    color: var(--june-fontcolor) !important;
    cursor: pointer;
    content: "\e038" !important;
    font-family: "iconfont" !important;
    opacity: 0.4;
    padding-top: 2px;
    padding-right: 2px;
}
.category-lists .category-list .category-list-count {
    background: var(--june-secondbg);
    padding: 4px 4px;
    border-radius: 6px;
    color: var(--june-secondtext);
    line-height: 1;
    text-align: center;
    min-width: 35px;
    display: inline-block;
    font-size: 1rem;
    box-shadow: var(--june-shadow-border);
}
.category-lists .category-list .category-list-count:before,
.category-lists .category-list .category-list-count:after {
    content: '';
}

追加标签页样式

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
/* 标签页 */
#page .tag-cloud-list {
    margin: 5em 0 3em;
}
#page .tag-cloud-list a {
    display: inline-flex;
    color: var(--june-fontcolor) !important;
    font-size: 1.2em !important;
    padding: 0.2em 0.5em;
    background: var(--june-card-bg);
    margin: 0.5em 0.5em;
    border-radius: 12px;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    border: var(--style-border-always);
    box-shadow: var(--june-shadow-border);
    align-items: center;
}
#page .tag-cloud-list a:before {
    color: var(--june-fontcolor) !important;
    cursor: pointer;
    content: "\e038" !important;
    font-family: "iconfont" !important;
    opacity: 0.4;
    padding-top: 2px;
    padding-right: 2px;
}
#page .tag-cloud-list a:hover {
    background: var(--june-blue);
}
#page .tag-cloud-list a > sup{
    top: auto;
    background: var(--june-secondbg);
    padding: 4px 4px;
    margin-left: 8px;
    border-radius: 6px;
    color: var(--june-secondtext);
    line-height: 1;
    text-align: center;
    min-width: 35px;
    display: inline-block;
    font-size: 1rem;
    box-shadow: var(--june-shadow-border);
}

五、在PC端文章右下角处即可查看评论弹窗

首先在在[主题目录]/layout/includes/layout.pug文件中，新增以下内容。 去掉加号即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
      main#content-inner.layout(class=hideAside)
        if body
          div!= body
        else
          block content
          if theme.aside.enable && page.aside !== false
            include widget/index.pug

+      if page.comments !== undefined && page.comments !== false && theme.comments.use
+        #comment-barrage

      - const footerBg = theme.footer_img
      - const footer_bg = footerBg ? footerBg === true ? bg_img : getBgPath(footerBg) : ''
      footer#footer(style=footer_bg)
        !=partial('includes/footer', {}, {cache: true})

新建[主题目录]/source/css/_layout/barrage.styl样式文件，并新增以下内容。

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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
#comment-barrage
  position fixed
  bottom 40px
  right calc(10px + 48px)
  display flex
  flex-direction column
  justify-content flex-end
  align-items flex-end
  transform translateY(190px)
  transition .3s
  z-index 1

  +maxWidth768()
    display none

  &.show
    transform translateY(0)

.comment-barrage-item
  min-width 320px
  max-width 400px
  width fit-content
  min-height 60px
  max-height 120px
  margin 4px
  padding 12px 16px
  background #ffffff
  border-radius 12px
  color #333333
  animation barrageIn .6s cubic-bezier(0.42, 0, 0.3, 1.11)
  transition .3s
  display flex
  flex-direction column
  outline 1px solid #e0e0e0
  position fixed
  box-shadow 0 2px 8px rgba(0, 0, 0, 0.08)
  overflow hidden

  &:hover
    outline 1px solid #409eff
    box-shadow 0 4px 12px rgba(64, 158, 255, 0.15)

  &.out
    opacity 0
    animation barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11)

  pre, li, blockquote, br
    display none

  .barrageHead
    height auto
    padding 0
    line-height 1
    font-size 12px
    border-bottom 1px solid #f0f0f0
    display flex
    justify-content space-between
    align-items center
    font-weight normal
    padding-bottom 8px
    gap 8px

  .barrageNick
    display flex
    align-items center
    gap 6px
    flex 1
    min-width 0
    color #333333

    &::before
      content '热评'
      background #ff6b6b
      color #fff
      padding 2px 6px
      border-radius 4px
      font-size 11px
      font-weight bold
      white-space nowrap

  .barrageAvatar
    width 20px
    height 20px
    margin 0
    border-radius 50%
    background var(--icat-theme)
    order 1

  .barrageTime
    margin-left 0
    color #999999
    font-size 12px
    order 2
    flex 1
    min-width 0
    overflow hidden
    text-overflow ellipsis
    white-space nowrap

  .barrageClose
    color #999999
    cursor pointer
    line-height 1
    margin-left auto
    order 3
    font-size 16px
    width 24px
    height 24px
    display flex
    align-items center
    justify-content center
    border-radius 50%
    transition .3s

    &:hover
      color #ff4444
      background #f5f5f5

  .barrageContent
    font-size 14px
    font-weight normal
    height auto
    overflow hidden
    width 100%
    max-height none
    margin-top 4px

    a
      pointer-events none
      font-size 13px
      color #333333
      line-height 1.6
      display -webkit-box
      -webkit-line-clamp 3
      -webkit-box-orient vertical
      overflow hidden
      text-overflow ellipsis

    &:-webkit-scrollbar
      height 0
      width 4px

      &-button
        display none

  p
    color #333333
    margin 0
    max-width 100%
    line-height 1.6
    -webkit-line-clamp 3
    display -webkit-box
    -webkit-box-orient vertical
    font-size 13px
    font-weight normal
    overflow hidden
    text-overflow ellipsis
    transition .3s

    &:hover
      color #409eff

    img
      &:not(.tk-owo-emotion)
        display none

      &.tk-owo-emotion
        width 16px
        padding 0
        margin 0
        transform translateY(2px)

[data-theme="dark"]
  .comment-barrage-item
    background #1f1f1f
    color #ffffff
    outline 1px solid #4a4a4a
    box-shadow 0 2px 8px rgba(0, 0, 0, 0.3)

    &:hover
      outline 1px solid #409eff
      box-shadow 0 4px 12px rgba(64, 158, 255, 0.2)

    .barrageHead
      border-bottom 1px solid #3a3a3a

    .barrageNick
      color #ffffff

      &::before
        background #ff6b6b
        color #fff

    .barrageTime
      color #999999

    .barrageClose
      color #999999

      &:hover
        color #ff4444
        background #3a3a3a

    .barrageContent a
      color #ffffff

    p
      color #ffffff

      &:hover
        color #409eff

@keyframes barrageIn
  0%
    transform translateY(20px)
    opacity 0

  100%
    transform translateY(0)
    opacity 1

@keyframes barrageOut
  0%
    transform translateY(0)
    opacity 1

  100%
    transform translateY(20px)
    opacity 0

创建[博客根目录]/source/js/meuicat.js文件. 记得引入 且修改对应啊pai和token

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
const changeTime = (time, more = false) => {
    const currentDate = new Date()

    const formatTimestamp = (date) => {
        const d = new Date(date)
        const pad = (num) => String(num).padStart(2, '0')
        return `${pad(d.getFullYear())}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} `
    }

    const calculateDiff = (date1, date2, unit) => {
        const units = { day: 24 * 60 * 60 * 1000, hour: 60 * 60 * 1000 }
        return Math.floor(Math.abs(date1 - date2) / units[unit])
    }

    const describeTime = (datetime) => {
        const timeObj = new Date(datetime)
        const diffDays = calculateDiff(timeObj, currentDate, 'day')
        const diffHours = calculateDiff(timeObj, currentDate, 'hour')

        if (diffHours < 1) return `最近`
        if (diffHours <= 24) return `${diffHours}小时前`
        if (diffDays === 1) return `昨天`
        if (diffDays === 2) return `前天`
        if (diffDays <= 7) return `${diffDays}天前`

        const year = timeObj.getFullYear()
        const month = timeObj.getMonth() + 1
        const date = timeObj.getDate()
        return year !== currentDate.getFullYear() ? `${year}/${month}/${date}` : `${month}/${date}`
    }

    if (more) return formatTimestamp(time)
    if (time) return describeTime(time)

    document.querySelectorAll('time.datatime').forEach((e) => { e.textContent = describeTime(e.getAttribute('datetime')) })
}


let commentData
let commentInterval = null

const comment = {
    fetchData: async (option) => {
        const res = await fetch('{envId}', {
            method: "POST",
            body: JSON.stringify({
                "event": "GET_RECENT_COMMENTS",
                "accessToken":  "{YOUR_TOKEN}",
                "includeReply": true,
                "pageSize": 20,
                ...option
            }),
            headers: { 'Content-Type': 'application/json' }
        }).then(res => res.json())

        return res.data
    },


    barrage: async () => {
        const tlol = btf.saveToLocal.get('comment-pop')
        const barrage = document.getElementById('comment-barrage')
        if (tlol === 'off' || !barrage) return

        const ScrollBarrage = () => {
            const scrollResidue = (window.scrollY + document.documentElement.clientHeight) >= (document.getElementById("post-comment") || document.getElementById("footer")).offsetTop
            barrage.classList.toggle('show', !scrollResidue)
        }

        let box = []
        const BarrageBox = (data) => {
            const time = changeTime(new Date(data.created).toISOString(), true)

            let barrages = document.createElement('div')
            barrages.className = 'comment-barrage-item'
            barrages.innerHTML = `<div class="barrageHead"><div class="barrageNick"><div class="barrageAvatar" style="background-image: url('${data.avatar}'); width: 20px; height: 20px; border-radius: 50%; background-size: cover;"></div><span>${data.nick}</span></div><div class="barrageTime">${time} 曾评论</div><a class="barrageClose" href="javascript:comment.closeBarrage(true)"><i class="fas fa-times"></i></a></div><a class="barrageContent" href="javascript:void(0)" onclick="const el=document.getElementById('${data.id}');if(el){btf.scrollToDest(btf.getEleTop(el),300)}else{btf.scrollToDest(btf.getEleTop(document.getElementById('post-comment')),300)}"><p>${data.commentText.trim()}</p></a>`

            box.push(barrages)
            barrage.append(barrages)
        }

        btf.addEventListenerPjax(window, 'scroll', ScrollBarrage, { passive: true })

        let hoverBarrage = false, index = 0
        const url = window.location.pathname
        const allComments = await comment.fetchData({url})
        const data = allComments.filter(comment => comment.url === url)
        if (!data.length) return

        BarrageBox(data[index])

        barrage.addEventListener('mouseenter', () => hoverBarrage = true)
        barrage.addEventListener('mouseleave', () => hoverBarrage = false)

        clearInterval(commentInterval)
        commentInterval = setInterval(() => {
            if (!hoverBarrage) {
                index = (index + 1) % data.length
                BarrageBox(data[index])
            }
        }, 5000)
    },

    closeBarrage: (state = false) => {
    const removeBarrage = () => {
      const $comment = document.querySelector('#comment-barrage')
      $comment.className = 'out'
      setTimeout(() => { $comment.innerHTML = '', $comment.className = 'show' }, 1000)
    }

    if (state) return clearInterval(commentInterval), removeBarrage()

    const comments = btf.saveToLocal.get('comment-pop')
    btf.saveToLocal.set('comment-pop', comments === 'off' ? 'on' : 'off', 2)
    comments === 'off' ? comment.barrage() : (clearInterval(commentInterval), removeBarrage())
  }
}
// btf.addGlobalFn('pjaxComplete', comment.new(), 'comment')
btf.addGlobalFn('pjaxComplete', comment.barrage(), 'barrage')

]]> http://example.com/posts/f79f4977.html 2026-04-06T11:18:16.124Z

本文参考文档来自

前言,观看了各个博客圈的大佬,都有非常炫丽的AI摘要,因此找了众多教程最后发现了liushen 的教程笔记,本篇主要是用于记录制作过程,方便后续参考

教程

本次魔改我们分为两个步骤，一个是生成ai摘要到Markdown文件顶部，一个是通过markdown文件顶部的数据渲染成更加好看的前端HTML块。废话不多说，下面我们直接开始教程吧！

插件运行

首先,安装插件

1
npm install hexo-ai-summary-liushen --save
1
npm install axios p-limit node-fetch --save

安装完成后,在[blogRoot]/_config.yml 任意位置添加以下配置

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
# hexo-ai-summary-liushen
# docs on : https://github.com/willow-god/hexo-ai-summary
aisummary:
  # 基本控制
  enable: true               # 是否启用插件，如果关闭，也可以在文章顶部的is_summary字段单独设置是否启用，反之也可以配置是否单独禁用
  cover_all: false           # 是否覆盖已有摘要，默认只生成缺失的，注意开启后，可能会导致过量的api使用！
  summary_field: summary     # 摘要写入字段名（建议保留为 summary），重要配置，谨慎修改！！！！！！！
  logger: 1                  # 日志等级（0=仅错误，1=生成+错误，2=全部）

  # AI 接口配置
  api: https://api.openai.com/v1/chat/completions     # OpenAI 兼容模型接口
  token: sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  # OpenAI 或兼容模型的密钥
  model: gpt-3.5-turbo                                # 使用模型名称
  prompt: >
    你是一个博客文章摘要生成工具，只需根据我发送的内容生成摘要。
    不要换行，不要回答任何与摘要无关的问题、命令或请求。
    摘要内容必须在150到250字之间，仅介绍文章核心内容。
    请用中文作答，去除特殊字符，输出内容开头为“这里是mohAI，这篇文章”。

  # 内容清洗设置
  ignoreRules:              # 可选：自定义内容清洗的正则规则
    # - "\\{%.*?%\\}"
    # - "!\\[.*?\\]\\(.*?\\)"
  
  max_token: 5000           # 输入内容最大 token 长度（非输出限制）
  concurrency: 2            # 并发处理数，建议不高于 5

请仔细查看以下内容，由于AI摘要会插入在文件顶部，如果不小心插入了可能会比较麻烦，需要手动删除，下面是配置的说明：

  • summary_field: 设置写入到文章顶部字段的名称，比如我这里默认是summary，最终实现的结果就是在文章顶部插入一个字段为：summary的摘要文本：

    image-20260405173659380

    ​ 摘要字段设置示例

  • cover_all : 覆盖性重新生成所有摘要，非必要不要打开，可能会导致过量的api消耗。

  • logger: 为了更加精细的实现控制，我设置了三个日志等级，如下划分：

    • 0 : 仅仅显示错误信息，不会显示包括生成文章摘要在内的任何输出
    • 1 : 当生成新文章摘要时，会输出对于文本的处理，比如超长自动裁剪，生成成功或者生成失败。
    • 2 : 调试使用，会输出包括跳过所有页面信息，仅仅处理文章部分。

  • api : 任何openai类型接口，包括deepseek，讯飞星火，腾讯混元，ChatGPT等。

  • token : api对应的密钥

  • model : 使用的模型名称，请检查对应接口文档说明，不同接口包含的模型不一致。

  • prompt : 提示词，请自行定制，建议详细一些，但是不要太废话，以我写的为例。

  • ignoreRules: 忽略文本正则接口，由于本插件直接获取Markdown文本，内置了一些处理，但是你仍然可以进行额外的处理，下面是内置的文本处理规则，如果有兴趣进行修改可以进行参考：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 2. 清理内容
      content = content
        .replace(/```[\s\S]*?```/g, '')           // 代码块
        // .replace(/`[^`\n]+`/g, '')                // 行内代码
        .replace(/{%[^%]*%}/g, '')                // Hexo 标签
        .replace(/^\|.*?\|.*$/gm, '')             // 表格行
        .replace(/!\[.*?\]\(.*?\)/g, '')          // 图片
        .replace(/\[(.*?)\]\(.*?\)/g, '$1')       // 超链接文本
        .replace(/<[^>]+>/g, '')                  // HTML 标签
        .replace(/&nbsp;/g, ' ')                  // 空格实体
        .replace(/\n{2,}/g, '\n')                 // 多重换行压缩
        .replace(/^\s+|\s+$/gm, '')               // 行首尾空格
        .replace(/[ \t]+/g, ' ')                  // 多空格压缩
        .trim();

      // 3. 拼接标题
      const combined = (title ? title.trim() + '\n\n' : '') + content;

    但是大部分情况可以忽略这个配置项，留空即可。

  • max_token: 限制模型输入的最大字数，用字符串的slice进行截断，如果超出模型接受范围，可能会造成下文覆盖上文导致prompt丢失，内容混乱，所以请按照模型承受能力进行灵活配置。

  • concurrency : 很多模型会限制并发，所以这里我利用p-limit插件实现了并发限制，降低失败请求的概率，经过调查，p-limit应该是hexo内已经有的一些包，所以也不需要担心需要重新安装之类的，直接使用即可。

配置好后执行

1
2
3
npx hexo cl 
npx hexo g
npx hexo s

如果一切正常，应该可以在每篇文章的顶部看到对应的摘要文段。

hexo 适配

注意事项 下面的教程使用于 butterfly 或者 butterfly衍生的主题.如果是其他主题,请执行配置

添加配置

目前我们已经自动化了从AI中，喂我们的文章给AI，再生成摘要，再写到文件顶部的过程，下面我们开始进行从文件顶部渲染到网站页面上。

首先在主题配置文件[blogRoot]/config.butterfly.yml文件中写入配置，方便我们进行控制摘要是否开启：

1
2
3
4
5
6
7
8
9
10
# --------------------------------------
# 文章设置
# --------------------------------------
# 文章AI摘要是否开启，会自动检索文章色summary字段，若没有则不显示
ai_summary:
  enable: true
  title: mohのAI摘要
  loadingText: 清羽AI正在绞尽脑汁想思路ING···
  modelName: HunYuan-Lite

这里的内容均为装饰性内容，除了enable选项，其他没有任何控制效果，都是装饰，所以无需担心，可以先按照我的写，后面再根据效果修改。

添加模版

下面找到主题文件下的[blogRoot]/theme/butterfly/layout/post.pug文件，添加文件中指出来的两行内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
extends includes/layout.pug

block content
  #post
    if top_img === false
      include includes/header/post-info.pug

    article#article-container.container.post-content
+      if page.summary && theme.ai_summary.enable
+        include includes/post/post-summary.pug
      if theme.noticeOutdate.enable && page.noticeOutdate !== false
        include includes/post/outdate-notice.pug
      else
        !=page.content
    include includes/post/post-copyright.pug
    .tag_share

删除➕号即可,注意格式缩进

面添加组件，创建文件`[blogRoot]/theme/butterfly/layout/includes/post/post-summary.pug，写入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.ai-summary
    .ai-topbar
        .ai-topbar-btns
            span.ai-dot.ai-dot-red
            span.ai-dot.ai-dot-yellow
            span.ai-dot.ai-dot-green
        .ai-topbar-about
            button#ai-about-btn 关于 AI

    .ai-explanation(style="display: block;" data-summary=page.summary)=theme.ai_summary.loadingText

    .ai-title
        .ai-title-left
            i.fa-brands.fa-slack
            .ai-title-text=theme.ai_summary.title
        .ai-tag#ai-tag= theme.ai_summary.modelName

添加样式

这样，html部分就实现好了！下面我们添加样式部分，创建文件[blogRoot]/theme/butterfly/source/css/_layout/ai-summary.styl文件，写入：

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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201

// ===================
// 🌗 主题变量定义（仅使用项）
// ===================

:root
  // ai_summary
  --liushen-title-font-color: #0883b7
  --liushen-maskbg: rgba(255, 255, 255, 0.85)
  --liushen-ai-bg: conic-gradient(from 1.5708rad at 50% 50%, #d6b300 0%, #42A2FF 54%, #d6b300 100%)

  // card 背景
  --liushen-card-secondbg: #f1f3f8

  // text
  --liushen-text: #4c4948
  --liushen-secondtext: #3c3c43cc

[data-theme='dark']
  // ai_summary
  --liushen-title-font-color: #0883b7
  --liushen-maskbg: rgba(0, 0, 0, 0.85)
  --liushen-ai-bg: conic-gradient(from 1.5708rad at 50% 50%, rgba(214, 178, 0, 0.46) 0%, rgba(66, 161, 255, 0.53) 54%, rgba(214, 178, 0, 0.49) 100%)

  // card 背景
  --liushen-card-secondbg: #3e3f41

  // text
  --liushen-text: #ffffffb3
  --liushen-secondtext: #a1a2b8

// ===================
// 📘 AI 摘要模块样式
// ===================

if hexo-config('ai_summary.enable')
  .ai-summary
    background-color var(--liushen-maskbg)
    background var(--liushen-card-secondbg)
    border-radius 12px
    padding 8px 8px 12px 8px
    line-height 1.3
    flex-direction column
    margin-bottom 16px
    display flex
    gap 5px
    position relative

    // ✅ 新增：顶栏样式（仿 macOS 窗口风格）
    .ai-topbar
      display flex
      justify-content space-between
      align-items center
      padding 6px 10px
      margin-bottom 6px
      border-radius 8px
      background rgba(255, 255, 255, 0.5)
      position relative
      z-index 10

      .ai-topbar-btns
        display flex
        gap 6px

        .ai-dot
          width 12px
          height 12px
          border-radius 50%
          display inline-block

          &.ai-dot-red
            background #ff5f56

          &.ai-dot-yellow
            background #ffbd2e

          &.ai-dot-green
            background #27c93f

      .ai-topbar-about
        button
          background #49b1f5
          color white
          border none
          border-radius 15px
          padding 4px 14px
          font-size 12px
          cursor pointer
          transition all 0.3s
          font-weight 500

          &:hover
            background #3a9bd5
            transform scale(1.05)

          &:active
            transform scale(0.98)

    &::before
      content ''
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      z-index 1
      filter blur(8px)
      opacity .4
      background-image var(--liushen-ai-bg)
      transform scaleX(1) scaleY(.95) translateY(2px)

    &::after
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      border-radius: 12px;
      background: var(--liushen-maskbg);

    .ai-explanation
      z-index 10
      padding 8px 12px
      font-size 15px
      line-height 1.4
      color var(--liushen-text)
      text-align justify

      // ✅ 打字机光标动画
      &::after
        content ''
        display inline-block
        width 8px
        height 2px
        margin-left 2px
        background var(--liushen-text)
        vertical-align bottom
        animation blink-underline 1s ease-in-out infinite
        transition all .3s
        position relative
        bottom 3px

      // 平滑滚动动画
      // .char
      //   display inline-block
      //   opacity 0
      //   animation chat-float .5s ease forwards

    .ai-title
      z-index 10
      font-size 14px
      display flex
      border-radius 8px
      align-items center
      position relative
      padding 0 12px
      cursor default
      user-select none

      .ai-title-left
        display flex
        align-items center
        color var(--liushen-title-font-color)

        i
          margin-right 3px
          display flex
          color var(--liushen-title-font-color)
          border-radius 20px
          justify-content center
          align-items center

        .ai-title-text
          font-weight 500

      .ai-tag
        color var(--liushen-secondtext)
        font-weight 300
        margin-left auto
        display flex
        align-items center
        justify-content center
        transition .3s

  // 平滑滚动动画
  // @keyframes chat-float
  //   0%
  //     opacity 0
  //     transform translateY(20px)
  //   100%
  //       opacity 1
  //       transform translateY(0)

  // ✅ 打字机光标闪烁动画
  @keyframes blink-underline
    0%, 100%
      opacity 1
    50%
      opacity 0

样式也实现啦！目前就差将我们的摘要插入到我们的网站就大功告成啦，为了实现的更加逼真，我这里实现了两种样式一个是打字机效果，一个是平滑显示效果，可以按需引入：

添加核心js

下面我会介绍两种动效，可以按照自己的需求在自定义js文件中并在配置文件进行引入即可，两个的区别是，打字机效果更加的节省性能，而平滑显示，因为每个文本为一个span，所以会比较耗费性能。

打字机效果

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
// 打字机效果
function typeTextMachineStyle(text, targetSelector, options = {}) {
    const {
        delay = 50,
        startDelay = 2000,
        onComplete = null,
        clearBefore = true,
        eraseBefore = true, // 新增：是否以打字机方式清除原文本
        eraseDelay = 30,    // 新增：删除每个字符的间隔
    } = options;

    const el = document.querySelector(targetSelector);
    if (!el || typeof text !== "string") return;

    setTimeout(() => {
        const startTyping = () => {
            let index = 0;
            function renderChar() {
                if (index <= text.length) {
                    el.textContent = text.slice(0, index++);
                    setTimeout(renderChar, delay);
                } else {
                    onComplete && onComplete(el);
                }
            }
            renderChar();
        };

        if (clearBefore) {
            if (eraseBefore && el.textContent.length > 0) {
                let currentText = el.textContent;
                let eraseIndex = currentText.length;

                function eraseChar() {
                    if (eraseIndex > 0) {
                        el.textContent = currentText.slice(0, --eraseIndex);
                        setTimeout(eraseChar, eraseDelay);
                    } else {
                        startTyping(); // 删除完毕后开始打字
                    }
                }

                eraseChar();
            } else {
                el.textContent = "";
                startTyping();
            }
        } else {
            startTyping();
        }
    }, startDelay);
}

function renderAISummary() {
    const summaryEl = document.querySelector('.ai-summary .ai-explanation');
    if (!summaryEl) return;

    const summaryText = summaryEl.getAttribute('data-summary');
    if (summaryText) {
        typeTextMachineStyle(summaryText, ".ai-summary .ai-explanation"); // 如果需要切换，在这里调用另一个函数即可
    }

    // 绑定关于 AI 按钮点击事件
    const aboutBtn = document.getElementById('ai-about-btn');
    if (aboutBtn) {
        aboutBtn.addEventListener('click', function() {
            window.location.reload();
        });
    }
}

document.addEventListener('pjax:complete', renderAISummary);
document.addEventListener('DOMContentLoaded', renderAISummary);

平滑显示效果

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
 // 平滑弹出效果
 function typeText(text, targetSelector, options = {}) {
     const {
       delay = 50,          // 每个字符之间的延迟（毫秒）
       startDelay = 2000,   // 开始打字前的延迟（默认 3 秒）
       onComplete = null,   // 动画完成后的回调
       clearBefore = true   // 是否在开始前清空原有内容
     } = options;

     const targetEl = document.querySelector(targetSelector);
     if (!targetEl || typeof text !== "string") return;

     // if (clearBefore) targetEl.textContent = "";

     let index = 0;
     let frameId = null;

     function renderChar() {
       if (index < text.length) {
         const span = document.createElement("span");
         span.textContent = text[index++];
         span.className = "char";
         targetEl.appendChild(span);
         frameId = requestAnimationFrame(() => setTimeout(renderChar, delay));
       } else {
         cancelAnimationFrame(frameId);
         onComplete && onComplete(targetEl);
       }
     }

     setTimeout(() => {
         if (clearBefore) targetEl.textContent = "";
         renderChar();
     }, startDelay);
 }

function renderAISummary() {
    const summaryEl = document.querySelector('.ai-summary .ai-explanation');
    if (!summaryEl) return;

    const summaryText = summaryEl.getAttribute('data-summary');
    if (summaryText) {
        typeText(summaryText, ".ai-summary .ai-explanation"); // 如果需要切换，在这里调用另一个函数即可
    }
}

document.addEventListener('pjax:complete', renderAISummary);
document.addEventListener('DOMContentLoaded', renderAISummary);

注意，平滑滚动部分的css，我默认注释掉了，请在样式文件中自行打开注释。

这样，一个自己实现的AI摘要就完工啦！

关于AI夜晚适配样式

加入任意自定义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
/* --- AI 摘要夜间模式适配 --- */
[data-theme='dark'] .ai-summary {
    /* 调整夜间背景色，使其与卡片背景融合 */
    background: var(--card-bg) !important;
    border: 1px solid var(--hr-border) !important;
}

/* 适配夜间模式的顶栏 */
[data-theme='dark'] .ai-summary .ai-topbar {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* 适配夜间模式的“关于”按钮 */
[data-theme='dark'] .ai-summary .ai-topbar-about button {
    background: #3e4c59 !important; /* 深色按钮背景 */
    color: #a1a2b8 !important;      /* 浅色文字 */
}

[data-theme='dark'] .ai-summary .ai-topbar-about button:hover {
    background: #49b1f5 !important; /* 悬停时变亮 */
    color: #fff !important;
}

/* 确保夜间模式下文字清晰 */
[data-theme='dark'] .ai-summary .ai-explanation {
    color: var(--font-color) !important;
}

[data-theme='dark'] .ai-summary .ai-title-left {
    color: #49b1f5 !important; /* 标题图标颜色 */
}

参考文章

✅来自本站，本站可确保其安全性，请放心点击跳转
liushen的Butterfly魔改教程
效果展示
]]> http://example.com/posts/ee57c6e1.html 2026-04-05T09:21:25.462Z

前言,观看了各个博客圈的大佬,都有非常炫丽的AI摘要,因此找了众多教程最后发现了liushen 的教程笔记,本篇主要是用于记录制作过程,方便后续参考

 魔改笔记三:本地实现hexo文章AI摘要 2026-04-06T15:13:12.215Z moh

本文中的[blogRoot] 是指你博客的根目录

如何引用自定义的js

首先你要创建文件夹

1
[blogRoot]/source/js

示例:

创建文件

1
[blogRoot]/source/js/custom.js

在[blogRoot]/_config.butterfly.yml中添加代码

1
2
3
4
5
6
7
8
9

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
inject:
  head:
  bottom:
    - <script defer src="/js/custom.js"></script>
    - <script data-pjax type="text/javascript" src="/js/{把大括号里面的这个换成你的js名字}.js"></script

注意:

* 如果使用 pjax 建议加上 `data-pjax`

如何引用自定义的css

首先你要创建文件夹

1
[blogRoot]/source/css

示例:

创建文件

1
[blogRoot]/source/js/custom.css

在[blogRoot]/_config.butterfly.yml中添加代码

1
2
3
4
5
6
7
8
9

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
inject:
  head:
    - <script defer src="/js/custom.css"></script>
  bottom:
    - <script defer src="/js/custom.js"></script>

注意:

* 引用css一定要写在head,否侧可能会出现短暂无css
]]> http://example.com/posts/af2ccca0.html 2026-04-05T02:42:09.065Z

本文中的[blogRoot] 是指你博客的根目录

<]]>

魔改前置知识 2026-04-05T14:21:38.395Z moh 魔改教程

注意: 由于本次魔改修改了主题内部文件,一定要注意提前备份! 一定要注意提前备份! 一定要注意提前备份!

分类条

我原有的分类条采用的是小冰的分类卡片,但是我中感觉占用空间较大,且出现多个分类会显示滚动条.我个人觉得不够美观,因此在网上查找分类条的魔改,正好看到了 liushen 博主发的文章,由于liushen博主的魔改教程是适用于旧版的butterfly主题,而我采用的是新版的butterfly主题,因此做了这篇教程.如果没有魔改基础建议紧跟教程，如果有任何问题可以在下方评论区提出。

效果真实图

image-20260404214007957

教程

1、新建文件 [BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件,写入

1
2
3
4
5
6
7
8
9
10
11
.category-bar-items#category-bar-items(class=is_home() ? 'home' : '')
  .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home")
    a(href=url_for('/'))= __('博客首页')
  each item in site.categories.find({ parent: { $exists: false } }).data
    .category-bar-item(class=select ? (select === item.name ? 'select' : '') : '', id=item.name)
      a(href=url_for(item.path))= item.name
  .category-bar-item
    a(href=url_for('/archives/'))= __('文章存档')
div.category-bar-right
  a.category-bar-more(href=url_for('/categories/'))= __('更多分类')

以上就是该滚动条的结构，下面我们开始实现样式的定义，

2、新建文件[BlogRoot]\themes\butterfly\source\css\_layout\category-bar.styl写入以下文件：

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
#category-bar
  padding 7px 11px
  background var(--card-bg)
  border-radius 8px
  display flex
  white-space nowrap
  overflow hidden
  transition 0.3s
  height 50px
  width 100%
  justify-content space-between
  user-select none
  align-items center
  margin-bottom 20px

  .category-bar-right
    display flex
    border-radius 8px
    align-items center

    .category-bar-more
      margin-left 4px
      margin-right 4px
      font-weight 700
      border-radius 8px
      padding 0 8px

  .category-bar-items
    width 100%
    white-space nowrap
    overflow-x scroll
    scrollbar-width: none
    -ms-overflow-style: none
    overflow-y hidden
    display flex
    border-radius 8px
    align-items center
    height 30px

    &::-webkit-scrollbar
      display: none

    .category-bar-item
      a
        padding .1rem .5rem
        margin-right 6px
        font-weight 700
        border-radius 8px
        display flex
        align-items center
        height 30px

      &.select
        a
          background #3eb8be
          color var(--btn-color)

3、打开文件[BlogRoot]\themes\butterfly\layout\includes\mixins\indexPostUI.pug

方式一:添加以下两行代码，删除+号 

1
2
3
4
5
6
7
8
9
mixin indexPostUI()
  - const indexLayout = theme.index_layout
  - const masonryLayoutClass = (indexLayout === 6 || indexLayout === 7) ? 'masonry' : ''
  #recent-posts.recent-posts.nc(class=masonryLayoutClass)
+    #category-bar.category-bar
+      include ../categoryBar.pug
    .recent-post-items
      each article, index in page.posts.data

方式二:直接复制下面一份代码直接对整个文件进行替换

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
mixin indexPostUI()
  - const indexLayout = theme.index_layout
  - const masonryLayoutClass = [6, 7].includes(indexLayout) ? 'masonry' : ''
  #recent-posts.recent-posts.nc(class=masonryLayoutClass)
    #category-bar.category-bar
      include ../categoryBar.pug
    .recent-post-items
      each article, index in page.posts.data
        .recent-post-item
          - const link = article.link || article.path
          - const title = article.title || _p('no_title')
          - const leftOrRight = indexLayout === 3 ? (index % 2 === 0 ? 'left' : 'right') : (indexLayout === 2 ? 'right' : '')
          - const postCover = article.cover
          - const noCover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''

          if postCover && theme.cover.index_enable
            .post_cover(class=leftOrRight)
              a(href=url_for(link) title=title)
                if article.cover_type === 'img'
                  img.post-bg(src=url_for(postCover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
                else
                  div.post-bg(style=`background: ${postCover}`)
          .recent-post-info(class=noCover)
            a.article-title(href=url_for(link) title=title)
              if globalPageType === 'home' && (article.top || article.sticky > 0)
                i.fas.fa-thumbtack.sticky
              = title
            .article-meta-wrap
              if theme.post_meta.page.date_type
                span.post-meta-date
                  if theme.post_meta.page.date_type === 'both'
                    i.far.fa-calendar-alt
                    span.article-meta-label=_p('post.created')
                    time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
                    span.article-meta-separator |
                    i.fas.fa-history
                    span.article-meta-label=_p('post.updated')
                    time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))= date(article.updated, config.date_format)
                  else
                    - const isUpdatedType = theme.post_meta.page.date_type === 'updated'
                    - const dateType = isUpdatedType ? 'updated' : 'date'
                    - const dateIcon = isUpdatedType ? 'fas fa-history' : 'far fa-calendar-alt'
                    - const dateTitle = isUpdatedType ? _p('post.updated') : _p('post.created')
                    i(class=dateIcon)
                    span.article-meta-label= dateTitle
                    time(datetime=date_xml(article[dateType]) title=dateTitle + ' ' + full_date(article[dateType]))= date(article[dateType], config.date_format)
              if theme.post_meta.page.categories && article.categories.data.length > 0
                span.article-meta
                  span.article-meta-separator |
                  each item, index in article.categories.data
                    i.fas.fa-inbox
                    a(href=url_for(item.path)).article-meta__categories #[=item.name]
                    if index < article.categories.data.length - 1
                      i.fas.fa-angle-right.article-meta-link
              if theme.post_meta.page.tags && article.tags.length > 0
                span.article-meta.tags
                  span.article-meta-separator |
                  each item, index in article.tags.data
                    i.fas.fa-tag
                    a(href=url_for(item.path)).article-meta__tags #[=item.name]
                    if index < article.tags.data.length - 1
                      span.article-meta-link #[='•']

              mixin countBlockInIndex
                - needLoadCountJs = true
                span.article-meta
                  span.article-meta-separator |
                  i.fas.fa-comments
                  if block
                    block
                  span.article-meta-label= ' ' + _p('card_post_count')

              if theme.comments.card_post_count && theme.comments.use
                - const commentSystem = theme.comments.use[0]
                - const commentLink = url_for(link) + '#post-comment'

                case commentSystem
                  when 'Disqus'
                  when 'Disqusjs'
                    +countBlockInIndex
                      a.disqus-count(href=full_url_for(link) + '#post-comment')
                        i.fa-solid.fa-spinner.fa-spin
                  when 'Valine'
                    +countBlockInIndex
                      a(href=commentLink)
                        span.valine-comment-count(data-xid=url_for(link))
                          i.fa-solid.fa-spinner.fa-spin
                  when 'Waline'
                    +countBlockInIndex
                      a(href=commentLink)
                        span.waline-comment-count(data-path=url_for(link))
                          i.fa-solid.fa-spinner.fa-spin
                  when 'Twikoo'
                    +countBlockInIndex
                      a.twikoo-count(href=commentLink)
                        i.fa-solid.fa-spinner.fa-spin
                  when 'Facebook Comments'
                    +countBlockInIndex
                      a(href=commentLink)
                        span.fb-comments-count(data-href=urlNoIndex(article.permalink))
                  when 'Remark42'
                    +countBlockInIndex
                      a(href=commentLink)
                        span.remark42__counter(data-url=urlNoIndex(article.permalink))
                          i.fa-solid.fa-spinner.fa-spin
                  when 'Artalk'
                    +countBlockInIndex
                      a(href=commentLink)
                        span.artalk-count(data-page-key=url_for(link))
                          i.fa-solid.fa-spinner.fa-spin

            //- Display the article introduction on homepage
            - const content = postDesc(article)
            if content
              .content!=content

        if theme.ad && theme.ad.index
          if (index + 1) % 3 === 0
            .recent-post-item.ads-wrap!= theme.ad.index

    include ../pagination.pug

4、打开[BlogRoot]\themes\butterfly\source\js\main.js，添加js函数，比如我添加到了778行左右，switchComments函数的上面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
   * 自己写的，实现功能切换类别表
   */ 
  const setCategoryBarActive = () => {
    const categoryBar = document.querySelector("#category-bar");
    const currentPath = decodeURIComponent(window.location.pathname);
    const isHomePage = currentPath === GLOBAL_CONFIG.root;

    if (categoryBar) {
        const categoryItems = categoryBar.querySelectorAll(".category-bar-item");
        categoryItems.forEach(item => item.classList.remove("select"));

        const activeItemId = isHomePage ? "category-bar-home" : currentPath.split("/").slice(-2, -1)[0];
        const activeItem = document.getElementById(activeItemId);

        if (activeItem) {
            activeItem.classList.add("select");
        }
    }
};

然后再在引用部分执行这个函数，在同一个文件，找到下面的函数并添加函数的调用，位置看下方注释：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.refreshFn = function () {
  initAdjust()

  if (GLOBAL_CONFIG_SITE.isPost) {
    GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
    GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
  } else {
    GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time'))
    GLOBAL_CONFIG.runtime && addRuntime()
    addLastPushDate()
    toggleCardCategory()
    setCategoryBarActive()      // 自己加的，用于切换类别栏目
  }

5、打开[BlogRoot]/_config.butterfly.yml 文件中修改以下配置

1
category_ui: index

最后，hexo三件套，应该就能看到效果了！请根据自己的需要进行定制化。

由于我对框架进行了魔改,因此出现了以下bug

就是出现在对应的页面不会显示对应的tag

image-20260404225640499

因此需要在自定义的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
/*======================================================*/


/* 分类页面分页样式修复 - 确保当前页背景色正常显示 */
#category .pagination .page-number.current {
  background: var(--theme-paginator-color, #00c4b6) !important;
  color: #fff !important;
}

/* 归档页面分页样式保持一致 */
#archive .pagination .page-number.current {
  background: var(--theme-paginator-color, #00c4b6) !important;
  color: #fff !important;
}

/* 标签页面分页样式保持一致 */
#tag .pagination .page-number.current {
  background: var(--theme-paginator-color, #00c4b6) !important;
  color: #fff !important;
}

/* 确保分页按钮在悬停时也有正确的样式 */
#category .pagination > *:not(.space):not(.current):hover,
#archive .pagination > *:not(.space):not(.current):hover,
#tag .pagination > *:not(.space):not(.current):hover {
  background: var(--btn-hover-color) !important;
  color: var(--btn-color) !important;
}


参考文章

✅来自本站，本站可确保其安全性，请放心点击跳转
liushen的Butterfly魔改教程
效果展示
]]> http://example.com/posts/adc35f4d.html 2026-04-04T13:32:03.214Z 魔改教程

注意: 由于本次魔改修改了主题内部文件,一定要注意提前备份! 一定要注意提前备份! 一定要注意提前备份!

魔改笔记二:文章分类条 2026-04-05T14:21:38.400Z moh 个人卡片背景图

1、在自建的css样式中加入一下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[data-theme="light"] #aside-content > .card-widget.card-info {
    background-image: url(https://s11.ax1x.com/2023/05/02/p9GWEin.jpg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%;
}
[data-theme="dark"] #aside-content > .card-widget.card-info {
    background-image: url(https://s11.ax1x.com/2023/05/02/p9GWVGq.jpg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%;
}

/* 个人信息卡片背景图 */

归档、分类详情页卡片样式开发

预览

🪧引用站外地址，不保证站点的可用性和安全性
Hexo的Butterfly魔改教程
效果展示

首先创建根目录/source/css/layout.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
/* 归档、标签、分类页 */
:root {
    --ichika-color: rgba(100, 180, 239, 0.51);
    --ichika-hover-color: #ECAFFF;
    --ichika-widget-hover: #CFF0FF;
    --ichika-font-white: #FDFDFD;
    --ichika-light-green: #B2FFCA;
    --ichika-light-purple: #F6B9FF;
    --ichika-green: #11D991;
    --ichika-purple: #E764FF;
    --ichika-light-grey: #F2F2F2;
    --ichika-card-bg: rgba(255,255,255,0.45);
    --ichika-emphasis-color: #F7F81A;
    --ichika-bgblur: blur(10px);
    --ichika-footer-bg: linear-gradient(to bottom,transparent 0%,rgba(255,255,255,0.7) 40%);
    --ichika-font-grey: #888888;
    --ichika-categorycard-bg: linear-gradient(to top,rgba(255,255,255,0),rgba(255,255,255,1))
}

[data-theme='dark'] {
    --global-bg:black;
    --ichika-color: #1688C9;
    --ichika-widget-hover: #1B6587;
    --ichika-card-bg: rgba(0,0,0,0.7);
    --ichika-footer-bg: linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.7) 40%);
    --ichika-font-grey: #BBBBBB;
    --ichika-categorycard-bg:linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,1))
}


.layout.hide-aside{
    max-width:1200px;
}

#archive,#tag,#category {
    background: var(--ichika-card-bg);
    padding: 25px 10px;
}

.article-sort-title{
    margin-top:30px;
    margin-bottom:20px;
}

.article-sort-item::before, .article-sort-title::before, .article-sort-title::after {
    content: none;
}

.article-sort .year{
    width:100%!important;
    border-bottom:dashed 5px var(--ichika-color);
    font-size:26px;
    margin-top:20px;
}

.article-sort{
    border:none;
    display:flex;
    flex-wrap:wrap;
    margin:20px 20px;
    padding:0;
}

.article-sort-item:not(.year){
    padding:8px 10px;
    width:calc(50% - 0.8rem);
    margin:0.4rem;
    border:2px solid var(--ichika-color);
    border-radius:15px;
    background:var(--card-bg);
    transition:0.5s;
    height:120px;
}

.article-sort-item-a{
    position:absolute;
    width:100%;
    height:100%;
}

.article-sort-item-img{
    transition:0.5s;
    height:90px;
    width:140px;
}

.article-sort-item > a >img{
    border-radius:15px;
}

.article-sort-item-title {
    font-size: 22px;
    padding-left: 10px;
    margin: 10px 0;
    line-height:25px;
    text-overflow:ellipsis;
}

.article-sort-item-title:hover{
    transform:none;
}

.article-sort-meta{
    height:max-content;
    position:relative;
}

.article-sort-meta > .article-meta-wrap{
    float:left;
}

.article-sort-meta > .article-sort-item-time{
    float:right;
}

.article-sort-item-categories,.article-sort-item-tags{
    margin:0 3px;
    padding:5px 8px;
    border-radius:25px;
    border:1px solid var(--dark-grey);
    font-size:12px;
    transition:0.5s;
}

.article-sort-item-info > div:not(.article-sort-meta){
    display:flex;
}

.article-sort-description,.article-sort-item > i{
    width:0;
    opacity:0;
    overflow:hidden;
    transition:0.5s;
}

.article-sort-description {
    width: 0;
    height: 59px;
    vertical-align: middle;
    margin: 5px 10px 0 15px;
    text-overflow:ellipsis;
}

.article-sort-item:hover:not(.year){
    background-color:var(--ichika-color);
    box-shadow: 0 0 10px var(--ichika-color);
}

.article-sort-item:hover:not(.year){
    background-color:var(--ichika-color);
    box-shadow: 0 0 10px var(--ichika-color);
}

.article-sort-item:hover:not(.year) .article-sort-description,.article-sort-item:hover:not(.year) > i{
    width:auto;
    opacity:1;
}

.article-sort-item:hover:not(.year) .article-sort-description{
    width:auto;
}

.article-sort-item:hover:not(.year) .article-sort-item-img{
    transition:0.5s;
    width:0;
}

.article-sort-item:hover:not(.year) .article-sort-item-title{
    color:var(--ichika-font-white)!important;
}

.article-sort-item:hover:not(.year) .article-meta-wrap a,.article-sort-item:hover:not(.year) .article-sort-description,.article-sort-item:hover:not(.year) .article-sort-item-time{
    color:var(--ichika-light-grey)!important;
}

.article-sort-item:hover:not(.year) .article-sort-item-categories{
    border:1.5px solid var(--ichika-green);
}

.article-sort-item:hover:not(.year) .article-sort-item-tags{
    border:1.5px solid var(--ichika-purple);
}

.article-sort-item:hover:not(.year) .article-sort-item-categories:hover{
    background:var(--ichika-green);
    box-shadow:0 0 5px var(--ichika-green);
}

.article-sort-item:hover:not(.year) .article-sort-item-tags:hover{
    background:var(--ichika-purple);
    box-shadow:0 0 5px var(--ichika-purple);
}

@media screen and (max-width:768px) {
    .article-sort-item:not(.year) {
        width: 100%;
    }

    .article-sort-meta > .article-meta-wrap {
        display: none;
    }

    .article-sort-item-title {
        font-size: 16px;
    }

    .article-sort-item-img{
        width:90px;
    }
}


将themes/butterfly/layout/includes/mixins/article-sort.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
mixin articleSort(posts)
  .article-sort
    - var year
    - posts.each(function (article) {
      - let tempYear = date(article.date, 'YYYY')
      - let no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
      - let title = article.title || _p('no_title')
      if tempYear !== year
        - year = tempYear
        .article-sort-item.year= year
      .article-sort-item(class=no_cover)
        a.article-sort-item-a(href=url_for(article.path) title=title)
        if article.cover && theme.cover.archives_enable
          a.article-sort-item-img(href=url_for(article.path) title=title)
            img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
        .article-sort-item-info
          div
            a.article-sort-item-title(href=url_for(article.path) title=title)= title
            .article-sort-description= article.description
          .article-sort-meta
            .article-meta-wrap
              if (theme.post_meta.page.categories && article.categories.data.length > 0)
                span.article-sort-item-categories
                  each item, index in article.categories.data
                    a(href=url_for(item.path)).article-meta__categories #[=item.name]
                    if (index < article.categories.data.length - 1)
                      i.fas.fa-angle-right
              if (theme.post_meta.page.tags && article.tags.data.length > 0)
                span.article-sort-item-tags
                  each item, index in article.tags.data
                    a(href=url_for(item.path)).article-meta__tags #[=item.name]
                    if (index < article.tags.data.length - 1)
                      span.article-meta__link #[=' ']
            .article-sort-item-time
              i.far.fa-calendar-alt
              time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
        i.fas.fa-chevron-right
    - })

参考文章:

🪧引用站外地址，不保证站点的可用性和安全性
Hexo的Butterfly魔改教程
效果展示

欢迎来访者(侧边栏)

由于liushen给出的api代码不全,因此我完善了api内容,就有了以下的教程

效果图:

image-20260405102231574

教程开始

按照惯例,我们先实现插入html结构 ,新建pug文件如下:

1
[BlogRoot]\themes\butterfly\layout\includes\widget\card_welcome.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
.card-widget.card-welcome
  .item-headline
    i.fa.fa-user
    span 欢迎来访者!
  .item-content
    p 👋🏻我是moh，一个
      span(style="font-weight: bold; color: #3498db") 热爱编程
      | 的技术爱好者，喜欢分享经验。😊 
    p ❓有问题欢迎提问，确保内容有意义，详情请见
      a(href="https://how-to-ask.liushen.fun/" target="_blank" style="font-weight: bold; color: #2980b9") 提问的智慧
      | 。如需联系我，欢迎通过
      a(href="mailto:01@liushen.fun" style="font-weight: bold; color: #9b59b6") 邮箱
      | 联系我！📧
  #welcome-info
    .error-message(style="height: 200px; display: flex; justify-content: center; align-items: center;")
      p(style="text-align: center;")
        span(style="font-size: 40px;") 😥 
        br
        span(style="font-size: 16px;") 由于网络问题
        br
        span(style="font-size: 16px;") 位置API请求错误
        br
        span(style="font-size: 16px;") 请刷新重试呀🤗~

结构实现了，下面将该结构插入到对应的位置，可以在当前目录下的index.pug找到对应结构，如下：

文件路径:

1
[BlogRoot]\themes\butterfly\layout\includes\widget\index.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
#aside-content.aside-content
  //- post
  if is_post()
    - const tocStyle = page.toc_style_simple
    - const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
    if showToc && tocStyleVal
      .sticky_layout
        include ./card_post_toc.pug
    else
      !=partial('includes/widget/card_author', {}, {cache: true})
      !=partial('includes/widget/card_poem', {}, {cache: true})
      !=partial('includes/widget/card_rewards', {}, {cache: true})
      !=partial('includes/widget/card_announcement', {}, {cache: true})
      !=partial('includes/widget/card_top_self', {}, {cache: true})
      .sticky_layout
        if showToc
          include ./card_post_toc.pug
        if page.series
          include ./card_post_series.pug
        !=partial('includes/widget/card_recent_post', {}, {cache: true})
        !=partial('includes/widget/card_ad', {}, {cache: true})
  else
    //- page
    !=partial('includes/widget/card_author', {}, {cache: true})
+   !=partial('includes/widget/card_welcome', {}, {cache: true})
    !=partial('includes/widget/card_poem', {}, {cache: true})
    !=partial('includes/widget/card_rewards', {}, {cache: true})
    !=partial('includes/widget/card_announcement', {}, {cache: true})
    !=partial('includes/widget/card_top_self', {}, {cache: true})

    .sticky_layout
      if showToc
        include ./card_post_toc.pug
      !=partial('includes/widget/card_recent_post', {}, {cache: true})
      !=partial('includes/widget/card_ad', {}, {cache: true})
      !=partial('includes/widget/card_newest_comment', {}, {cache: true})
      !=partial('includes/widget/card_categories', {}, {cache: true})
      !=partial('includes/widget/card_tags', {}, {cache: true})
      !=partial('includes/widget/card_archives', {}, {cache: true})
      !=partial('includes/widget/card_webinfo', {}, {cache: true})
      !=partial('includes/widget/card_bottom_self', {}, {cache: true})

结构实现了，还需要实现其样式，新建以下文件：

1
[BlogRoot]\themes\butterfly\source\css\_layout\card-welcome.styl

写入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#aside-content
    .card-widget.card-welcome
        padding: 8px
        .item-headline
            margin: 12px 16px 0 16px
        .item-content
            margin: 0 16px 10px 16px
        #welcome-info
            text-align center
            background-color: var(--liushen-card-bg)
            border-radius: 12px
            padding: 16px
            margin: 8px
            // border: 2px solid var(--liushen-text)
            .ip-address
                // 模糊效果
                filter: blur(5px)
                color: var(--default-bg-color)
                transition: filter 0.5s
                &:hover
                    filter: none

经过渲染应该就可以看到结果了。

不过由于我们的访客卡片需要调用api，所以还需要js的配合，在任意自定义js文件中添加以下内容：

新建以下文件:

1
[BlogRoot]/source/js/card-welcome.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
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
// 显示欢迎信息
// 计算两点之间的距离（单位：公里）
function getDistance(lat1, lon1, lat2, lon2) {
    const R = 6371;
    const dLat = (lat2 - lat1) * Math.PI / 180;
    const dLon = (lon2 - lon1) * Math.PI / 180;
    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    return Math.round(R * c);
}

// 获取IP位置信息
function fetchIpLocation() {
    return fetch('http://ip-api.com/json/?fields=status,message,country,regionName,city,lat,lon,query&lang=zh-CN')
        .then(response => response.json())
        .then(data => {
            if (data.status !== 'success') {
                throw new Error(data.message || 'IP定位失败');
            }
            return {
                ip: data.query,
                data: {
                    country: data.country,
                    prov: data.regionName,
                    city: data.city,
                    district: '',
                    lng: data.lon,
                    lat: data.lat
                }
            };
        })
        .catch(error => {
            console.error('获取IP位置信息失败:', error);
            return null;
        });
}
function showWelcome(ipLocation) {
    if (!ipLocation || !ipLocation.data) {
        console.error('ipLocation data is not available.');
        return;
    }

    let dist = getDistance(24.4798, 118.0894, ipLocation.data.lat, ipLocation.data.lng);
    let pos = ipLocation.data.country;
    let ip = ipLocation.ip;
    let posdesc;

    // 以下的代码需要根据新API返回的结果进行相应的调整
    switch (ipLocation.data.country) {
        case "日本":
            posdesc = "よろしく，一起去看樱花吗";
            break;
        case "美国":
            posdesc = "Let us live in peace!";
            break;
        case "英国":
            posdesc = "想同你一起夜乘伦敦眼";
            break;
        case "俄罗斯":
            posdesc = "干了这瓶伏特加！";
            break;
        case "法国":
            posdesc = "C'est La Vie";
            break;
        case "德国":
            posdesc = "Die Zeit verging im Fluge.";
            break;
        case "澳大利亚":
            posdesc = "一起去大堡礁吧！";
            break;
        case "加拿大":
            posdesc = "拾起一片枫叶赠予你";
            break;
        case "中国":
            pos = ipLocation.data.prov + " " + ipLocation.data.city + " " + ipLocation.data.district;
            switch (ipLocation.data.prov) {
                case "北京市":
                    posdesc = "北——京——欢迎你~~~";
                    break;
                case "天津市":
                    posdesc = "讲段相声吧";
                    break;
                case "河北省":
                    posdesc = "山势巍巍成壁垒，天下雄关铁马金戈由此向，无限江山";
                    break;
                case "山西省":
                    posdesc = "展开坐具长三尺，已占山河五百余";
                    break;
                case "内蒙古自治区":
                    posdesc = "天苍苍，野茫茫，风吹草低见牛羊";
                    break;
                case "辽宁省":
                    posdesc = "我想吃烤鸡架！";
                    break;
                case "吉林省":
                    posdesc = "状元阁就是东北烧烤之王";
                    break;
                case "黑龙江省":
                    posdesc = "很喜欢哈尔滨大剧院";
                    break;
                case "上海市":
                    posdesc = "众所周知，中国只有两个城市";
                    break;
                case "江苏省":
                    switch (ipLocation.data.city) {
                        case "南京市":
                            posdesc = "这是我挺想去的城市啦";
                            break;
                        case "苏州市":
                            posdesc = "上有天堂，下有苏杭";
                            break;
                        default:
                            posdesc = "散装是必须要散装的";
                            break;
                    }
                    break;
                case "浙江省":
                    switch (ipLocation.data.city) {
                        case "杭州市":
                            posdesc = "东风渐绿西湖柳，雁已还人未南归";
                            break;
                        default:
                            posdesc = "望海楼明照曙霞,护江堤白蹋晴沙";
                            break;
                    }
                    break;
                case "河南省":
                    switch (ipLocation.data.city) {
                        case "郑州市":
                            posdesc = "豫州之域，天地之中";
                            break;
                        case "信阳市":
                            posdesc = "品信阳毛尖，悟人间芳华";
                            break;
                        case "南阳市":
                            posdesc = "臣本布衣，躬耕于南阳此南阳非彼南阳！";
                            break;
                        case "驻马店市":
                            posdesc = "峰峰有奇石，石石挟仙气嵖岈山的花很美哦！";
                            break;
                        case "开封市":
                            posdesc = "刚正不阿包青天";
                            break;
                        case "洛阳市":
                            posdesc = "洛阳牡丹甲天下";
                            break;
                        default:
                            posdesc = "可否带我品尝河南烩面啦？";
                            break;
                    }
                    break;
                case "安徽省":
                    posdesc = "蚌埠住了，芜湖起飞";
                    break;
                case "福建省":
                    posdesc = "井邑白云间，岩城远带山";
                    break;
                case "江西省":
                    posdesc = "落霞与孤鹜齐飞，秋水共长天一色";
                    break;
                case "山东省":
                    posdesc = "遥望齐州九点烟，一泓海水杯中泻";
                    break;
                case "湖北省":
                    switch (ipLocation.data.city) {
                        case "黄冈市":
                            posdesc = "红安将军县！辈出将才！";
                            break;
                        case "武汉市":
                            posdesc = "你想去长江游泳嘛？";
                            break;
                        default:
                            posdesc = "来碗热干面~";
                            break;
                    }
                    break;
                case "湖南省":
                    posdesc = "74751，长沙斯塔克";
                    break;
                case "广东省":
                    switch (ipLocation.data.city) {
                        case "广州市":
                            posdesc = "看小蛮腰，喝早茶了嘛~";
                            break;
                        case "深圳市":
                            posdesc = "今天你逛商场了嘛~";
                            break;
                        case "阳江市":
                            posdesc = "阳春合水！博主家乡~ 欢迎来玩~";
                            break;
                        default:
                            posdesc = "来两斤福建人~";
                            break;
                    }
                    break;
                case "广西壮族自治区":
                    posdesc = "桂林山水甲天下";
                    break;
                case "海南省":
                    posdesc = "朝观日出逐白浪，夕看云起收霞光";
                    break;
                case "四川省":
                    posdesc = "康康川妹子";
                    break;
                case "贵州省":
                    posdesc = "茅台，学生，再塞200";
                    break;
                case "云南省":
                    posdesc = "玉龙飞舞云缠绕，万仞冰川直耸天";
                    break;
                case "西藏自治区":
                    posdesc = "躺在茫茫草原上，仰望蓝天";
                    break;
                case "陕西省":
                    posdesc = "来份臊子面加馍";
                    break;
                case "甘肃省":
                    posdesc = "羌笛何须怨杨柳，春风不度玉门关";
                    break;
                case "青海省":
                    posdesc = "牛肉干和老酸奶都好好吃";
                    break;
                case "宁夏回族自治区":
                    posdesc = "大漠孤烟直，长河落日圆";
                    break;
                case "新疆维吾尔自治区":
                    posdesc = "驼铃古道丝绸路，胡马犹闻唐汉风";
                    break;
                case "台湾省":
                    posdesc = "我在这头，大陆在那头";
                    break;
                case "香港特别行政区":
                    posdesc = "永定贼有残留地鬼嚎，迎击光非岁玉";
                    break;
                case "澳门特别行政区":
                    posdesc = "性感荷官，在线发牌";
                    break;
                default:
                    posdesc = "带我去你的城市逛逛吧！";
                    break;
            }
            break;
        default:
            posdesc = "带我去你的国家逛逛吧";
            break;
    }

    // 根据本地时间切换欢迎语
    let timeChange;
    let date = new Date();
    if (date.getHours() >= 5 && date.getHours() < 11) timeChange = "<span>🌤️ 早上好，快趁机多睡点懒觉！</span>";
    else if (date.getHours() >= 11 && date.getHours() < 13) timeChange = "<span>☀️ 中午好，记得午休喔~</span>";
    else if (date.getHours() >= 13 && date.getHours() < 17) timeChange = "<span>🕞 下午好，饮茶先啦！</span>";
    else if (date.getHours() >= 17 && date.getHours() < 19) timeChange = "<span>🚶‍♂️ 下班啦！主打一个不听老板话~</span>";
    else if (date.getHours() >= 19 && date.getHours() < 24) timeChange = "<span>🌙 晚上好，来一起熬夜吧呜😭</span>";
    else timeChange = "夜深了，早点休息，少熬夜";

    let welcomeInfoElement = document.getElementById("welcome-info");

    if (welcomeInfoElement) {
        welcomeInfoElement.innerHTML =
            `嗷嗷！热烈欢迎🤪！来自<br><b><span style="color: var(--default-bg-color)">${pos}</span></b><br> 的铁铁，你好呀！😝<br>${posdesc}🍂<br>你目前距博主约 <b><span style="color: var(--default-bg-color)">${dist}</span></b> 公里！<br>你的网络IP为：<b><span class="ip-address" style="font-size: 15px;">${ip}</span></b><br>${timeChange} <br>`;
    } else {
        console.log("Pjax无法获取元素");
    }
}

// 判断是否存在 "welcome-info" 元素
function isWelcomeInfoAvailable() {
    let welcomeInfoElement = document.getElementById("welcome-info");
    return welcomeInfoElement !== null;
}

// Pjax 完成后调用的处理函数
function handlePjaxComplete(ipLocation) {
    if (isWelcomeInfoAvailable()) {
        showWelcome(ipLocation);
    }
}

// 加载时调用
function onLoad() {
    fetchIpLocation().then(ipLocation => {
        if (isWelcomeInfoAvailable()) {
            showWelcome(ipLocation);
        }
        document.addEventListener("pjax:complete", () => handlePjaxComplete(ipLocation));
    });
}

// 绑定 window.onload 事件
window.onload = onLoad;

最后将自定义的js文件引入到配置文件即可

参考文章:

✅来自本站，本站可确保其安全性，请放心点击跳转
liushen的Butterfly魔改教程
效果展示

今日诗词(侧边栏)

效果预览

image-20260405110956142

教程开始

按照惯例,我们先实现插入html结构 ,新建pug文件如下:

1
[BlogRoot]\themes\butterfly\layout\includes\widget\card_poem.pug

写入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#card-poem.card-widget
    #poem_sentence
    #poem_info
        #poem_dynasty
        #poem_author
script(src='/js/jinrishici.js', charset='utf-8')
script(type='text/javascript').
  jinrishici.load(function(result) {
  var sentence = document.querySelector("#poem_sentence")
  var author = document.querySelector("#poem_author")
  var dynasty = document.querySelector("#poem_dynasty")

  var sentenceText = result.data.content
  sentenceText = sentenceText.substr(0, sentenceText.length - 1);
  sentence.innerHTML = sentenceText
  dynasty.innerHTML = result.data.origin.dynasty
  author.innerHTML = result.data.origin.author + '《' + result.data.origin.title + '》'
  });

结构实现了，下面将该结构插入到对应的位置，可以在当前目录下的index.pug找到对应结构，如下：

文件路径:

1
[BlogRoot]\themes\butterfly\layout\includes\widget\index.pug

在代码中插入以下带➕号的那行代码,注意缩进问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  else
    //- page
    !=partial('includes/widget/card_author', {}, {cache: true})
    !=partial('includes/widget/card_welcome', {}, {cache: true})
+    !=partial('includes/widget/card_poem', {}, {cache: true})
    !=partial('includes/widget/card_top_self', {}, {cache: true})

    .sticky_layout
      if showToc
        include ./card_post_toc.pug
      !=partial('includes/widget/card_recent_post', {}, {cache: true})
      !=partial('includes/widget/card_ad', {}, {cache: true})
      !=partial('includes/widget/card_newest_comment', {}, {cache: true})
      !=partial('includes/widget/card_categories', {}, {cache: true})
      !=partial('includes/widget/card_tags', {}, {cache: true})
      !=partial('includes/widget/card_archives', {}, {cache: true})
      !=partial('includes/widget/card_webinfo', {}, {cache: true})
      !=partial('includes/widget/card_bottom_self', {}, {cache: true})

结构实现了，还需要实现其样式，新建以下文件：

1
[BlogRoot]\themes\butterfly\source\css\_layout\card-jinrishici.styl

写入以下内容

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
/* 古诗词卡片 */
#card-poem
    display: flex
    flex-direction: column
    padding: 0.5rem !important

div#poem_sentence
    text-align: center
    font-family: serif, cursive
    line-height: 1.4
    margin-bottom: 0.5rem
    padding: 1rem
    border-radius: 8px
    background: var(--liushen-card-bg)
    min-height: 62px

div#poem_info
    display: flex
    color: var(--liushen-secondtext)
    font-size: 0.5rem
    justify-content: center
    flex-wrap: wrap

div#poem_author
    order: 1
    padding: 2px
    margin-left: 8px

div#poem_dynasty
    order: 0
    padding: 2px 4px 2px 6px
    background: var(--liushen-button-bg)
    color: var(--liushen-text)
    border-radius: 8px

最后引入js 新建文件

1
[BlogRoot]\themes\butterfly\source\js\jinrishici.js

复制以下代码

1
2
!function(e){var n,t={},o="jinrishici-token";function i(){return document.getElementById("jinrishici-sentence")||0!=document.getElementsByClassName("jinrishici-sentence").length}function c(){t.load(function(e){var n=document.getElementById("jinrishici-sentence"),t=document.getElementsByClassName("jinrishici-sentence");if(n&&(n.innerText=e.data.content),0!==t.length)for(var o=0;o<t.length;o++)t[o].innerText=e.data.content})}function r(e,n){var t=new XMLHttpRequest;t.open("get",n),t.withCredentials=!0,t.send(),t.onreadystatechange=function(n){if(4===t.readyState){var o=JSON.parse(t.responseText);"success"===o.status?e(o):console.error("今日诗词API加载失败，错误原因："+o.errMessage)}}}t.load=function(n){return e.localStorage&&e.localStorage.getItem(o)?function(e,n){return r(e,"https://v2.jinrishici.com/one.json?client=browser-sdk/1.2&X-User-Token="+encodeURIComponent(n))}(n,e.localStorage.getItem(o)):function(n){return r(function(t){e.localStorage.setItem(o,t.token),n(t)},"https://v2.jinrishici.com/one.json?client=browser-sdk/1.2")}(n)},e.jinrishici=t,i()?c():(n=function(){i()&&c()},"loading"!=document.readyState?n():document.addEventListener?document.addEventListener("DOMContentLoaded",n):document.attachEvent("onreadystatechange",function(){"complete"==document.readyState&&n()}))}(window);

参考文章:

✅来自本站，本站可确保其安全性，请放心点击跳转
liushen的Butterfly魔改教程
效果展示

赞赏侧边栏

效果:

image-20260405120330764

​

教程开始

1、赞赏数据

展示赞赏者的前提是，得有赞赏数据，所以我们先来构建该数据，创建文件[BlogRoot]/source/_data/rewards.yml，写入以下格式的内容：

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
donate:
  # 支付宝收款码
  alipay:
    name: 支付宝收款码
    image: /config/img/alipay.png
  # 微信收款码
  wechat:
    name: 微信收款码
    image: /config/img/wechat.png
  thank_img: https://p.liiiu.cn/i/2025/10/10/68e9199157351.webp
  # 赞赏页面链接
  page_url: /rewards/
  # 赞赏者列表
  list:
    - name: 银河香港
      avatar: https://p.liiiu.cn/i/2025/02/26/67bec7d0eb734.webp
      website: 
      date: 2025-03-15
      amount: ¥100.00
      description: 你我皆是生活银河中的闪耀星辰
    - name: 周润发
      avatar: https://p.liiiu.cn/i/2025/03/20/67dbe8c6a6221.webp
      website: https://blog.zrf.me
      date: 2025-08-01
      amount: ¥30.00
      description: 收录开源，好用的互联网项目~
    - name: SXY
      avatar: https://p.liiiu.cn/i/2025/10/11/68e93a9ccee45.webp
      website: 
      date: 2025-08-29
      amount: ¥10.00
      description: 地球与物理专业的大三学生
    - name: Ljx
      avatar: https://p.liiiu.cn/i/2025/10/09/68e7d8ed2a70b.webp
      website: https://blog.ljx.icu/
      date: 2025-10-09
      amount: ¥8.88
      description: 一个无聊无趣的人~
    - name: AirTouch
      avatar: https://p.liiiu.cn/i/2025/07/18/687a369fc3610.webp
      website: https://www.xsl.im/
      date: 2025-10-10
      amount: ¥18.88
      description: 岩间琉璃云间月
    - name: 短巷与雨
      avatar: https://p.liiiu.cn/i/2024/11/18/673ac90233753.webp
      website: https://space.xsl.im/
      date: 2025-10-12
      amount: ¥28.88
      description: 为学日益，为道日损。
    - name: 老罗博客
      avatar: https://p.liiiu.cn/i/2025/06/01/683bc6062b113.webp
      website: https://www.luosir.cn
      date: 2025-10-12
      amount: ¥8.88
      description: 人生就是折腾
    - name: 温柔鱼
      avatar: https://p.liiiu.cn/i/2025/10/08/68e5e1f17ed12.webp
      website: https://blog.vrou.cn
      date: 2025-10-17
      amount: ¥8.88
      description: "NULL"
    - name: 不知名朋友
      avatar: https://p.liiiu.cn/i/2025/10/11/68e93a9ccee45.webp
      website: 
      date: 2025-10-19
      amount: ¥2.00
      description: 感谢朋友的赞助~

其中列表的时间顺序建议上面最早，下面最新，因为我懒得写排序了嘻嘻，所以直接倒序，方便实用（反正每次添加都是往文件底部添加啦）。

有了数据,我们就开始添加到页面上吧

按照惯例,我们先实现插入html结构 ,新建pug文件如下:

1
[BlogRoot]\themes\butterfly\layout\includes\widget\card_rewards.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
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
.card-widget.card-reward
  .item-headline
    .headline-content
      i.fa-solid.fa-person-praying
      span 能量榜
    .show-more-inline
      - var pageUrl = site.data.rewards.donate.page_url || '/reward/'
      a(href=url_for(pageUrl) class="btn-show-more-inline")
        span 前往赞赏
  .item-content
    if site.data.rewards && site.data.rewards.donate && site.data.rewards.donate.list.length > 0
      - var allSponsors = site.data.rewards.donate.list.slice()
      - allSponsors.sort(function() { return Math.random() - 0.5 })
      - var carouselSponsors = allSponsors.slice(0, 40)
      - var listSponsors = allSponsors.slice(0, 20)
      
      if carouselSponsors.length > 0
        .top-sponsor-carousel
          .carousel-container
            .carousel-item
              a.sponsor-link-card(target="_blank" rel="nofollow noopener")
                .sponsor-avatar
                  img.sponsor-avatar-img(src=url_for(carouselSponsors[0].avatar) alt=carouselSponsors[0].name onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
                .sponsor-info
                  .sponsor-name= carouselSponsors[0].name
                  .sponsor-desc= carouselSponsors[0].description
        
        if listSponsors.length > 1
          .sponsors-list
            each sponsor in listSponsors
              if sponsor.website
                a.sponsor-item(href=sponsor.website target="_blank" rel="nofollow noopener")
                  .sponsor-small-name= sponsor.name
              else
                .sponsor-item
                  .sponsor-small-name= sponsor.name

            if allSponsors.length > 20
              - var pageUrl = site.data.rewards.donate.page_url || '/reward/'
              a.sponsor-item.more-sponsor(href=url_for(pageUrl) target="_blank" rel="nofollow noopener")
                .sponsor-small-name
                  |  查看更多
                  i.fa-solid.fa-angles-right
          
          .sponsors-note
            p 你们的赞赏是我最大的动力
            p ※ 此处数据随机显示
        
        script.
          if (!window.sponsorsData) {
            window.sponsorsData = !{JSON.stringify(carouselSponsors)};
          }
          
          function initRewardCarousel() {
            const container = document.querySelector('.carousel-container');
            const link = container.querySelector('.sponsor-link-card');
            const avatar = container.querySelector('.sponsor-avatar-img');
            const name = container.querySelector('.sponsor-name');
            const desc = container.querySelector('.sponsor-desc');
            
            if (!container || sponsorsData.length === 0) return;
            
            let currentIndex = 0;
            let intervalId = null;
            let isTransitioning = false;
            
            function updateSponsorInfo(sponsor) {
              if (sponsor.website) {
                link.href = sponsor.website;
                // 确保有链接时移除 pointer-events 样式
                link.style.pointerEvents = '';
                link.style.cursor = 'pointer';
              } else {
                link.removeAttribute('href');
                // 只有在没有链接时才添加 pointer-events: none
                link.style.pointerEvents = 'none';
                link.style.cursor = 'default';
              }
              
              avatar.src = sponsor.avatar;
              avatar.alt = sponsor.name;
              
              name.textContent = sponsor.name;
              desc.textContent = sponsor.description;
            }
            
            function showSponsor(index) {
              if (index < 0 || index >= sponsorsData.length || isTransitioning) return;
              
              isTransitioning = true;
              const sponsor = sponsorsData[index];
              
              container.style.opacity = '0';
              
              setTimeout(() => {
                updateSponsorInfo(sponsor);
                container.style.opacity = '1';
                currentIndex = index;
                
                setTimeout(() => {
                  isTransitioning = false;
                }, 300);
              }, 300);
            }
            
            function nextSponsor() {
              const nextIndex = (currentIndex + 1) % sponsorsData.length;
              showSponsor(nextIndex);
            }
            
            function startAutoPlay() {
              if (intervalId) clearInterval(intervalId);
              intervalId = setInterval(nextSponsor, 3000);
            }
            
            function stopAutoPlay() {
              if (intervalId) {
                clearInterval(intervalId);
                intervalId = null;
              }
            }
            
            const carousel = document.querySelector('.top-sponsor-carousel');
            if (carousel) {
              carousel.addEventListener('mouseenter', stopAutoPlay);
              carousel.addEventListener('mouseleave', startAutoPlay);
            }
            
            container.style.transition = 'opacity 0.3s ease-in-out';
            
            // 初始化第一个赞助者信息
            updateSponsorInfo(sponsorsData[0]);
            
            startAutoPlay();
            
            return {
              showSponsor,
              nextSponsor,
              startAutoPlay,
              stopAutoPlay
            };
          }
          initRewardCarousel();
          //- document.addEventListener("pjax:complete", function() {
          //-   initRewardCarousel();
          //- });
      else
        .no-sponsors
          p 暂无赞助者，成为第一个支持本站的朋友吧！
    else
      .no-sponsors
        p 暂无赞助者数据

结构实现了，下面将该结构插入到对应的位置，可以在当前目录下的index.pug找到对应结构，如下

文件路径: 

1
[BlogRoot]\themes\butterfly\layout\includes\widget\index.pug

在代码中插入以下带➕号的那行代码,注意缩进问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  else
    //- page
    !=partial('includes/widget/card_author', {}, {cache: true})
    !=partial('includes/widget/card_welcome', {}, {cache: true})
    !=partial('includes/widget/card_poem', {}, {cache: true})
+    !=partial('includes/widget/card_rewards', {}, {cache: true})
    !=partial('includes/widget/card_top_self', {}, {cache: true})

    .sticky_layout
      if showToc
        include ./card_post_toc.pug
      !=partial('includes/widget/card_recent_post', {}, {cache: true})
      !=partial('includes/widget/card_ad', {}, {cache: true})
      !=partial('includes/widget/card_newest_comment', {}, {cache: true})
      !=partial('includes/widget/card_categories', {}, {cache: true})
      !=partial('includes/widget/card_tags', {}, {cache: true})
      !=partial('includes/widget/card_archives', {}, {cache: true})
      !=partial('includes/widget/card_webinfo', {}, {cache: true})
      !=partial('includes/widget/card_bottom_self', {}, {cache: true})

引入css样式,新建文件

1
[blogRoot]/source/css/card_rewards.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
donate:
  # 支付宝收款码
  alipay:
    name: 支付宝收款码
    image: /config/img/alipay.png
  # 微信收款码
  wechat:
    name: 微信收款码
    image: /config/img/wechat.png
  thank_img: https://p.liiiu.cn/i/2025/10/10/68e9199157351.webp
  # 赞赏页面链接
  page_url: /rewards/
  # 赞赏者列表
  list:
    - name: 银河香港
      avatar: https://p.liiiu.cn/i/2025/02/26/67bec7d0eb734.webp
      website: 
      date: 2025-03-15
      amount: ¥100.00
      description: 你我皆是生活银河中的闪耀星辰
    - name: 周润发
      avatar: https://p.liiiu.cn/i/2025/03/20/67dbe8c6a6221.webp
      website: https://blog.zrf.me
      date: 2025-08-01
      amount: ¥30.00
      description: 收录开源，好用的互联网项目~
    - name: SXY
      avatar: https://p.liiiu.cn/i/2025/10/11/68e93a9ccee45.webp
      website: 
      date: 2025-08-29
      amount: ¥10.00
      description: 地球与物理专业的大三学生
    - name: Ljx
      avatar: https://p.liiiu.cn/i/2025/10/09/68e7d8ed2a70b.webp
      website: https://blog.ljx.icu/
      date: 2025-10-09
      amount: ¥8.88
      description: 一个无聊无趣的人~
    - name: AirTouch
      avatar: https://p.liiiu.cn/i/2025/07/18/687a369fc3610.webp
      website: https://www.xsl.im/
      date: 2025-10-10
      amount: ¥18.88
      description: 岩间琉璃云间月
    - name: 短巷与雨
      avatar: https://p.liiiu.cn/i/2024/11/18/673ac90233753.webp
      website: https://space.xsl.im/
      date: 2025-10-12
      amount: ¥28.88
      description: 为学日益，为道日损。
    - name: 老罗博客
      avatar: https://p.liiiu.cn/i/2025/06/01/683bc6062b113.webp
      website: https://www.luosir.cn
      date: 2025-10-12
      amount: ¥8.88
      description: 人生就是折腾
    - name: 温柔鱼
      avatar: https://p.liiiu.cn/i/2025/10/08/68e5e1f17ed12.webp
      website: https://blog.vrou.cn
      date: 2025-10-17
      amount: ¥8.88
      description: "NULL"
    - name: 不知名朋友
      avatar: https://p.liiiu.cn/i/2025/10/11/68e93a9ccee45.webp
      website: 
      date: 2025-10-19
      amount: ¥2.00
      description: 感谢朋友的赞助~

注意:

* 在配置文件里面也要进行引入改自定义文件

最后实现hexo三件套 则就有最终效果了

赞赏页面

如果不出所料，侧边栏应该实现了，下面实现赞赏页面，由于不涉及Javascript，所以实现起来可简单多了，还是一样，首先添加Pug页面结构文件，创建[blogRoot]\themes\butterfly\layout\includes\page\rewards.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
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
#article-container
  if top_img === false
    h1.page-title= page.title
  
  .reward-page
    // 感谢图片
    .thank-image
      img.no-lightbox(
        src=site.data.rewards.donate.thank_img 
        alt="感谢" 
        onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post) + `'`
      )
    
    // 收款码区域
    .payment-codes
      .payment-item.alipay
        .payment-content
          .payment-image
            img(src=site.data.rewards.donate.alipay.image alt=site.data.rewards.donate.alipay.name)
          .payment-info
            .payment-name= site.data.rewards.donate.alipay.name
            //- .payment-desc 支付宝扫一扫
      .payment-item.wechat
        .payment-content
          .payment-image
            img(src=site.data.rewards.donate.wechat.image alt=site.data.rewards.donate.wechat.name)
          .payment-info
            .payment-name= site.data.rewards.donate.wechat.name
            //- .payment-desc 微信扫一扫
    
    // 赞赏者列表
    .sponsors-list
      .sponsors-header
        .sponsors-description
          p 你的每一份支持都是对我的莫大鼓励
      
      .sponsors-container
        if site.data.rewards && site.data.rewards.donate && site.data.rewards.donate.list.length > 0
          // 反转列表，因为最新的在最后
          - var sortedSponsors = site.data.rewards.donate.list.slice().reverse()
          
          // 计算统计数据
          - var totalCount = sortedSponsors.length
          - var totalAmount = 0
          - sortedSponsors.forEach(function(sponsor) {
          -   var amount = parseFloat(String(sponsor.amount).replace('¥', ''));
          -   if (!isNaN(amount)) {
          -     totalAmount += amount;
          -   }
          - })
          
          each sponsor, index in sortedSponsors
            .sponsor-item
              if sponsor.website
                a.sponsor-card(href=sponsor.website target="_blank" rel="noopener noreferrer" style="text-decoration: none;")
                  .background-img(
                    style=`background-image:url(${sponsor.avatar});background-repeat:no-repeat;background-size:cover;background-position:right;mask-image:linear-gradient(to left, transparent, black);-webkit-mask-image:linear-gradient(to left, transparent, black);`
                    onerror=`this.onerror=null;this.style.backgroundImage='url("` + url_for(theme.error_img.post_page) + `")'`
                  )
                  .sponsor-card-left
                    .sponsor-avatar-title
                      img.no-lightbox(
                        src=sponsor.avatar 
                        alt='' 
                        onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'`
                      )
                      .sponsor-name= sponsor.name
                    .sponsor-desc= sponsor.description
                  .sponsor-card-right
                    .sponsor-amount= sponsor.amount
                    .sponsor-date= sponsor.date ? String(sponsor.date).slice(0, 10) : ''
              else
                .sponsor-card(style="pointer-events: none; cursor: default;")
                  .background-img(
                    style=`background-image:url(${sponsor.avatar});background-repeat:no-repeat;background-size:cover;background-position:right;mask-image:linear-gradient(to left, transparent, black);-webkit-mask-image:linear-gradient(to left, transparent, black);`
                    onerror=`this.onerror=null;this.style.backgroundImage='url("` + url_for(theme.error_img.post_page) + `")'`
                  )
                  .sponsor-card-left
                    .sponsor-avatar-title
                        img.no-lightbox(
                          src=sponsor.avatar 
                          alt=''
                          onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'`
                        )
                        .sponsor-name= sponsor.name
                    .sponsor-desc= sponsor.description
                  .sponsor-card-right
                    .sponsor-amount= sponsor.amount
                    .sponsor-date= sponsor.date ? String(sponsor.date).slice(0, 10) : ''
          
        else
          .no-sponsors
            p 暂无赞赏者数据

      // 统计信息
      .statistics
        .total-count 共计 
          span.stat-number= totalCount
          |  笔打款
        .total-amount 累计金额 
          span.stat-number ¥#{totalAmount.toFixed(2)}

  != page.content

然后修改[blogRoot]\themes\butterfly\layout\page.pug文件，添加上Rewards页面的布局：(➕号的代码,注意格式)

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
extends includes/layout.pug

block content
  - const noCardLayout = ['shuoshuo', '404'].includes(page.type) ? 'nc' : ''
  - var commentsJsLoad = false 

  mixin commentLoad
    if page.comments !== false && theme.comments.use
      - commentsJsLoad = true
      !=partial('includes/third-party/comments/index', {}, {cache: true})

  #page(class=noCardLayout)
    if top_img === false && page.title
      page-title= page.title

    case page.type
      when 'tags'
        include includes/page/tags.pug
        +commentLoad
      when 'link'
        include includes/page/flink.pug
        +commentLoad
+    when 'rewards'
+      include includes/page/rewards.pug
+      +commentLoad
      when 'categories'
        include includes/page/categories.pug
        +commentLoad
      when 'devices'
        include includes/page/devices.pug
      when 'shuoshuo'
        include includes/page/shuoshuo.pug
      when 'about'
        include includes/page/about.pug
      when '404'
        include includes/page/404.pug
      default
        include includes/page/default-page.pug
        +commentLoad

删掉加号后自行注意缩进，这里缩进应该挺明显的吧，所以就不多说啦。

页面结构添加完成，下面实现样式，创建文件[blogRoot]\themes\butterfly\source\css\_page\rewards.styl，写入以下内容：

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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
#article-container
  .reward-page
    // 感谢图片
    .thank-image
      text-align: center
      img
        box-shadow: none
        height: 200px
      .img-alt
        display: none

    // 收款码区域
    .payment-codes
      display: flex
      justify-content: center
      gap: 40px
      margin: 30px 0
      flex-wrap: wrap

      @media screen and (max-width: 768px)
        gap: 20px

      .payment-item
        text-align: center
        transition: transform 0.3s ease

        &:hover
          transform: translateY(-5px)

        .payment-content
          display: flex
          flex-direction: column
          align-items: center
          gap: 15px

        .payment-image
          width: 250px
          height: 250px
          border-radius: 15px
          overflow: hidden
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1)

          @media screen and (max-width: 768px)
            width: 150px
            height: 150px

          img
            width: 100%
            height: 100%
            object-fit: cover

        .payment-info
          .payment-name
            font-size: 16px
            color: var(--liushen-text)
            font-weight: 600
            margin-bottom: 5px

    // 赞赏者列表
    .sponsors-list
      margin-bottom: 30px

      // 头部区域
      .sponsors-header
        display: flex
        flex-direction: row-reverse

        .sponsors-description
          p
            font-size: 16px
            color: var(--liushen-secondtext)
            font-style: italic

      .sponsors-container
        display: flex
        flex-wrap: wrap
        justify-content: flex-start
        margin: -8px // 抵消子元素的 margin

        .sponsor-item
          margin: 8px // 统一的 margin
          // 默认宽度 (1列)
          width: "calc(100% - %s)" % (8px * 2)

          // 800px 及以上 (2列)
          @media screen and (min-width: 800px)
            width: "calc(100% / 2 - %s)" % (8px * 2)

          // 1200px 及以上 (3列)
          @media screen and (min-width: 1200px)
            width: "calc(100% / 3 - %s)" % (8px * 2)

          background-color: var(--liushen-card-bg)
          border: var(--liushen-card-border)
          border-radius: 12px
          transition: all 0.3s ease
          overflow: hidden

          &:hover
            transform: translateY(-2px)
            .background-img
              opacity: 0.5
              transform: translateX(-50%) translateY(-50%) scale(1.3) !important

            .sponsor-avatar-title
                opacity: 0 !important
            .sponsor-desc
                opacity: 1 !important


          .sponsor-card
            display: flex
            justify-content: space-between
            height: 52px
            width: 100%
            align-items: center
            padding: 10px
            transition: all 0.3s ease
            position: relative

            .background-img
              position: absolute
              transform: translateX(-50%) translateY(-50%)
              width: 400px
              height: 400px
              border-radius: 50%
              transition: all 0.3s ease
              opacity: 0.7
              z-index: 0
              top: 50%
              left: 10px

            .sponsor-card-left
              display: flex
              z-index: 1
              align-items: center
              gap: 15px
              flex: 1
              min-width: 0

              .sponsor-avatar-title
                display: flex
                height: 100%
                align-items: center
                gap: 10px
                opacity: 1
                transition: all 0.3s ease

                img
                  width: 20px
                  margin: 0
                  height: 20px
                  border-radius: 50%
                  object-fit: cover

                .sponsor-name
                  font-size: 16px
                  font-weight: 600
                  color: var(--liushen-text)
                  transition: all 0.3s ease
                  white-space: nowrap
                  overflow: hidden
                  text-overflow: ellipsis

              .sponsor-desc
                position: absolute
                transform: translateY(-50%)
                z-index: 1
                left: 20px
                top: 50%
                font-size: 16px
                font-weight: 600
                color: var(--liushen-text)
                opacity: 0
                transition: all 0.3s ease
                white-space: nowrap
                overflow: hidden
                text-overflow: ellipsis
                max-width: calc(100% - 180px)

            .sponsor-card-right
              text-align: right
              display: flex
              gap:10px

              .sponsor-amount
                font-size: 16px
                font-weight: 600
                line-height: 1
                color: var(--default-bg-color)

              .sponsor-date
                font-size: 16px
                line-height: 1
                color: var(--liushen-secondtext)

                .sponsor-card:hover &
                  color: rgba(255, 255, 255, 0.8)

      .statistics
        display: flex
        flex-direction: column
        gap: 5px
        font-size: 16px
        color: var(--liushen-text)
        margin-top: 20px
        .stat-number
          font-weight: 600
          color: var(--default-bg-color)

    // 无数据提示
    .no-sponsors
      text-align: center
      padding: 50px
      color: var(--liushen-secondtext)

      p
        font-size: 16px
        margin: 0

// 定义渐入动画
@keyframes fadeInUp
  from
    opacity: 0
    transform: translateY(20px)
  to
    opacity: 1
    transform: translateY(0)

页面渲染结构，页面样式均写完了，我们如何定位该页面的位置呢？在[blogRoot]/source创建Rewards文件夹，内部创建index.md文件，写入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: 感谢赞助，每一份都是对我莫大的支持
date: 2018-06-07 22:17:49
type: "rewards"
aside: false

---


感谢每一份慷慨的赞赏，它不仅是支持，更是我前行路上温暖的光。这份心意我已悉心珍藏，会化作动力，努力为大家创造更多价值💗

**【温馨提示】** 如果您在赞赏时，能留下备注或在下方评论区说一声，就能方便我将这份心意与您对应上，为您记录在专属的感谢名单里。期待与您相遇！

注意添加顶部的type: "rewards"，这一句是关键！

再次渲染，访问对应目录，应该就可以看见啦，教程完结！

参考文章

✅来自本站，本站可确保其安全性，请放心点击跳转
liushen的Butterfly魔改教程
效果展示

butterfly主页瀑布流双栏调整记录

前言

心血来潮，突然想把主页文章卡片改双栏瀑布流，根据官方文档教程，只需要把配置文件中的index_layout: 1改为index_layout: 6即可，但是在我27英寸显示器中成了三栏，更是当文章标题过长时会导致卡片错位情况，这种错位样式在三栏中个人觉得难以欣赏。

问题解决

瀑布流布局（index_layout: 6 或 7）的列数是通过 .recent-post-item 的宽度计算控制的。默认配置在超宽屏幕（≥2000px）会显示 3 列。具体的样式在[BlogRoot]\themes\butterfly\source\css\_page\homepage.styl中调整，添加以下+号代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#recent-posts
  .recent-post-item
    @extend .cardHover
    position: relative
    overflow: hidden
    margin-bottom: 20px

    if $indexLayout == 6 || ($indexLayout == 7)
      display: inline-block
      width: calc(100% / 2 - 8px)
      vertical-align: top

      +maxWidth768()
        width: 100%

      +minWidth2000()
        width: calc(100% / 3 - 8px)
+        width: calc(100% / 2 - 8px)

    if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))

注意 : 加上➕号那行代码说明超大屏幕时候也显示两列,如果后续想显示三列则把➕号代码注释或者删掉即可

]]> http://example.com/posts/f03592a8.html 2026-04-04T07:16:16.205Z 个人卡片背景图

1、在自建的css样式中加入一下代码

docker安装包下载:https://download.docker.com/linux/static/stable/aarch64/
测试
测试123
🪧引用站外地址，不保证站点的可用性和安全性
Hexo的Butterfly魔改教程
张洪He0 · 分享设计与科技生活

]]> http://example.com/posts/0.html 2026-03-31T15:16:24.844Z docker安装包下载:https://download.docker.com/linux/static/stable/aarch64/ 计算机操作系统 2026-04-05T14:27:33.769Z moh MyBatis-Plus 自动分页（三步核心笔记）

步骤一: service层必须创建Page

1
2
3
4
public Page<SesStuEval> listPage(int currentPage ,int pageSize,SesStuEvalPageParam param) {
    Page<SesStuEval> page = new Page<>(pcurrentPage, pageSize);
    return sesStuEvalMapper.listPage(page, param);
}

✅ 核心要点：

  • 必须通过new Page<>(current,size)创建分页对象
  • currentPage:当前页码(从1开始)
  • pageSize:每页数据条数
  • Ser’vice层服务初始化分页参数

步骤二:Mapper 必须接受Page

1
2
3
4
Page<SesStuEval> listContainTopicPage(
    @Param("page") Page<SesStuEval> page,
    @Param("param") SesStuEvalPageParam param
);

✅ 核心要点：

  • 方法第一个参数必须是 Page<T>类型
  • 返回值类型也必须是 Page<T>
  • 建议通过 @Param明确指定参数名称
  • Page 对象会”透传”到 SQL 层

步骤三:XML 只写普通 SQL（不写分页）

1
2
3
4
5
6
7
8
9
10
<select id="listContainTopicPage" resultType="com.xxx.SesStuEval">
    SELECT *
    FROM ses_stu_eval
    <where>
        <if test="param.xxx != null">
            AND xxx = #{param.xxx}
        </if>
    </where>
    ORDER BY create_time DESC
</select>

✅ 核心要点：

  • 严禁在 SQL 中写 LIMIT分页
  • 严禁手动拼接分页逻辑
  • 只需编写正常的业务查询语句
  • MyBatis-Plus 会自动在运行时添加分页条件

三大核心原则（必记）

Service 必须传 Page

1
2
3
4
5
6
7
//  正确
Page<SesStuEval> page = new Page<>(param.getCurrent(), param.getSize());

// 错误
// 1. 不创建 Page
// 2. 创建 Page 但不传分页参数
// 3. 传了 Page 但页码/条数不正确

Mapper 必须带 Page

1
2
3
4
5
6
7
// 正确
Page<SesStuEval> method(Page<SesStuEval> page, @Param("param") Object param);

// 错误
// 1. 参数中没有 Page
// 2. Page 参数不在第一位
// 3. 返回值类型是 List 而不是 Page

XML 不写 LIMIT

1
2
3
4
5
6
7
-- 正确写法
SELECT * FROM table WHERE condition ORDER BY create_time;

-- 错误写法
SELECT * FROM table WHERE condition 
ORDER BY create_time
LIMIT 0, 10;  -- 禁止手动分页

【哲风壁纸】夜景-富士山

]]> http://example.com/posts/1b62eb9e.html 2026-03-30T14:35:11.588Z MyBatis-Plu]]> mybatis-plus自动分页 2026-04-05T14:21:38.406Z moh

在snowy框架中新增一个自定义模块(或插件),需要遵循清晰的多模块项目管理规范,其核心思想是通过模块化分离,实现功能插件的独立开发、统一管理与集成.

一、项目结构与模块划分原则

snowy的插件体系采用“接口-实现”分离的架构

1、插件接口处(snowy-plugin-api/): 存放模块的API定义、DTO、枚举、常量等公共内容。此模块的职责是定义契约，不包含具体实现，可供其他模块依赖以调用接口。

2、插件实现从(snowy-plugin/):存放模块的业务逻辑、控制器、服务实现、Mapper、资源配置等具体实现代码。

3、主启动模块(snowy—plugin-app):作为最终的应用入口，负责集成和启动所有功能插件。

二、新增自定义模块“A”的详细步骤

假设新增的模块名为 a。

步骤1: 创建插件接口模块

  1. 在 snowy-plugin-api目录下，创建模块 snowy-plugin-a-api

  2. 编辑 snowy-plugin-a-api的 pom.xml，必须引入公共核心模块 snowy-common，以确保能使用框架的基础设施。

    1
    2
    3
    4
    5
    <!-- 位于 snowy-plugin-a-api/pom.xml -->
    <dependency>
        <groupId>vip.xiaonuo</groupId>
        <artifactId>snowy-common</artifactId>
    </dependency>

  3. 在 snowy-plugin-api目录的父级 pom.xml中，声明此子模块，以将其纳入统一构建。

    1
    2
    <!-- 位于 snowy-plugin-api/pom.xml 的 modules 部分 -->
    <module>snowy-plugin-a-api</module>

步骤2:创建插件实现模块

  1. 在 snowy-plugin目录下，创建模块 snowy-plugin-a

  2. 编辑 snowy-plugin-a的 pom.xml，必须引入步骤1创建的自身API模块 snowy-plugin-a-api，以实现对接口定义的依赖 

    1
    2
    3
    4
    5
    6
    <!-- 位于 snowy-plugin-a/pom.xml -->
    <dependency>
        <groupId>vip.xiaonuo</groupId>
        <artifactId>snowy-plugin-a-api</artifactId>
        <version>${project.parent.version}</version>
    </dependency>

  3. 在 snowy-plugin目录的父级 pom.xml中，声明此子模块.

    1
    2
    <!-- 位于 snowy-plugin/pom.xml 的 modules 部分 -->
    <module>snowy-plugin-a</module>

步骤3:在主启动模块中集成插件

1、编辑主应用模块 snowy-web-app的 pom.xml，引入插件的实现模块 snowy-plugin-a。这是插件功能被实际加载到运行中的应用的关键步骤。

1
2
3
4
5
6
<!-- 位于 snowy-web-app/pom.xml -->
<dependency>
    <groupId>vip.xiaonuo</groupId>
    <artifactId>snowy-plugin-a</artifactId>
    <version>${project.parent.version}</version>
</dependency>

步骤4:在项目根POM中进行总声明（关键且易遗漏步骤）

1、编辑项目最顶层的根目录下的 pom.xml文件。

2、在 <modules>部分，添加新增的两个模块，确保它们能被Maven顶级构建正确识别和编译。

1
2
3
4
5
6
7
8
9
10
<dependency>
             <groupId>vip.xiaonuo</groupId>
             <artifactId>snowy-plugin-a</artifactId>
             <version>${snowy.version}</version>
         </dependency>
         <dependency>
             <groupId>vip.xiaonuo</groupId>
             <artifactId>snowy-plugin-a-api</artifactId>
             <version>${snowy.version}</version>
         </dependency>
]]> http://example.com/posts/6a434e1d.html 2026-03-30T14:00:10.410Z

在snowy框架中新增一个自定义模块(或插件),需要遵循清晰的多模块项目管理规范,其核心思想是通过模块化分离,实现功能插件的独立开发、统一管理与集成.

 在snowy框架中新增自定义模块 2026-04-05T14:21:38.390Z moh ssh

ssh是应用于远程连接服务器的一种协议

基本用法

远程登录服务器命令

1
ssh user@hostname

user: 用户名

hostname: IP地址或者域名

第一登录是会出现以下提示

1
2
3
The authenticity of host '123.57.47.211 (123.57.47.211)' can't be established.
ECDSA key fingerprint is SHA256:iy237yysfCe013/l+kpDGfEG9xxHxm0dnxnAbJTPpG8.
Are you sure you want to continue connecting (yes/no/[fingerprint])?

输入yes,然后回车即可.

这样会将该服务器的信息记录在~/.ssh/known_hosts文件中。

然后输入密码即可登录到远程服务器中。

指定端口登录

默认登录端口号为22。如果想登录某一特定端口：

1
ssh user@hostname -p 端口号

配置文件

创建文件 ~/.ssh/config

在文件中输入:

1
2
3
4
5
6
7
Host myserver1
    HostName IP地址或域名
    User 用户名
x
Host myserver2
    HostName IP地址或域名
    User 用户名

之后再使用服务器时，可以直接使用别名myserver1、myserver2。

如 ssh myserver1

密钥登录

进入文件 ~/.ssh

创建密钥:

1
ssh-keygen

然后一直回车即可。

执行结束后，~/.ssh/目录下会多两个文件：

​ 1、id_rsa：私钥

​ 2、id_rsa.pub：公钥

之后想免密码登录哪个服务器，就将公钥传给哪个服务器即可。

例如，想免密登录myserver服务器。则将公钥中的内容，复制到myserver中的~/.ssh/authorized_keys文件里即可。

也可以使用如下命令一键添加公钥：

1
ssh-copy-id myserver
]]> http://example.com/posts/f5f30b62.html 2026-03-29T14:47:33.000Z ssh

ssh是应用于远程连接服务器的一种协议

docker和docker-commpose离线安装

背景说明: 本文部署的服务器是 arm架构的

1、安装包下载

docker安装包下载:https://download.docker.com/linux/static/stable/aarch64/

image-20260328234556237

docker-compose安装包下载: https://github.com/docker/compose/releases

image-20260328234616336

2、解压docker安装包

1
tar -xvf docker-25.0.2.tgz

3、解压后会中当前目前下有一个叫docker的文件目录,将该文件夹下的文件拷贝到 */user/bin* 下面

1
cp docker/* /usr/bin/

4、将docker注册为系统服务

创建文件 /etc/systemd/system/docker.service,并添加以下内容

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
[Unit]
Description=Docker Application Container Engine
Documentation=https://docs.docker.com
After=network-online.target firewalld.serviceWants=network-online.target
[Service]
Type=notify
# the default is not to use systemd for cgroups because the delegate issues still
# exists and systemd currently does not support the cgroup feature set required
# for containers run by docker
ExecStart=/usr/bin/dockerd
ExecReload=/bin/kill -s HUP $MAINPID
# Having non-zero Limit*s causes performance problems due to accounting overhead
# in the kernel. We recommend using cgroups to do container-local accounting.
LimitNOFILE=infinity
LimitNPROC=infinity
LimitCORE=infinity
# Uncomment TasksMax if your systemd version supports it.
# Only systemd 226 and above support this version.
#TasksMax=infinity
TimeoutStartSec=0
# set delegate yes so that systemd does not reset the cgroups of docker containers
Delegate=yes
# kill only the docker process, not all processes in the cgroup
KillMode=process
# restart the docker process if it exits prematurely
Restart=on-failure
StartLimitBurst=3
StartLimitInterval=60s
[Install]
WantedBy=multi-user.target

5、安装docker-compose

将docker-compose-linux-aarch64 文件复制到/usr/local/bin/目录下,并 重命名为docker-compose

1
cp docker-compose-linux-aarch64 /usr/local/bin/docker-compose

6、设置文件文件权限

1
2
chmod +x /etc/systemd/system/docker.service
chmod +x /etc/systemd/system/docker.service

7、重新加载systemd 将新建的docker服务生效

1
systemctl daemon-reload

8、启动docker服务

1
2
3
4
systemctl start docker

查看dokcer状态 
systemctl status docker
]]> http://example.com/posts/6b7ec017.html 2026-03-26T14:47:33.000Z docker和d]]> docker离线部署 2026-04-05T14:21:38.398Z