Hexo 基础搭建

  • 参考 Hello World 可快速搭建Hexo框架的博客和发布文章

应用主题 Butterfly

yarn 拉取依赖 启用主题

1
2
yarn add hexo-theme-butterfly # 安装 butterfly 主题
yarn add hexo-renderer-pug hexo-renderer-stylus # 安装 pug 以及 stylus 的渲染器
  • 在根目录下的_config.yml中配置主题
1
themes: butterfly

这里先说明一下怎么引入创建的css或者js(在博客根目录source中选择性新建_datacssjsimg
打开_config.butterfly.yml 文件,找到 Inject 部分,这里以 custom.csstitle.js 为例,注意这两个都为本地文件,在线网址也一样,更改 href=src= 里面的内容就行

1
2
3
4
5
6
7
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
- <link rel="stylesheet" href="/css/custom.css">
bottom:
# - <script src="xxxx"></script>
- <script async src="/js/title.js"></script>

Hexo 会自动合并主题中的 _config.yml_config.butterfly.yml 里的配置。
会优先使用 __config.butterfly.yml 的配置,其优先度较高。

  • 后续对butterfly主题的美化配置就在_config.butterfly.yml进行修改就可以了~

背景美化

背景一图流

  1. 设置背景
    修改主题配置文件__config.butterfly.yml
    编辑 index_imgbackgroundfooter_img 选项。
    设置网站背景,并将主页顶部图和页脚背景改为透明。(需要将以下示例地址替换为自己的图片地址。可以用一张具体的图片,也可以用随机图 api,随机显示图片)

    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
    # 首页的横幅图片
    index_img: transparent

    # 归档页的横幅图片
    archive_img:

    # 注意: 是标签页(单个标签),不是标签页面(所有标签)
    tag_img:

    # 标签页的横幅图片,可为每个标签单独设置
    # 格式:
    # - 标签名: 图片链接
    tag_per_img:

    # 注意: 是分类页(单个分类),不是分类页面(所有分类)
    category_img:

    # 分类页的横幅图片,可为每个分类单独设置
    # 格式:
    # - 分类名: 图片链接
    category_per_img:

    # 页脚的背景图片
    footer_img: transparent

    # 网站背景
    # 可设置为颜色或图片链接
    background: https://www.helloimg.com/i/2025/10/27/68ff0e506e4bb.png
  2. 引入相关样式
    新建一个文件,位于 source/css/modify.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
    @import 'nib'

    // 顶部图
    #page-header
    &, &:before
    background: transparent !important
    &.post-bg, &.not-home-page
    height: 280px !important
    #post-info
    bottom: 40px !important
    #page-site-info
    top: 140px !important

    @media screen and (max-width: 768px)
    &.not-home-page
    height: 200px !important
    #post-info
    bottom: 10px !important
    #page-site-info
    top: 100px !important

    .top-img
    height: 250px
    margin: -50px -40px 50px
    border-top-left-radius: inherit
    border-top-right-radius: inherit
    background-position: center center
    background-size: cover
    transition: all 0.3s

    @media screen and (max-width: 768px)
    height: 230px
    margin: -36px -14px 36px

    [data-theme='dark'] &
    filter: brightness(0.8)

    // 页脚
    #footer:before
    background-color: alpha(#FFF, .5)

    [data-theme='dark'] &
    background-color: alpha(#000, .5)

    #footer-wrap, #footer-wrap a
    color: #111
    transition: unset

    [data-theme='dark'] &
    color: var(--light-grey)

    在主题配置文件 _config.butterfly.ymlinject.head 引入样式

    1
    2
    3
    inject:
    head:
    - <link rel="stylesheet" href="/css/modify.css">

    说明:modify.styl 会被 Hexo 渲染成 modify.css 文件,所以此处应为 modify.css

  3. 增加插件脚本
    因为使用了 cheerio 来解析 HTML,所以需要先安装此依赖

    1
    yarn add cheerio

    这里强调一下有很多宝子看错路径哦【scripts/modify.js
    新建一个文件,位于 scripts/modify.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
    "use strict";
    const cheerio = require("cheerio");

    /**
    * 在页面插入新顶部图
    * @param {cheerio.Root} $ Root
    */
    function insertTopImg($) {
    let header = $("#page-header");
    if (header.length === 0) return;
    let background = header.css("background-image");
    if (!background) return;
    $("#post, #page, #archive, #tag, #category").prepend(
    `<div class="top-img" style="background-image: ${background};"></div>`
    );
    }

    hexo.extend.filter.register("after_render:html", function (str, data) {
    let $ = cheerio.load(str, {
    decodeEntities: false,
    });
    insertTopImg($);
    return $.html();
    });

背景透明设置

参考教程:Hexo 中 Buttefly 主题美化进阶续篇(十一) | 偷掉月亮 (moonshuo.cn)

根据自己的喜好进行了更改,添加以下代码到 custom.css 文件(或者自己新建一个),然后在主题配置项引入 css 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/* 背景透明度 */
:root {
--trans-light: rgba(255, 255, 255, 0.8);
--trans-dark: rgba(25, 25, 25, 0.8);
}

/* 首页文章卡片 */
#recent-posts>.recent-post-item {
background: var(--trans-light);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
background: var(--trans-light);
}

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

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

[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(249, 245, 233, 0.9) !important;
}

.read-mode div#post {
background: rgba(249, 245, 233, 0.9) !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;
}

站点动态 title

站点动态 title 是通过 js 监测是否聚焦于当前页面,从而替换标签显示内容

  1. 在博客根目录下的sourcejs文件夹中新建title.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    //动态标题
    var OriginTitile = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
    //离开当前页面时标签显示内容
    document.title = 'w(゚Д゚)w 不要走!再看看嘛!';
    clearTimeout(titleTime);
    } else {
    //返回当前页面时标签显示内容
    document.title = '♪(^∇^*)欢迎回来!' + OriginTitile;
    //两秒后变回正常标题
    titleTime = setTimeout(function () {
    document.title = OriginTitile;
    }, 2000);
    }
    });
  2. 在主题配置文件 _config.butterfly.ymlinject.bottom 引入样式,此处因为这是个独立的 js,而且体量极小,所以可以添加 async 异步加载标签
    1
    2
    3
    inject:
    bottom:
    - <script async src="/js/title.js"></script>

