引入阿里矢量图标库

在控制台找到对应图标的 class，然后去 Hexo 根目录查找，大部分位于：

1
C:\hexo\themes\butterfly\layout\includes

将原有引入方式：

1
'i.fas.fa-arrow-up'

修改为 SVG 图标引入方式：

1
2
svg(viewBox='0 0 1024 1024' style='width: 1em; height: 1em; margin: 0 -1px -2px 0;')
  use(xlink:href='#你的图标名称')

如果不确定具体目录，可在控制台找到 class 后，在 VSCode 中全局搜索项目，定位类似 i.fas.fa-arrow-up 的代码再进行修改。
阿里矢量图标库（iconfont）可在项目设置中开启彩色模式，采用 symbol 方式引用即可。

自定义 CSS

  1. 在博客目录创建自定义 CSS 文件：
1
hexo\themes\butterfly\source\css\anxy.css
  1. 在 hexo\themes\butterfly\_config.yml 的 inject.head 部分添加：
1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/anxy.css">

配置文章链接转数字或字母

仓库：hexo-abbrlink

  1. 安装插件：
1
npm install hexo-abbrlink --save
  1. 修改站点根目录 config.yml 中的永久链接配置：
1
2
3
4
permalink: posts/:abbrlink.html
abbrlink:
  alg: crc16   # 算法：crc16(default) 和 crc32
  rep: dec     # 进制：dec(default) 和 hex

本地搜索依赖

  1. 安装插件：
1
npm install hexo-generator-search --save
  1. 在站点根目录 config.yml 添加：
1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  1. Butterfly 主题最新版需在主题配置文件 config.yml 中找到搜索选项，改为本地搜索（主题内有详细配置说明）。

RSS 和 Sitemap 安装

  1. 安装插件：
1
2
3
4
5
6
7
8
# RSS
npm install hexo-generator-feed --save

# Sitemap
npm install hexo-generator-sitemap --save

# 百度 Sitemap
npm install hexo-generator-baidu-sitemap --save-dev
  1. 在站点根目录 config.yml 添加以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Extensions
## Plugins: http://hexo.io/plugins/

# RSS 订阅
plugins:
  - hexo-generator-feed
  - hexo-generator-baidu-sitemap
  - hexo-generator-sitemap

# Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

# Baidu Sitemap
baidusitemap:
  path: baidusitemap.xml

# Sitemap
sitemap:
  path: sitemap.xml

页脚 GitHub 徽标和计时器

  1. 安装插件：
1
npm install hexo-butterfly-footer-beautify --save
  1. 在博客根目录配置文件添加：
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
# footer_beautify
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)
footer_beautify:
  enable:
    timer: true # 计时器开关
    bdage: true # 徽标开关
  priority: 5 # 过滤器优先权
  enable_page: all # 应用页面
  exclude: # 屏蔽页面
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: id
    name: footer-wrap
    index: 0
  # 计时器部分配置项
  runtime_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js
  runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css
  # 徽标部分配置项
  swiperpara: 3 # 若非 0，则开启轮播功能，每行徽标个数
  bdageitem:
    - link: https://hexo.io/ # 徽标指向网站链接
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo # 徽标 API
      message: 博客框架为 Hexo_v5.4.0 # 徽标提示语
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: 主题版本 Butterfly_v3.8.2
    - link: https://www.jsdelivr.com/
      shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
      message: 本站使用 JsDelivr 为静态资源提供 CDN 加速
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
      message: 本站采用双线部署，默认线路托管于 Vercel
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio
      message: 本站采用双线部署，联通线路托管于 Coding
    - link: https://github.com/
      shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
      message: 本站项目由 Github 托管
    - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
      shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
      message: 本站采用知识共享署名 - 非商业性使用 - 相同方式共享 4.0 国际许可协议进行许可
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js
  swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js

页面样式调节

通过 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
:root {
  --trans-light: rgba(255, 255, 255, 0.88);
  --trans-dark: rgba(25, 25, 25, 0.88);
  --border-style: 1px solid rgb(169, 169, 169);
  --backdrop-filter: blur(5px) saturate(150%);
}

/* 首页文章卡片 */
#recent-posts > .recent-post-item {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 25px;
  border: var(--border-style);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 18px;
  border: var(--border-style);
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border: var(--border-style);
  border-radius: 20px;
}

/* 导航栏 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--backdrop-filter);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark);
}

/* 夜间模式页脚页头遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

/* 阅读模式 */
.read-mode #aside-content .card-widget {
  background: rgba(158, 204, 171, 0.5) !important;
}
.read-mode div#post {
  background: rgba(158, 204, 171, 0.5) !important;
}

/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}

个人卡片背景

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 个人信息卡片背景图 */
[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%;
}

侧边栏分类栏调整

  1. 修改 [blogRoot]/themes/butterfly/scripts/helpers/aside_categories.js 第 58 行：
1
result += `<span class="card-category-list-count">${cat.length} 篇</span>`
  1. 修改 [blogRoot]/themes/butterfly/scripts/helpers/aside_archives.js 第 92 行：
1
result += `<span class="card-archive-list-count">${item.count} 篇</span>`
  1. 添加自定义 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
#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-pack: justify;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item, #aside-content .card-categories ul.card-category-list > .card-category-list-item {
    width: 48%;
    margin: 3px 0;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    padding: 3px 10px;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: var(--font-color);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    border: 1px solid #cbcbcb;
    border-radius: 6px;
    -webkit-box-orient: vertical;
}

/* 侧边栏分类（标签）样式调整 */

资讯 - 文章数目（删除）

此模块与作者卡片内容重复，建议删除以保持简洁。

删除 [blogRoot]/themes/butterfly/layout/includes/widget/card_webinfo.pug 第 7-10 行内容：

1
2
3
4
5
6
7
8
9
10
11
12
    ···

      span= _p('aside.card_webinfo.headline')
    .webinfo
-      if theme.aside.card_webinfo.post_count
-        .webinfo-item
-          .item-name= _p('aside.card_webinfo.article_name') + " :"
-          .item-count= site.posts.length
      if theme.runtimeshow.enable
        .webinfo-item

    ···

作者：亦小封
链接：https://meuicat.com/posts/73a5ae75.html
来源：爱吃肉的猫
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

渐变色版权美化（店长 + 微调）

参考：Fomalhaut

修改 post-copyright.pug

修改文件：[BlogRoot]\themes\butterfly\layout\includes\post\post-copyright.pug

直接复制以下内容替换原文件内容。此处多次用到了三元运算符作为默认项设置，在确保有主题配置文件的默认项的情况下，也可以在相应文章的 front-matter 中重新定义作者、原文链接、开源许可协议等内容。

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
if theme.post_copyright.enable && page.copyright !== false
  - let author = page.copyright_author ? page.copyright_author : config.author
  - let url = page.copyright_url ? page.copyright_url : page.permalink
  - let license = page.license ? page.license : theme.post_copyright.license
  - let license_url = page.license_url ? page.license_url : theme.post_copyright.license_url
  .post-copyright
    .post-copyright__title
      span.post-copyright-info
        h #[=page.title]
    .post-copyright__type
      span.post-copyright-info
        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
    .post-copyright-m
      .post-copyright-m-info
        .post-copyright-a
            h 作者
            .post-copyright-cc-info
                h=author
        .post-copyright-c
            h 发布于
            .post-copyright-cc-info
                h=date(page.date, config.date_format)
        .post-copyright-u
            h 更新于
            .post-copyright-cc-info
                h=date(page.updated, config.date_format)
        .post-copyright-c
            h 许可协议
            .post-copyright-cc-info
                a.icon(rel='noopener' target='_blank' title='Creative Commons' href='https://creativecommons.org/')
                  i.fab.fa-creative-commons
                a(rel='noopener' target='_blank' title=license href=url_for(license_url))=license

修改 post.styl

修改文件：[BlogRoot]\themes\butterfly\source\css\_layout\post.styl

直接复制以下内容替换原文件，这个文件就是自己调节样式的。其中，184 行是白天模式的背景色，这里默认是我网站的渐变色，大家可以根据自己的喜好调节；253 行是夜间模式的发光光圈颜色，大家也可以自行替换成自己喜欢的颜色：

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
beautify()
  headStyle(fontsize)
    padding-left: unit(fontsize + 12, 'px')

    &:before
      margin-left: unit((-(fontsize + 6)), 'px')
      font-size: unit(fontsize, 'px')

    &:hover
      padding-left: unit(fontsize + 18, 'px')

  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    transition: all .2s ease-out

    &:before
      position: absolute
      top: calc(50% - 7px)
      color: $title-prefix-icon-color
      content: $title-prefix-icon
      line-height: 1
      transition: all .2s ease-out
      @extend .fontawesomeIcon

    &:hover
      &:before
        color: $light-blue

  h1
    headStyle(20)

  h2
    headStyle(18)

  h3
    headStyle(16)

  h4
    headStyle(14)

  h5
    headStyle(12)

  h6
    headStyle(12)

  ol,
  ul
    p
      margin: 0 0 8px

  li
    &::marker
      color: $light-blue
      font-weight: 600
      font-size: 1.05em

    &:hover
      &::marker
        color: var(--pseudo-hover)

  ul > li
    list-style-type: circle

#article-container
  word-wrap: break-word
  overflow-wrap: break-word

  a
    color: $theme-link-color

    &:hover
      text-decoration: underline

  img
    display: block
    margin: 0 auto 20px
    max-width: 100%
    transition: filter 375ms ease-in .2s

  p
    margin: 0 0 16px

  iframe
    margin: 0 0 20px

  if hexo-config('anchor')
    a.headerlink
      &:after
        @extend .fontawesomeIcon
        float: right
        color: var(--headline-presudo)
        content: '\f0c1'
        font-size: .95em
        opacity: 0
        transition: all .3s

      &:hover
        &:after
          color: var(--pseudo-hover)

    h1,
    h2,
    h3,
    h4,
    h5,
    h6
      &:hover
        a.headerlink
          &:after
            opacity: 1

  ol,
  ul
    ol,
    ul
      padding-left: 20px

    li
      margin: 4px 0

    p
      margin: 0 0 8px

  if hexo-config('beautify.enable')
    if hexo-config('beautify.field') == 'site'
      beautify()
    else if hexo-config('beautify.field') == 'post'
      &.post-content
        beautify()

  > :last-child
    margin-bottom: 0 !important

#post
  .tag_share
    .post-meta
      &__tag-list
        display: inline-block

      &__tags
        display: inline-block
        margin: 8px 8px 8px 0
        padding: 0 12px
        width: fit-content
        border: 1px solid $light-blue
        border-radius: 12px
        color: $light-blue
        font-size: .85em
        transition: all .2s ease-in-out

        &:hover
          background: $light-blue
          color: var(--white)

    .post_share
      display: inline-block
      float: right
      margin: 8px 0
      width: fit-content

      .social-share
        font-size: .85em

        .social-share-icon
          margin: 0 4px
          width: w = 1.85em
          height: w
          font-size: 1.2em
          line-height: w

  .post-copyright
    position: relative
    margin: 40px 0 10px
    padding: 10px 16px
    border: 1px solid var(--light-grey)
    transition: box-shadow .3s ease-in-out
    overflow: hidden
    border-radius: 12px!important
    background: linear-gradient(45deg, #f6d8f5, #c2f1f0, #f0debf);

    &:before
      background var(--heo-post-blockquote-bg)
      position absolute
      right -26px
      top -120px
      content '\f25e'
      font-size 200px
      font-family 'Font Awesome 5 Brands'
      opacity .2

    &:hover
      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)

    .post-copyright
      &-meta
        color: $light-blue
        font-weight: bold

      &-info
        padding-left: 6px

        a
          text-decoration: none
          word-break: break-word

          &:hover
            text-decoration: none

  .post-copyright-cc-info
    color: $theme-color;

  .post-outdate-notice
    position: relative
    margin: 0 0 20px
    padding: .5em 1.2em
    border-radius: 3px
    background-color: $noticeOutdate-bg
    color: $noticeOutdate-color

    if hexo-config('noticeOutdate.style') == 'flat'
      padding: .5em 1em .5em 2.6em
      border-left: 5px solid $noticeOutdate-border

      &:before
        @extend .fontawesomeIcon
        position: absolute
        top: 50%
        left: .9em
        color: $noticeOutdate-border
        content: '\f071'
        transform: translateY(-50%)

  .ads-wrap
    margin: 40px 0
.post-copyright-m-info
  .post-copyright-a,
  .post-copyright-c,
  .post-copyright-u
    display inline-block
    width fit-content
    padding 2px 5px
[data-theme="dark"]
  #post
    .post-copyright
      background #07080a
      text-shadow #bfbeb8 0 0 2px
      border 1px solid rgb(19 18 18 / 35%)
      box-shadow 0 0 5px var(--theme-color)
      animation flashlight 1s linear infinite alternate
  .post-copyright-info
    color #e0e0e4

#post
  .post-copyright__title
    font-size 22px
  .post-copyright__notice
    font-size 15px
  .post-copyright
    box-shadow 2px 2px 5px

默认项的配置

作者：[BlogRoot]\_config.yml 中的 author 配置项

1
2
3
4
5
6
7
8
# Site
title: Akilar の糖果屋
subtitle: Akilar.top
description:
keywords:
author: Akilar # 默认作者
language: zh-CN
timezone: ''

许可协议：[BlogRoot]\_config.butterfly.yml 中的 license 和 license_url 配置项

1
2
3
4
5
post_copyright:
  enable: true
  decode: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

页面覆写配置项，修改对应文章的 front-matter

1
2
3
4
5
6
7
8
9
---
title: Copyright-beautify # 文章名称
date: 2021-03-02 13:52:46 # 文章发布日期
updated: 2021-03-02 13:52:46 # 文章更新日期
copyright_author: Nesxc # 作者覆写
copyright_url: https://www.nesxc.com/post/hexocc.html # 原文链接覆写
license: # 许可协议名称覆写
license_url: # 许可协议链接覆写
---

右边按钮阅读进度（Leonus）

参考：Fomalhaut

  1. 旧版本的 butterfly 看上面链接的教程。
  2. 新版 butterfly 只需要配置主题文件就好了（大约在 464 行左右）
  3. 最新版看主题文件已有配置项支持开启
1
2
# 在返回顶部按钮中显示滚动百分比
rightside_scroll_percent: true

直达底部按钮

参考：Fomalhaut

在 [BlogRoot]\themes\butterfly\layout\includes\rightside.pug 添加以下内容：

1
2
button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")
  i.fas.fa-arrow-down

博客背景切换 - 弹窗版

参考：Leonus，本人使用的是 Leonus 博主的方案，这里微修一下。
使用的是阿里云图标库，自行修改，并引入阿里云提供的链接。

修改 nav.pug

修改文件：hexo\themes\butterfly\layout\includes\header\nav.pug

添加以下内容：

1
2
3
4
div
        a.site-page.social-icon.search(href="javascript:;" onclick="toggleWinbox()" title="切换背景 - 换一种感觉。")
          svg.icon(aria-hidden="true" style="width: 21px;height: 21px;margin-bottom: -4.5px;margin-left: 10px;")
            use(xlink:href="#icon-xiangce")

这是nav.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
nav#nav
  span#blog-info
    a.nav-site-title(href=url_for('/'))
      if theme.nav.logo
        img.site-icon(src=url_for(theme.nav.logo) alt='Logo')
      if theme.nav.display_title
        span.site-name=config.title
    if is_post()
      a.nav-page-title(href=url_for('/'))
        span.site-name=(page.title || config.title)
  #menus
    if theme.menu
      != partial('includes/header/menu_item', {}, {cache: true})
  #nav-right
    if theme.search.use
      #search-button
        span.site-page.social-icon.search
          svg.icon(aria-hidden="true" style="width: 1.25em;height: 1.25em;margin-bottom: -4.5px;margin-bottom: -4.5px;")
            use(xlink:href="#icon-icon-sousuo")   
            
      div
        a.site-page.social-icon.search(href="javascript:;" onclick="toggleWinbox()" title="切换背景 - 换一种感觉。")
          svg.icon(aria-hidden="true" style="width: 21px;height: 21px;margin-bottom: -4.5px;margin-left: 10px;")
            use(xlink:href="#icon-xiangce")

      #toggle-menu
        span.site-page
          svg(viewBox='0 0 1024 1024' style='width: 1em; height: 1em; margin: 0 -1px -2px 0;')
            use(xlink:href='#icon-mulu')

引入 JS

在主题配置文件里的 inject 下的 bottom 引入文件：

1
2
3
4
5
6
7
inject:
  head:

  bottom:
    # winbox
    - <script src="https://cdn.jsdelivr.net/gh/nextapps-de/winbox/dist/winbox.bundle.min.js"></script> # 添加此行
    - <script src="xxx.js"></script> # 这个代表自定义 js，放在最下面

添加自定义 JS

里面的图片是 Leonus 的 cdn，请自行下载，上传到自己的图床。

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
// 切换背景弹窗版
// 存数据
// name：命名 data：数据
function saveData(name, data) {
    localStorage.setItem(name, JSON.stringify({ 'time': Date.now(), 'data': data }))
}

// 取数据
// name：命名 time：过期时长，单位分钟，如传入 30,即加载数据时如果超出 30 分钟返回 0,否则返回数据
function loadData(name, time) {
    let d = JSON.parse(localStorage.getItem(name));
    // 过期或有错误返回 0 否则返回数据
    if (d) {
        let t = Date.now() - d.time
        if (t < (time * 60 * 1000) && t > -1) return d.data;
    }
    return 0;
}

// 上面两个函数如果你有其他需要存取数据的功能，也可以直接使用

// 读取背景
try {
    let data = loadData('blogbg', 1440)
    if (data) changeBg(data, 1)
    else localStorage.removeItem('blogbg');
} catch (error) { localStorage.removeItem('blogbg'); }

// 切换背景函数
// 此处的 flag 是为了每次读取时都重新存储一次，导致过期时间不稳定
// 如果 flag 为 0 则存储，即设置背景. 为 1 则不存储，即每次加载自动读取背景.
function changeBg(s, flag) {
    let bg = document.getElementById('web_bg')
    if (s.charAt(0) == '#') {
        bg.style.backgroundColor = s
        bg.style.backgroundImage = 'none'
    } else bg.style.backgroundImage = s
    if (!flag) { saveData('blogbg', s) }
}

// 以下为 2.0 新增内容

// 创建窗口
var winbox = ''

function createWinbox() {
    let div = document.createElement('div')
    document.body.appendChild(div)
    winbox = WinBox({
        id: 'changeBgBox',
        index: 999,
        title: "切换背景",
        x: "center",
        y: "center",
        minwidth: '300px',
        height: "60%",
        background: '#49b1f5',
        onmaximize: () => { div.innerHTML = `<style>body::-webkit-scrollbar {display: none;}div#changeBgBox {width: 100% !important;}</style>` },
        onrestore: () => { div.innerHTML = '' }
    });
    winResize();
    window.addEventListener('resize', winResize)
    // 每一类我放了一个演示，直接往下复制粘贴 a 标签就可以，需要注意的是 函数里面的链接 冒号前面需要添加反斜杠\进行转义
    winbox.body.innerHTML = `
    <div id="article-container" style="padding:10px;">

    <div class="note info flat">
        点击对应样式即可切换背景。
    </div>

    <div class="note success flat">
        有效期为一天，到期切回默认壁纸。
    </div>

    <p><button onclick="localStorage.removeItem('blogbg');location.reload();" style="background:#5fcdff;display:block;width:100%;padding: 15px 0;border-radius:6px;color:white;"><i class="fa-solid fa-arrows-rotate"></i> 点我恢复默认背景</button></p>
    <h2 id="图片"><a href="#图片" class="headerlink" title="图片"></a> 图片</h2>
     <details class="toggle" style="background-color:white; border: 2px solid black; border-radius: 5px;">
         <summary class="toggle-button" style="padding: 10px; cursor: pointer; font-weight: bold;">查看电脑壁纸</summary>
         <div class="toggle-content">
             <div class="bgbox">
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/dd4aee16880411ebb6edd017c2d2eca2.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/dd4aee16880411ebb6edd017c2d2eca2.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/66a0f1473a0f4ae7850ac8607774eb03.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/66a0f1473a0f4ae7850ac8607774eb03.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/058fe486bd784f28875a7a01f68d09de.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/058fe486bd784f28875a7a01f68d09de.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/c9d3deb2880411ebb6edd017c2d2eca2.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/c9d3deb2880411ebb6edd017c2d2eca2.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/0d73ff1af5c149c2af78a4c7280c9ac9.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/0d73ff1af5c149c2af78a4c7280c9ac9.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/08206a3879f9467f93eb18e279dd2642.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/08206a3879f9467f93eb18e279dd2642.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/14d9904fe2ac4961b203c3eb2f2f467f.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/14d9904fe2ac4961b203c3eb2f2f467f.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/f048e9726518419fa15dd365902500c4.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/f048e9726518419fa15dd365902500c4.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/bab9141327ca48e39abef6229b79cf9c.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/bab9141327ca48e39abef6229b79cf9c.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/a26f66658e014e06aa70e2753742bef3.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/a26f66658e014e06aa70e2753742bef3.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/35d9316f450041b89232893f083a57f1.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/35d9316f450041b89232893f083a57f1.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/6143778327db4d17adbb63c0f6c0a8af.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/6143778327db4d17adbb63c0f6c0a8af.webp)')"></a>
             </div>
         </div>
     </details>
 </div>
 `;   
}

// 适应窗口大小
function winResize() {
    let box = document.querySelector('#changeBgBox')
    if (!box || box.classList.contains('min') || box.classList.contains('max')) return // 2023-02-10 更新
    var offsetWid = document.documentElement.clientWidth;
    if (offsetWid <= 768) {
        winbox.resize(offsetWid * 0.95 + "px", "90%").move("center", "center");
    } else {
        winbox.resize(offsetWid * 0.6 + "px", "70%").move("center", "center");
    }
}

// 切换状态，窗口已创建则控制窗口显示和隐藏，没窗口则创建窗口
function toggleWinbox() {
    if (document.querySelector('#changeBgBox')) winbox.toggleClass('hide');
    else createWinbox();
}

添加自定义 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
/* 切换弹窗版 */
/* 由于全屏会出 bug，所以直接给他隐藏 */

.winbox {
  border-radius: 12px;
  overflow: hidden;
}

.wb-full {
  display: none;
}

.wb-min {
  background-position: center;
}

[data-theme='dark'] .wb-body,
[data-theme='dark'] #changeBgBox {
  background: #333 !important;
}

.bgbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pimgbox,
.imgbox,
.box {
  width: 166px;
  margin: 10px;
  background-size: cover
}

.pimgbox,
.imgbox {
  border-radius: 10px;
  overflow: hidden;
}

.pimgbox {
  height: 240px;
}

.imgbox {
  height: 95px;
}

.box {
  height: 100px;
}

@media screen and (max-width: 768px) {
  /* 背景 */
  .pimgbox,
  .imgbox,
  .box {
    height: 73px;
    width: 135px;
  }
  .pimgbox {
    height: 205px;
  }
  /* 2.0 新增内容 */    
  .wb-min {
    display: none;
  }
  #changeBgBox .wb-body::-webkit-scrollbar {
    display: none;
  }
}

首页文章推荐

参考：MeuiCat
感谢 MeuiCat 给予的帮助，由于自己的版本与博主的不同，所以会有一些奇怪的问题。以下是解决后的教程。这里可能和原作者的不太一样，针对自己的喜好，我做出了一些修改。

修改 index.pug

在 [blogRoot]/themes/butterfly/layout/includes/header/index.pug 页面最后的位置新增以下内容：

1
2
3
if is_home()
  .banner-random
    .random-list

新建 banner-random.styl

新建 [blogRoot]/themes/butterfly/source/css/_page/banner-random.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
.banner-random
    margin: 15px auto 0
    width 100%
    max-width 1170px

    +maxWidth768()
        padding-left: 10px;
        padding-right: 10px;
    
    .random-title
        display: flex
        justify-content: space-between
        align-items: center

        .title
            font-size: 1.25rem
            font-weight: 600
            margin: 0
            min-width: 80px

        .botton-box
            display: flex
            font-weight: 600

            +maxWidth768()
                width: 100%
                justify-content: space-between
                align-items: center

            .refresh
                opacity: .5
                transition: .6s

                +maxWidth768()
                    margin-left: 8px

                &:hover
                    color: var(--icat-blue)
                    opacity: 1

                i
                    margin-right: 6px

                    +maxWidth768()
                        font-size: 18px

                span
                    +maxWidth768()
                        display: none

            .slide
                display: none

                +maxWidth768()
                    display: flex

                i
                    margin-left: 4px
                    font-size: 14px
                    width: 28px
                    height: 28px
                    display: flex
                    align-items: center
                    justify-content: center

    .random-list
        margin-top: 15px
        display: flex

        +maxWidth768()
            overflow-x: scroll
            overflow-y: hidden
            scroll-behavior: smooth
        
        &::-webkit-scrollbar
            display: none

        .post_item
            width: calc(100% / 4 - 8px)
            margin-right: 15px
            border-radius: 8px
            background: var(--card-bg)
            box-shadow: var(--icat-shadow-border)
            transition: .6s
            border: var(--style-border)
            height: 110px
            animation: barrageIn .6s .4s backwards

            +maxWidth768()
                width: 240px
                min-width: 240px

            &:last-child
                margin-right: 0

            &:hover
                background: var(--icat-blue)
                box-shadow: var(--icat-shadow-blue)

                .post_box
                    .post-info
                        opacity: 0

                    .post_description
                        opacity: 1

            a:hover
                color: var(--font-color)

            .post_box
                width: 100%
                height: 100%
                display: flex
                position: relative
                align-items: center
                justify-content: center

                .post-info
                    display: flex
                    align-items: center
                    justify-content: center
                    flex-direction: column
                    padding: 0 15px
                    transition: .6s
                    opacity: 1

                    +maxWidth768()
                        padding: 0 8px

                    .post-title
                        margin: 0
                        font-size: 1rem
                        font-weight: 600
                        line-height: 1.5
                        -webkit-line-clamp: 1
                        overflow: hidden
                        -webkit-box-orient: vertical
                        display: -webkit-box

                    .info-box
                        font-size: 13px
                        color: #858585
                        display: flex

                .post_description
                    position: absolute
                    opacity: 0
                    color: white
                    transition: .6s
                    text-align: center
                    padding: 0 15px
                    line-height: 1.6
                    -webkit-line-clamp: 2
                    overflow: hidden
                    -webkit-box-orient: vertical
                    display: -webkit-box
                    margin: 0

                    +maxWidth768()
                        padding: 0 8px

创建 random-articles.js

创建 [blogRoot]/themes/butterfly/scripts/helpers/random-articles.js 文件，并新增以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
'use strict'

hexo.extend.generator.register('thePosts', function(locals) {
	const jsonData = locals.posts
		.filter(post => post.random !== false)
		.map(post => {
			const date = new Date(post.date);
			const categories = post.categories.map(category => category.name);
            const formattedDate = date.toISOString().split('T')[0];
			return {
				title: post.title || "暂无标题",
				time: formattedDate,
				categories: categories[0],
				description: post.description || "暂无简介",
                link: post.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/')
			};
		});

	return {
		path: 'articles-random.json',
		data: JSON.stringify(jsonData)
	};
});

创建 anxy.js

创建 [blogRoot]/source/js/anxy.js 文件 (或写在自建的公共 js 中也可以)，并新增以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
const CACHE_EXPIRATION_TIME = 12 * 60 * 60 * 1000;  // 缓存过期时间，12 小时
// 随机文章 js
const anxy = {
    getRandomElementsFromArray: function(arr, num) {
        const shuffled = arr.sort(() => 0.5 - Math.random()); // 打乱数组顺序
        return shuffled.slice(0, num); // 返回前 num 个元素
    },

    renderingPosts: function(data) {
        const randomElements = anxy.getRandomElementsFromArray(data, 4);
        const postsHtml = randomElements.map((i) => `
            <div class="post_item">
                <a class="post_box" title="${i.title}" href="${i.link}" onclick="pjax.loadUrl('${i.link}')">
                    <div class="post-info">
                        <p class="post-title">${i.title}</p>
                        <div class="info-box">
                            <span>${i.time}</span>
                            <span style="margin: 0 6px">|</span>
                            <span>${i.categories}</span>
                        </div>
                    </div>
                    <p class="post_description">${i.description}</p>
                </a>
            </div>`).join('');

        const randomList = document.querySelector(".banner-random>.random-list");
        if (randomList) {
            randomList.innerHTML = postsHtml;
        }
    },

    loadData: function() {
        fetch("/articles-random.json")
            .then(res => res.ok ? res.json() : Promise.reject('请求失败'))
            .then(data => {
                sessionStorage.setItem("postsInfo", JSON.stringify(data));
                sessionStorage.setItem("postsInfoTimestamp", Date.now());
                anxy.renderingPosts(data);
                console.log("随机文章加载成功");
            })
            .catch(err => {
                console.error("随机文章加载失败:", err);
                setTimeout(anxy.loadData, 3000);  // 错误时重试
            });
    },

    RandomPosts: function() {
        const cachedData = sessionStorage.getItem("postsInfo");
        const cachedTimestamp = sessionStorage.getItem("postsInfoTimestamp");

        if (cachedData && cachedTimestamp && (Date.now() - cachedTimestamp < CACHE_EXPIRATION_TIME)) {
            try {
                anxy.renderingPosts(JSON.parse(cachedData));
            } catch (e) {
                console.error("缓存数据解析失败:", e);
                anxy.loadData();  // 如果解析失败，重新加载数据
            }
        } else {
            anxy.loadData();  // 缓存无效或不存在时，加载新数据
        }
    }
};

// 页面加载时加载随机文章
window.addEventListener('load', function() {
    anxy.RandomPosts();  // 确保在页面完全加载后执行
});

// 初始化 pjax
const pjax = new Pjax({
    elements: 'a',
    selectors: ['#pjax-container'],
    cache: true,
    history: true,
    scrollTo: false,
    transition: 'fade',
    transitionTime: 300
});

document.addEventListener('pjax:complete', function () {
    setTimeout(() => anxy.RandomPosts(), 500);  // 等待 500ms 再渲染随机文章，确保内容渲染完毕
});

Butterfly 主题魔改 404 页面图片背景

修改 _config.yml

修改 hexo\themes\butterfly\_config.yml 第 126~139 行的内容，将 background: 后修改为图片 url。

修改 404.styl

背景颜色修改：hexo\themes\butterfly\source\css\_page\404.styl，把里面最后面的 background-color 修改为自己喜欢的颜色就好了（这里我默认白色）：

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
if hexo-config('error_404.enable')
  .type-404
    .error-content
      @extend .cardHover
      overflow: hidden
      margin: 0 20px
      height: 360px

      +maxWidth768()
        margin: 0
        height: 500px

      .error-img
        display: inline-block
        overflow: hidden
        width: 50%
        height: 100%

        +maxWidth768()
          width: 100%
          height: 45%

        img
          @extend .imgHover
          background-color: #ffffff

项目启动自定义字符画

参考：Fomalhaut

ASCII 字符画生成器参考：CSDN: 在线生成 ascii 字符画网站字符图案在线生成工具

替换主题源码：[BlogRoot]\themes\butterfly\scripts\events\welcome.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
hexo.on('ready', () => {
  const { version } = require('../../package.json')
  hexo.log.info(`
  ======================================================================
                                                                     
██████  ██    ██ ████████ ████████ ███████ ██████  ███████ ██      ██    ██ 
██   ██ ██    ██    ██       ██    ██      ██   ██ ██      ██       ██  ██  
██████  ██    ██    ██       ██    █████   ██████  █████   ██        ████   
██   ██ ██    ██    ██       ██    ██      ██   ██ ██      ██         ██    
██████   ██████     ██       ██    ███████ ██   ██ ██      ███████    ██    

                            主题版本：${version}
  ======================================================================`)
})

控制台样式自定义（安知鱼）

参考：Fomalhaut

ASCII 字符画生成器参考：CSDN: 在线生成 ascii 字符画网站字符图案在线生成工具

新建 console.js

新建文件：[BlogRoot]\source\js\console.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
var now1 = new Date();

function createtime1() {
    var grt = new Date("11/28/2022 14:00:00"); // 此处修改你的建站时间或者网站上线时间
    now1.setTime(now1.getTime() + 250);
    var days = (now1 - grt) / 1000 / 60 / 60 / 24;
    var dnum = Math.floor(days);

    var ascll = [
        `欢迎来到安小歪の小家!`,
        `Future is now 🍭🍭🍭`,
        `
 █████╗ ███╗   ██╗██╗  ██╗██╗ █████╗  ██████╗ ██╗    ██╗ █████╗ ██╗
██╔══██╗████╗  ██║╚██╗██╔╝██║██╔══██╗██╔═══██╗██║    ██║██╔══██╗██║
███████║██╔██╗ ██║ ╚███╔╝ ██║███████║██║   ██║██║ █╗ ██║███████║██║
██╔══██║██║╚██╗██║ ██╔██╗ ██║██╔══██║██║   ██║██║███╗██║██╔══██║██║
██║  ██║██║ ╚████║██╔╝ ██╗██║██║  ██║╚██████╔╝╚███╔███╔╝██║  ██║██║
╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝╚═╝╚═╝  ╚═╝ ╚═════╝  ╚══╝╚══╝ ╚═╝  ╚═╝╚═╝
                                                                   
`,
        "小站已经苟活",
        dnum,
        "天啦!",
        "©2022~2026 By 安小歪",
    ];

    setTimeout(
        console.log.bind(
            console,
            `\n%c${ascll[0]} %c ${ascll[1]} %c ${ascll[2]} %c${ascll[3]}%c ${ascll[4]}%c ${ascll[5]}\n\n%c ${ascll[6]}\n`,
            "color:#39c5bb",
            "",
            "color:#39c5bb",
            "color:#39c5bb",
            "",
            "color:#39c5bb",
            ""
        )
    );
}

createtime1();

function createtime2() {
    var ascll2 = [`NCC2-036`, `调用前置摄像头拍照成功，识别为「大聪明」`, `Photo captured: `, ` 🤪 `];

    setTimeout(
        console.log.bind(
            console,
            `%c ${ascll2[0]} %c ${ascll2[1]} %c \n${ascll2[2]} %c\n${ascll2[3]}`,
            "color:white; background-color:#10bcc0",
            "",
            "",
            'background:url("https://cdn.cbd.int/anzhiyu-assets@1.0.11/image/common/tinggge.gif") no-repeat;font-size:450%'
        )
    );

    setTimeout(console.log.bind(console, "%c WELCOME %c 欢迎光临，大聪明", "color:white; background-color:#23c682", ""));

    setTimeout(
        console.warn.bind(
            console,
            "%c ⚡ Powered by 安小歪 %c 你正在访问安小歪の小家",
            "color:white; background-color:#f0ad4e",
            ""
        )
    );

    setTimeout(console.log.bind(console, "%c W23-12 %c 系统监测到你已打开控制台", "color:white; background-color:#4f90d9", ""));
    setTimeout(
        console.warn.bind(console, "%c S013-782 %c 你现在正处于监控中", "color:white; background-color:#d9534f", "")
    );
}
createtime2();

// 重写 console 方法
console.log = function () { };
console.error = function () { };
console.warn = function () { };

在主题配置文件中引入该 JS 文件

修改文件：[BlogRoot]\_config.butterfly.yml

1
2
3
inject:
  bottom:
    - <script async src="/js/console.js"></script>