修改标题样式-旋转小风车

  1. 在主题配置文件中,更改相关配置如下,下面对应的为小风车的编号,可以更改为自己的编号
  2. 在博客根目录下的sourcecss文件夹中新建custom.css文件(若已存在可以考虑追加内容)(也可以按照自己喜好命名)
    在主题配置文件_config.butterfly.yml 中引入对应的 css 文件,将以下代码复制到新建的 custom.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
    /* 文章页H1-H6图标样式效果 */
    /* 控制风车转动速度 4s那里可以自己调节快慢 */
    h1::before,
    h2::before,
    h3::before,
    h4::before,
    h5::before,
    h6::before {
    -webkit-animation: ccc 4s linear infinite;
    animation: ccc 4s linear infinite;
    }

    /* 控制风车转动方向 -1turn 为逆时针转动,1turn 为顺时针转动,相同数字部分记得统一修改 */
    @-webkit-keyframes ccc {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }

    to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
    }
    }

    @keyframes ccc {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }

    to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
    }
    }

    /* 设置风车颜色 */
    #content-inner.layout h1::before {
    color: #ef50a8;
    margin-left: -1.55rem;
    font-size: 1.3rem;
    margin-top: -0.23rem;
    }

    #content-inner.layout h2::before {
    color: #fb7061;
    margin-left: -1.35rem;
    font-size: 1.1rem;
    margin-top: -0.12rem;
    }

    #content-inner.layout h3::before {
    color: #ffbf00;
    margin-left: -1.22rem;
    font-size: 0.95rem;
    margin-top: -0.09rem;
    }

    #content-inner.layout h4::before {
    color: #a9e000;
    margin-left: -1.05rem;
    font-size: 0.8rem;
    margin-top: -0.09rem;
    }

    #content-inner.layout h5::before {
    color: #57c850;
    margin-left: -0.9rem;
    font-size: 0.7rem;
    margin-top: 0rem;
    }

    #content-inner.layout h6::before {
    color: #5ec1e0;
    margin-left: -0.9rem;
    font-size: 0.66rem;
    margin-top: 0rem;
    }

    /* s设置风车hover动效 6s那里可以自己调节快慢*/
    #content-inner.layout h1:hover,
    #content-inner.layout h2:hover,
    #content-inner.layout h3:hover,
    #content-inner.layout h4:hover,
    #content-inner.layout h5:hover,
    #content-inner.layout h6:hover {
    color: var(--theme-color);
    }

    #content-inner.layout h1:hover::before,
    #content-inner.layout h2:hover::before,
    #content-inner.layout h3:hover::before,
    #content-inner.layout h4:hover::before,
    #content-inner.layout h5:hover::before,
    #content-inner.layout h6:hover::before {
    color: var(--theme-color);
    -webkit-animation: ccc 6s linear infinite;
    animation: ccc 6s linear infinite;
    }

评论系统 Waline

配置 waline

启用&配置 Waline

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
# --------------------------------------
# 评论系统
# --------------------------------------

comments:
# 最多启用两个评论系统,第一个为默认
# 无需则留空
# 选择:Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
# 双系统格式:Disqus,Waline
use: Waline
# 按钮旁是否显示评论系统名称
text: true
# 懒加载:评论区进入浏览器视口才加载
# 设为true则评论计数失效
lazyload: false
# 文章头图中是否显示评论数
count: true
# 首页是否显示评论数
card_post_count: false

# Waline评论系统 - 基于Valine开发的带后端支持的简易评论系统(参考文档:https://waline.js.org/)
waline:
# 服务器URL
serverURL: https://xxxxxx.vercel.app #替换为自己的服务器URL
# 评论框背景图片
bg:
# 是否用Waline访客计数作为页面浏览量
pageview: false
# 其他可选配置
option:
requireMeta: [ nick, mail ] # 配置了也没啥用,还是能提交
locale:
placeholder: 小站已开启评论审核,可匿名评论,但评论需要通过审核后才能够出现在评论区哦~
# 表情包网上也有很多哦
emoji: [
'https://unpkg.com/@waline/[email protected]/alus',
'https://unpkg.com/@waline/[email protected]/weibo'
]
pageSize: 10 # 评论每页显示数量
highlight: true
# 让评论区也支持黑夜模式
dark: 'html[data-user-color-scheme="dark"]'

添加gif动图在评论区右侧

新建一个文件,位于 source/css/waline.styl,并增加以下内容在主题配置文件_config.butterfly.yml 中引入对应的 waline.css 文件

1
2
3
4
5
6
7
8
9
10
11
#wl-edit {
background: url("https://xxxxxxx.gif") 100% 100% no-repeat; // 小图可自行寻找哦
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: right bottom !important;
}

#waline-wrap textarea:focus {
background-position-y: 78px !important;
transition: all 0.25s ease-in-out 0s;
}

walineの服务配置

  • GitHub 中 修改提交 vercel 会自动构建
  • package.json 中 添加 axioswaline-link-interceptor 依赖
1
2
3
4
5
6
7
8
9
10
{
"name": "template",
"version": "0.0.1",
"private": true,
"dependencies": {
"@waline/vercel": "latest",
"axios": "latest",
"waline-link-interceptor": "^0.1.2"
}
}
  • index.cjs 按照如下格式配置(本评论系统通知采用Qmsg酱Qmsg酱
  • 提示:发送消息到QQ中最好不要带链接(msg)和敏感词等,否则会提示消息违规
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
const Application = require('@waline/vercel');
const axios = require('axios');
const LinkInterceptor = require('waline-link-interceptor');

// 自定义环境变量
const MY_EV_VAR = {
// QMsg酱的key
qMsgKey: "xxxxxxx",
// 作者邮箱
authorEmail: "[email protected]",
// 网站名称
siteName: "小敏の晚风",
// 网站地址
siteURL: "https://xmblog.chrislin.eu.org",
// QMsg酱消息发送接口地址
qMsgApi: "https://qmsg.zendee.cn/send",
}

module.exports = Application({
// 违禁词
forbiddenWords: ['xxx', 'yyy', 'vvv'], // 违禁词部分内容不方便展示
plugins: [
LinkInterceptor({
whiteList: ['chrislin.eu.org', 'jieniyou.eu.org'],
// blackList: [],
// interceptorTemplate: `hello __URL__ `, // 如果下面自定义了跳转地址,那么此处模板不生效
redirectUrl: "xmblog.chrislin.eu.org/go.html", // 填写中间页的具体 html 地址。
encodeFunc: (url) =>{
// 填入一个外链 url 的处理函数
// 启用 Base64 编码链接
return "u=" + Buffer.from(url).toString('base64') // 或者 return "u=" + btoa(url)
}
})
],
// 评论发布后执行的操作,参数1:评论,参数2:回复评论的父级评论
// 使用async的方法,方法体内调用方法一定配合await使用
async postSave(comment, pComment) {
// 如果不是博主本人发的才通知
if (comment.mail != MY_EV_VAR.authorEmail) {

// 使用axios发送post请求
const formData = new URLSearchParams(); // 转载数据
// 将要发送的信息格式化好后装载到POST参数中
if (pComment == undefined) {
formData.append('msg', `💬 ${MY_EV_VAR.siteName} 有新评论啦\n${comment.nick} 说:\n${comment.comment}`);
} else {
formData.append('msg', `💬 ${MY_EV_VAR.siteName} 有新评论啦\n${comment.nick} 回复 ${pComment.nick} 的内容:\n${pComment.comment}\n说:\n${comment.comment}`);
}
// 给QMsg发送请求
await axios.post(`${MY_EV_VAR.qMsgApi}/${MY_EV_VAR.qMsgKey}`, formData);
};
},
});

安全跳转页面·插件版

参考LiuShenの安全跳转页面·插件版

  • 需要的依赖 cheeriohexo-safego
1
2
yarn add cheerio
yarn add hexo-safego
  • 需要在博客根目录下_config.yml中添加如下代码
  • 若需要评论系统的链接也被检测需要安全跳转需要在 GitHub 中 修改 index.cjs 添加 plugin 可参考walineの服务配置
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
# hexo-safego安全跳转插件
# see https://blog.liushen.fun/posts/1dfd1f41/
hexo_safego:
# 基本功能设置
general:
enable: true # 启用插件
enable_base64_encode: true # 使用 Base64 编码
enable_target_blank: true # 打开新窗口
# 安全设置
security:
url_param_name: 'u' # URL 参数名
html_file_name: 'go.html' # 重定向页面的文件名
ignore_attrs: # 忽略处理的 HTML 属性
- 'data-fancybox'
# 容器与页面设置
scope:
apply_containers: # 应用的容器选择器
- '#article-container'
apply_pages: # 应用的页面路径
- "/posts/"
- "/devices/"
exclude_pages: # 排除的页面路径
# 域名白名单
whitelist:
domain_whitelist: # 允许的白名单域名
- "chrislin.eu.org"
- "jieniyou.eu.org"
# 页面外观设置
appearance:
avatar: https://www.helloimg.com/i/2025/10/23/68f9f902f1561.png # 头像路径
title: "小敏の晚风" # 页面标题
subtitle: "安全中心" # 页面副标题
darkmode: true # 是否启用深色模式
countdowntime: -1 # 倒计时秒数
# 调试设置
debug:
enable: false # 启用调试模式

Butterflyの配置文件速读翻译

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
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
# --------------------------------------
# Hexo Butterfly 主题配置
# 如有疑问,请参考官方文档
# 中文文档: https://butterfly.js.org/
# 英文文档: https://butterfly.js.org/en/
# --------------------------------------

# --------------------------------------
# 导航设置
# --------------------------------------

nav:
# 导航栏Logo图片
logo:
display_title: true
display_post_title: true
# 是否固定导航栏
fixed: false

menu:
# 首页: / || fas fa-home
# 列表||fas fa-list:
# 音乐: /music/ || fas fa-music
# 电影: /movies/ || fas fa-video

# --------------------------------------
# 代码块设置
# --------------------------------------

code_blocks:
# 代码块主题: darker / pale night / light / ocean / false
theme: darker
macStyle: true
# 代码块高度限制(单位: px)
height_limit: false
word_wrap: false

# 工具栏
copy: true
language: true
# true: 收缩代码块 | false: 展开代码块 | none: 展开代码块并隐藏按钮
shrink: true
fullpage: true

# 社交媒体链接
# 格式:
# 图标: 链接 || 描述 || 颜色
social:
# fab fa-github: https://github.com/xxxxx || Github || '#24292e'
# fas fa-envelope: mailto:[email protected] || Email || '#4a7dbe'

# --------------------------------------
# 图片设置
# --------------------------------------

# 网站的favicon图标
favicon: /img/favicon.png

avatar:
# 头像图片链接
img: /img/butterfly-icon.png
# 是否启用头像效果
effect: false

# 禁用所有横幅图片
disable_top_img: false

# 若页面未设置横幅,则显示默认横幅图片
default_top_img:

# 首页的横幅图片
index_img:

# 归档页的横幅图片
archive_img:

# 注意: 是标签页(单个标签),不是标签页面(所有标签)
tag_img:

# 标签页的横幅图片,可为每个标签单独设置
# 格式:
# - 标签名: 图片链接
tag_per_img:

# 注意: 是分类页(单个分类),不是分类页面(所有分类)
category_img:

# 分类页的横幅图片,可为每个分类单独设置
# 格式:
# - 分类名: 图片链接
category_per_img:

# 页脚的背景图片
footer_img: false

# 网站背景
# 可设置为颜色或图片链接
background:

cover:
# 是否禁用封面
index_enable: true
aside_enable: true
archives_enable: true
# 未设置封面时,显示默认封面
default_cover:
# - xxx.jpg

# 替换损坏的图片
error_img:
# 友链页面的错误图片
flink: /img/friend_404.gif
# 文章页面的错误图片
post_page: /img/404.jpg

# 简单的404页面
error_404:
# 是否启用404页面
enable: false
# 404页面的副标题
subtitle: 'Page Not Found'
# 404页面的卡片背景图片
background: /img/error-page.png

post_meta:
# 首页页面
page:
# 日期类型: created / updated / both
date_type: created
# 日期格式: date / relative
date_format: date
categories: true
tags: false
# 是否显示文字标签
label: true
# 文章页面
post:
# 元数据位置: left / center
position: left
# 日期类型: created / updated / both
date_type: both
# 日期格式: date / relative
date_format: date
categories: true
tags: true
# 是否显示文字标签
label: true

# --------------------------------------
# 首页设置
# --------------------------------------

# 首页头图的设置
# 默认: 头图全屏,站点信息在中间
# 站点信息的位置,例如: 300px/300em/300rem/10%
index_site_info_top:
# 头图的高度,例如: 300px/300em/300rem
index_top_img_height:

# 首页的副标题设置
subtitle:
# 是否启用副标题
enable: false
# 打字机效果
effect: true
# 自定义typed.js(参考文档:https://github.com/mattboldt/typed.js/#customization)
typed_option:
# 来源 - 调用第三方服务API(仅限中文)
# 会先显示来源,再显示副标题内容
# 选择: false/1/2/3
# false - 禁用此功能
# 1 - hitokoto.cn
# 2 - https://api.aa1.cn/doc/yiyan.html
# 3 - jinrishici.com
source: false
# 关闭打字机效果后,副标题仅显示sub的第一行内容
sub:

# 首页文章布局
# 1: 左侧封面,右侧信息
# 2: 右侧封面,左侧信息
# 3: 封面与信息左右交替
# 4: 封面在上,信息在下
# 5: 信息覆盖在封面上
# 6: 瀑布流布局 - 封面在上,信息在下
# 7: 瀑布流布局 - 信息覆盖在封面上
index_layout: 3

# 在首页显示文章简介
# 1: 显示description字段内容
# 2: 两者(若存在description,显示description;否则显示自动摘要)
# 3: 自动摘要(默认)
# false: 不显示文章简介
index_post_content:
method: 3
# 若method设为2或3,需配置摘要长度
length: 500

# --------------------------------------
# 文章设置
# --------------------------------------

toc:
# 文章中是否显示目录
post: true
# 页面中是否显示目录
page: false
# 是否显示目录编号
number: true
# 是否默认展开目录
expand: false
# 仅适用于文章
style_simple: false
# 是否显示滚动百分比
scroll_percent: true

post_copyright:
# 是否启用版权声明
enable: true
# 是否对文章URL进行解码
decode: false
# 作者链接
author_href:
# 许可证类型
license: CC BY-NC-SA 4.0
# 许可证链接
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

# 赞助/打赏
reward:
# 是否启用打赏
enable: false
# 打赏提示文本
text:
# 收款二维码
QR_code:
# - img: /img/wechat.jpg
# link:
# text: wechat
# - img: /img/alipay.jpg
# link:
# text: alipay

# 文章在线编辑
# 在线便捷浏览和编辑博客源代码
post_edit:
# 是否启用在线编辑
enable: false
# 链接格式: https://github.com/用户名/仓库名/edit/分支名/子目录名/
# 示例: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
url:

# 相关文章
related_post:
# 是否显示相关文章
enable: true
# 显示的文章数量
limit: 6
# 选择: created / updated
date_type: created

# 选择: 1 / 2 / false
# 1: “下一篇文章”链接到旧文章
# 2: “下一篇文章”链接到新文章
# false: 禁用分页
post_pagination: 1

# 显示文章过期通知
noticeOutdate:
# 是否启用过期通知
enable: false
# 样式: simple / flat
style: flat
# 超过多少天显示通知
limit_day: 365
# 位置: top / bottom
position: top
message_prev: It has been
message_next: days since the last update, the content of the article may be outdated.

# --------------------------------------
# 页脚设置
# --------------------------------------
footer:
# 页脚导航
nav:
owner:
# 是否启用所有者显示
enable: true
# 网站创建年份
since: 2025
# 主题和框架的版权声明
copyright:
enable: true
# 是否显示版本号
version: true
# 自定义文本
custom_text:

# --------------------------------------
# 侧边栏设置
# --------------------------------------

aside:
# 是否启用侧边栏
enable: true
# 是否默认隐藏侧边栏
hide: false
# 是否在右下角显示隐藏侧边栏的按钮
button: true
# 移动设备上是否启用侧边栏
mobile: true
# 位置: left / right
position: right
display:
# 归档页面是否显示侧边栏
archive: true
# 标签页面是否显示侧边栏
tag: true
# 分类页面是否显示侧边栏
category: true
# 作者信息卡片
card_author:
enable: true
# 作者描述
description:
button:
# 是否显示按钮
enable: true
# 按钮图标
icon: fab fa-github
# 按钮文本
text: Follow Me
# 按钮链接
link: https://github.com/xxxxxx
# 公告卡片
card_announcement:
enable: true
# 公告内容
content: This is my Blog
# 最近文章卡片
card_recent_post:
enable: true
# 设为0则显示所有近期文章
limit: 5
# 排序方式: date / updated
sort: date
sort_order:
# 最新评论卡片
card_newest_comments:
enable: false
sort_order:
# 显示评论数量
limit: 6
# 单位:分钟,数据保存到localStorage
storage: 10
# 是否显示头像
avatar: true
# 分类卡片
card_categories:
enable: true
# 设为0则显示所有分类
limit: 8
# 选择:none / true / false
expand: none
sort_order:
# 标签卡片
card_tags:
enable: true
# 设为0则显示所有标签
limit: 40
# 是否启用标签颜色
color: false
# 标签排序方式: random/name/length
orderby: random
# 排序顺序:1为升序,-1为降序
order: 1
sort_order:
# 归档卡片
card_archives:
enable: true
# 归档类型: monthly / yearly
type: monthly
# 日期格式示例:YYYY年MM月
format: MMMM YYYY
# 排序顺序:1为升序,-1为降序
order: -1
# 设为0则显示所有归档
limit: 8
sort_order:
# 系列文章卡片
card_post_series:
enable: true
# 标题是否显示系列名称
series_title: false
# 排序依据:title或date
orderBy: 'date'
# 排序顺序:1为升序,-1为降序
order: -1
# 网站信息卡片
card_webinfo:
enable: true
# 是否显示文章总数
post_count: true
# 是否显示最后更新日期
last_push_date: true
sort_order:
# 发布日期与当前日期的时间差
# 格式:Month/Day/Year Time 或 Year/Month/Day Time
# 不启用此功能则留空
runtime_date:

# --------------------------------------
# 右下角按钮设置
# --------------------------------------

# 右下角按钮与底部的距离(默认单位:px)
rightside_bottom:

# 简繁中文转换
translate:
# 是否启用简繁转换
enable: true
# 按钮默认文本
default:
# 网站语言(1 - 繁体中文 / 2 - 简体中文)
defaultEncoding: 2
# 转换延迟时间
translateDelay: 0
# 简体中文模式下的按钮文本
msgToTraditionalChinese: '繁'
# 繁体中文模式下的按钮文本
msgToSimplifiedChinese: '簡'

# 阅读模式
readmode: true

# 暗黑模式设置
darkmode:
# 是否启用暗黑模式
enable: true
# 暗黑/明亮模式切换按钮
button: true
# 自动切换暗黑/明亮模式
# autoChangeMode: 1 跟随系统设置,系统不支持暗黑模式则在18:00-6:00切换为暗黑模式
# autoChangeMode: 2 固定在18:00-6:00切换为暗黑模式
# autoChangeMode: false 不自动切换
autoChangeMode: true
# 明亮模式时间段(值范围0-24),不设置则默认6-18点
start:
end:

# 返回顶部按钮中是否显示滚动百分比
rightside_scroll_percent: false

# 非专业人员请勿修改以下设置
# 选择:readmode,translate,darkmode,hideAside,toc,chat,comment
# 不可重复设置同一值
rightside_item_order:
# 是否启用右侧按钮排序
enable: false
# 默认隐藏的按钮:readmode,translate,darkmode,hideAside
hide:
# 默认显示的按钮:toc,chat,comment
show:

# 右下角配置按钮的动画效果
rightside_config_animation: true

# --------------------------------------
# 全局设置
# --------------------------------------

anchor:
# 滚动时,URL是否根据标题ID更新
auto_update: false
# 点击标题是否滚动并更新锚点
click_to_scroll: false

# 图片是否显示标题(figcaption)
photofigcaption: false

copy:
# 是否启用复制功能
enable: true
# 复制内容后是否添加版权信息
copyright:
enable: false
# 超过此字数才添加版权信息
limit_count: 150

# 需安装hexo-wordcount插件
wordcount:
# 是否启用字数统计
enable: false
# 文章元信息中是否显示字数统计
post_wordcount: true
# 文章元信息中是否显示阅读时间
min2read: true
# 侧边栏网站信息中是否显示总字数
total_wordcount: true

# 不蒜子站点PV/UV统计
busuanzi:
# 网站UV统计
site_uv: true
# 网站PV统计
site_pv: true
# 页面PV统计
page_pv: true

# --------------------------------------
# 数学公式设置
# --------------------------------------

# 关于per_page参数
# 设为true则所有页面加载mathjax/katex脚本
# 设为false则仅在文章front-matter中添加'mathjax: true'或'katex: true'时加载
math:
# 选择:mathjax, katex,无需则留空
use:
per_page: true
# 是否隐藏滚动条
hide_scrollbar: false

mathjax:
# 是否启用上下文菜单
enableMenu: true
# 选择:all / ams / none,控制公式是否编号及编号方式
tags: none

katex:
# 是否启用KaTeX公式复制功能
copy_tex: false

# --------------------------------------
# 搜索设置
# --------------------------------------

search:
# 选择:algolia_search / local_search / docsearch,无需则留空
use:
# 搜索框提示文本
placeholder:

# Algolia搜索
algolia_search:
# 每页搜索结果数量
hitsPerPage: 6

# 本地搜索
local_search:
# 页面加载时是否预加载搜索数据
preload: false
# 每篇文章显示的顶部结果数量,设为-1显示所有
top_n_per_article: 1
# 是否将HTML字符串反转义为可读文本
unescape: false
# 搜索结果是否启用分页
pagination:
enable: false
# 每页搜索结果数量
hitsPerPage: 8
CDN:

# Docsearch(参考文档:https://docsearch.algolia.com/)
docsearch:
appId:
apiKey:
indexName:
option:

# --------------------------------------
# 分享系统
# --------------------------------------

share:
# 选择:sharejs / addtoany,无需则留空
use: sharejs

# Share.js(参考文档:https://github.com/overtrue/share.js)
sharejs:
# 启用的分享平台
sites: facebook,x,wechat,weibo,qq

# AddToAny(参考文档:https://www.addtoany.com/)
addtoany:
# 启用的分享平台
item: facebook,x,wechat,sina_weibo,facebook_messenger,email,copy_link

# --------------------------------------
# 评论系统
# --------------------------------------

comments:
# 最多启用两个评论系统,第一个为默认
# 无需则留空
# 选择:Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
# 双系统格式:Disqus,Waline
use:
# 按钮旁是否显示评论系统名称
text: true
# 懒加载:评论区进入浏览器视口才加载
# 设为true则评论计数失效
lazyload: false
# 文章头图中是否显示评论数
count: true
# 首页是否显示评论数
card_post_count: false

# Disqus评论系统(参考文档:https://disqus.com/)
disqus:
# Disqus的shortname
shortname:
# 最新评论组件的API密钥
apikey:

# Disqus替代方案 - 通过Disqus API渲染评论(参考文档:https://github.com/SukkaW/DisqusJS)
disqusjs:
# Disqus的shortname
shortname:
# API密钥
apikey:
# 其他可选配置
option:

# Livere评论系统(参考文档:https://www.livere.com/)
livere:
# Livere的用户ID
uid:

# Gitalk评论系统(参考文档:https://github.com/gitalk/gitalk)
gitalk:
# GitHub应用的客户端ID
client_id:
# GitHub应用的客户端密钥
client_secret:
# 存储评论的仓库名
repo:
# 仓库所有者用户名
owner:
# 管理员用户名列表
admin:
# 其他可选配置
option:

# Valine评论系统(参考文档:https://valine.js.org)
valine:
# LeanCloud应用的appId
appId:
# LeanCloud应用的appKey
appKey:
# 评论者头像样式
avatar: monsterid
# 此配置适用于国内自定义域名用户,海外版本自动检测(无需手动填写)
serverURLs:
# 评论框背景图片
bg:
# 是否用Valine访客计数作为页面浏览量
visitor: false
# 其他可选配置
option:

# Waline评论系统 - 基于Valine开发的带后端支持的简易评论系统(参考文档:https://waline.js.org/)
waline:
# 服务器URL
serverURL:
# 评论框背景图片
bg:
# 是否用Waline访客计数作为页面浏览量
pageview: false
# 其他可选配置
option:
locale:
placeholder: 小站已开启评论审核,可匿名评论,但评论需要通过审核后才能够出现在评论区哦~
emoji: [
'https://unpkg.com/@waline/[email protected]/alus',
'https://unpkg.com/@waline/[email protected]/weibo'
]
pageSize: 10 # 评论每页显示数量
highlight: true
dark: 'html[data-user-color-scheme="dark"]'

# Utterances评论系统(参考文档:https://utteranc.es/)
utterances:
# 存储评论的GitHub仓库
repo:
# 议题映射方式:pathname/url/title/og:title
issue_term: pathname
# 主题:github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
light_theme: github-light
dark_theme: dark-blue
js:
# 其他可选配置
option:

# Facebook评论插件(参考文档:https://developers.facebook.com/docs/plugins/comments/)
facebook_comments:
# 应用ID
app_id:
# 可选:用户ID
user_id:
# 每页显示评论数
pageSize: 10
# 选择:social / time / reverse_time
order_by: social
# 语言
lang: en_US

# Twikoo评论系统(参考文档:https://github.com/imaegoo/twikoo)
twikoo:
# 环境ID
envId:
# 区域
region:
# 是否用Twikoo访客计数作为页面浏览量
visitor: false
# 其他可选配置
option:

# Giscus评论系统(参考文档:https://giscus.app/)
giscus:
# 仓库
repo:
# 仓库ID
repo_id:
# 分类ID
category_id:
# 主题
light_theme: light
dark_theme: dark
js:
# 其他可选配置
option:

# Remark42评论系统(参考文档:https://remark42.com/docs/configuration/frontend/)
remark42:
# 服务器地址
host:
# 站点ID
siteId:
# 其他可选配置
option:

# Artalk评论系统(参考文档:https://artalk.js.org/guide/frontend/config.html)
artalk:
# 服务器地址
server:
# 站点名
site:
# 是否用Artalk访客计数作为页面浏览量
visitor: false
# 其他可选配置
option:

# --------------------------------------
# 聊天服务
# --------------------------------------

chat:
# 选择:chatra/tidio/crisp,无需则留空
use:
# 聊天按钮【推荐】
# 会在网站右下角创建按钮,并隐藏原生按钮
rightside_button: false
# 向上滚动时显示原生聊天按钮,向下滚动时隐藏
button_hide_show: false

# Chatra聊天服务(参考网站:https://chatra.io/)
chatra:
# Chatra的服务ID
id:

# Tidio聊天服务(参考网站:https://www.tidio.com/)
tidio:
# Tidio的公钥
public_key:

# Crisp聊天服务(参考网站:https://crisp.chat/en/)
crisp:
# Crisp的网站ID
website_id:

# --------------------------------------
# 统计分析
# --------------------------------------

# 百度统计(参考网站:https://tongji.baidu.com/web/welcome/login)
baidu_analytics:

# 谷歌分析(参考网站:https://analytics.google.com/analytics/web/)
google_analytics:

# Cloudflare分析(参考网站:https://www.cloudflare.com/zh-tw/web-analytics/)
cloudflare_analytics:

# Microsoft Clarity(参考网站:https://clarity.microsoft.com/)
microsoft_clarity:

# Umami分析(参考网站:https://umami.is/)
umami_analytics:
# 是否启用
enable: false
# 自托管部署时,配置Umami实例的主机名
serverURL:
# 脚本名称
script_name: script.js
# 网站ID
website_id:
# 其他可选配置
option:
UV_PV:
# 站点UV统计
site_uv: false
# 站点PV统计
site_pv: false
# 页面PV统计
page_pv: false
# Umami Cloud(填API密钥)/自托管Umami(填令牌)
token:

# Google标签管理器(参考网站:https://www.googletagmanager.com/)
google_tag_manager:
# 标签ID
tag_id:
# 可选:域名
domain:

# --------------------------------------
# 广告设置
# --------------------------------------

# Google Adsense广告
google_adsense:
# 是否启用
enable: false
# 是否自动投放广告
auto_ads: true
# 广告脚本URL
js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
# 客户ID
client:
# 是否启用页面级广告
enable_page_level_ads: true

# 手动插入广告
# 无需则留空
ad:
# 在首页每三篇文章后插入广告
index:
# 在侧边栏插入广告
aside:
# 在文章分页前插入广告
post:

# --------------------------------------
# 站点验证
# --------------------------------------

site_verification:
# - name: google-site-verification
# content: xxxxxx
# - name: baidu-site-verification
# content: xxxxxxx

# --------------------------------------
# 美化/效果设置
# --------------------------------------

# 自定义主题颜色
# 注意:颜色值必须用双引号包裹,如"#000",否则可能导致错误!

# theme_color:
# enable: true
# main: "#49B1F5"
# paginator: "#00c4b6"
# button_hover: "#FF7242"
# text_selection: "#00c4b6"
# link_color: "#99a9bf"
# meta_color: "#858585"
# hr_color: "#A4D8FA"
# code_foreground: "#F47466"
# code_background: "rgba(27, 31, 35, .05)"
# toc_color: "#00c4b6"
# blockquote_padding_color: "#49b1f5"
# blockquote_background_color: "#49b1f5"
# scrollbar_color: "#49b1f5"
# meta_theme_color_light: "ffffff"
# meta_theme_color_dark: "#0d0d0d"

# 分类页与标签页的界面设置
# 选择:index(与首页UI相同)/ default(与归档页UI相同)
# 留空或设为index
category_ui:
tag_ui:

# UI元素是否启用圆角
rounded_corners_ui: true

# 是否拉伸文本行,使每行宽度相等(两端对齐)
text_align_justify: false

# 是否为页眉和页脚添加遮罩
mask:
header: true
footer: true

# 加载动画
preloader:
# 是否启用
enable: false
# 动画来源
# 1. 全屏加载动画
# 2. 进度条动画(pace)
source: 1
# pace主题(参考:https://codebyzach.github.io/pace/)
pace_css_url:

# 页面过渡动画
enter_transitions: true

# 默认显示模式 - light(明亮模式,默认)/ dark(暗黑模式)
display_mode: dark

# 文章内容美化配置
beautify:
# 是否启用
enable: true
# 指定美化范围(site为全站,post仅文章)
field: post
# 指定标题前缀图标,如'\f0c1'(Font Awesome图标unicode值)
title_prefix_icon: '\f863'
# 指定标题前缀图标的颜色,如'#F47466'
title_prefix_icon_color: "#F47466"

# 全局字体设置
# 非专业人员请勿修改以下设置
font:
global_font_size:
code_font_size:
font_family:
code_font_family:

# 网站标题与副标题的字体设置
blog_title_font:
font_link:
font_family:

# 分隔线图标设置
hr_icon:
# 是否启用
enable: true
# Font Awesome图标的unicode值,如'\3423'
icon:
icon_top:

# 打字机特效(参考文档:https://github.com/disjukr/activate-power-mode)
activate_power_mode:
# 是否启用
enable: false
# 是否启用彩色效果
colorful: true
# 是否启用震动效果
shake: true
# 移动设备上是否启用
mobile: false

# 背景效果
# --------------------------------------

# canvas_ribbon丝带背景(参考文档:https://github.com/hustcc/ribbon.js)
canvas_ribbon:
# 是否启用
enable: false
# 丝带尺寸
size: 150
# 丝带透明度(0~1)
alpha: 0.6
# z-index属性
zIndex: -1
# 是否点击切换颜色
click_to_change: false
# 移动设备上是否启用
mobile: false

# 飘动丝带背景
canvas_fluttering_ribbon:
# 是否启用
enable: false
# 移动设备上是否启用
mobile: false

# canvas_nest粒子连线背景(参考文档:https://github.com/hustcc/canvas-nest.js)
canvas_nest:
# 是否启用
enable: false
# 线条颜色,默认:'0,0,0';RGB值格式:(R,G,B),注意用英文逗号分隔
color: '0,0,255'
# 线条透明度(0~1)
opacity: 0.7
# 背景的z-index属性
zIndex: -1
# 线条数量
count: 99
# 移动设备上是否启用
mobile: false

# 鼠标点击效果:烟花
fireworks:
# 是否启用
enable: false
# z-index属性
zIndex: 9999
# 移动设备上是否启用
mobile: false

# 鼠标点击效果:心形符号
click_heart:
# 是否启用
enable: false
# 移动设备上是否启用
mobile: false

# 鼠标点击效果:文字
clickShowText:
# 是否启用
enable: false
# 显示文字
text:
# - I
# - LOVE
# - YOU
# 文字大小
fontSize: 15px
# 是否随机显示文字
random: false
# 移动设备上是否启用
mobile: false

# --------------------------------------
# 灯箱设置
# --------------------------------------

# 选择:fancybox / medium_zoom
# 参考文档:https://github.com/francoischalifour/medium-zoom、https://fancyapps.com/fancybox/
# 无需则留空
lightbox:

# --------------------------------------
# 标签插件设置
# --------------------------------------

# 系列文章
series:
# 是否启用
enable: false
# 排序依据:title(按标题)或date(按日期)
orderBy: 'title'
# 排序顺序:1为升序,-1为降序
order: 1
# 是否显示编号
number: true

# ABCJS - 音乐符号插件(参考文档:https://github.com/paulrosen/abcjs)
abcjs:
# 是否启用
enable: false
# 是否每页启用
per_page: true

# Mermaid - 流程图插件(参考文档:https://github.com/mermaid-js/mermaid)
mermaid:
# 是否启用
enable: false
# 是否通过代码块编写Mermaid图表
code_write: false
# 内置主题:default / forest / dark / neutral
theme:
light: default
dark: dark

# chartjs - 图表插件(参考文档:https://www.chartjs.org/docs/latest/)
chartjs:
# 是否启用
enable: false
# 非专业人员请勿修改以下设置
# 默认配置仅在未指定MD语法时生效
# 图表全局字体颜色
fontColor:
light: 'rgba(0, 0, 0, 0.8)'
dark: 'rgba(255, 255, 255, 0.8)'
# 图表全局边框颜色
borderColor:
light: 'rgba(0, 0, 0, 0.1)'
dark: 'rgba(255, 255, 255, 0.2)'
# 雷达图与极区图的刻度标签背景色
scale_ticks_backdropColor:
light: 'transparent'
dark: 'transparent'

# Note - Bootstrap提示框插件
note:
# Note标签样式:
# - simple bs-callout旧版警告样式,默认
# - modern bs-callout新版(v2-v3)警告样式
# - flat 带背景的扁平提示框样式,类似Mozilla或StackOverflow
# - disabled 禁用Note标签的所有CSS样式
style: flat
# 是否显示图标
icons: true
# 边框半径
border_radius: 3
# modern和flat样式的背景色偏移百分比(modern:-12 | 12;flat:-18 | 6)
# 此偏移也适用于标签变量,可与disabled模式配合使用
light_bg_offset: 0

# --------------------------------------
# 其他设置
# --------------------------------------

# Pjax无刷新页面切换(参考文档:https://github.com/MoOx/pjax)
pjax:
# 是否启用
enable: false
# 排除不使用Pjax的页面,如'/music/'
exclude:
# - /xxxxxx/

# 注入CSS和脚本(用于aplayer/meting音乐播放器)
aplayerInject:
# 是否启用
enable: false
# 是否每页启用
per_page: true

# Snackbar - 消息提示组件(参考文档:https://github.com/polonel/SnackBar)
# 位置:top-left(左上)/ top-center(中上)/ top-right(右上)/ bottom-left(左下)/ bottom-center(中下)/ bottom-right(右下)
snackbar:
# 是否启用
enable: false
# 提示位置
position: bottom-left
# 明亮模式与暗黑模式下的提示框背景色
bg_light: '#49b1f5'
bg_dark: '#1f1f1f'

# Instant.page - 预加载插件(参考文档:https://instant.page/)
instantpage: false

# Lazyload - 图片懒加载插件(参考文档:https://github.com/verlok/vanilla-lazyload)
lazyload:
# 是否启用
enable: false
# 是否用浏览器原生懒加载替代vanilla-lazyload
native: false
# 指定懒加载范围(site为全站,post仅文章)
field: site
# 占位图
placeholder:
# 是否启用模糊效果
blur: false

# PWA - 渐进式Web应用(参考文档:https://github.com/JLHwung/hexo-offline)
# ---------------
pwa:
# 是否启用
enable: false
# manifest文件路径
manifest:
# Apple Touch图标路径
apple_touch_icon:
# 32×32像素的favicon图标路径
favicon_32_32:
# 16×16像素的favicon图标路径
favicon_16_16:
# mask图标路径
mask_icon:

# Open Graph元标签(参考文档:https://hexo.io/docs/helpers#open-graph)
Open_Graph_meta:
# 是否启用
enable: true
# 其他可选配置
option:
# twitter_card:
# twitter_image:
# twitter_id:
# twitter_site:
# google_plus:
# fb_admins:
# fb_app_id:

# 结构化数据(参考文档:https://developers.google.com/search/docs/guides/intro-structured-data)
structured_data:
# 是否启用
enable: false
# 网站的备用名称,用于结构化数据
# 格式:['名称1', '名称2']
alternate_name:

# 自动添加CSS浏览器前缀以确保兼容性
css_prefix: true

# 代码注入
# 在head标签底部(</head>前)和body标签底部(</body>前)插入代码
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
- <link rel="stylesheet" href="/css/custom.css">
- <link rel="stylesheet" href="/css/modify.css">
- <link rel="stylesheet" href="/css/waline.css">
bottom:
# - <script src="xxxx"></script>
- <script async src="/js/title.js"></script>

# CDN设置
# 非专业人员请勿修改以下设置
CDN:
# 内部脚本与第三方脚本的CDN提供商
# 两者可选:local(本地)/ jsdelivr / unpkg / cdnjs / custom(自定义)
# 注意:开发版仅支持内部脚本使用'local'
# 注意:第三方脚本设为'local'时,需安装hexo-butterfly-extjs插件
internal_provider: local
third_party_provider: jsdelivr

# 是否在URL中添加版本号,true或false
version: true

# 自定义格式
# 示例:https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
custom_format:

option:
# abcjs_basic_js:
# activate_power_mode:
# algolia_js:
# algolia_search:
# aplayer_css:
# aplayer_js:
# artalk_css:
# artalk_js:
# blueimp_md5:
# busuanzi:
# canvas_fluttering_ribbon:
# canvas_nest:
# canvas_ribbon:
# chartjs:
# click_heart:
# clickShowText:
# disqusjs:
# disqusjs_css:
# docsearch_css:
# docsearch_js:
# egjs_infinitegrid:
# fancybox:
# fancybox_css:
# fireworks:
# fontawesome:
# gitalk:
# gitalk_css:
# giscus:
# instantpage:
# katex:
# katex_copytex:
# lazyload:
# local_search:
# main:
# main_css:
# mathjax:
# medium_zoom:
# mermaid:
# meting_js:
# prismjs_autoloader:
# prismjs_js:
# prismjs_lineNumber_js:
# pjax:
# sharejs:
# sharejs_css:
# snackbar:
# snackbar_css:
# translate:
# twikoo:
# typed:
# utils:
# valine:
# waline_css:
# waline_js: