butterfly 重装日记

本篇为博主的部分魔改重装日记,以防自己日后因魔改迷失所做记录 📝

npm 镜像

npm 淘宝镜像源

1
2
3
npm config set registry http://registry.npmmirror.com
# 切回源
npm config set registry https://registry.npmjs.org/

颜色 css

因魔改中有大量 css 颜色变量代码如color: var(--anzhiyu-white)等类似代码, 均为 css 颜色代码, 此处为博主目前所有的颜色变量定义 css, 可自行复制并修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/* 颜色 */
:root {
--anzhiyu-theme-op: #4259ef23;
--anzhiyu-gray-op: #9999992b;
--anzhiyu-theme-top: var(--anzhiyu-theme);
--anzhiyu-white: #fff;
--anzhiyu-white-op: rgba(255, 255, 255, 0.2);
--anzhiyu-black: #000;
--anzhiyu-black-op: rgba(0, 0, 0, 0.2);
--anzhiyu-none: rgba(0, 0, 0, 0);
--anzhiyu-gray: #999999;
--anzhiyu-yellow: #ffc93e;
--anzhiyu-border-radius: 8px;
--anzhiyu-main: var(--anzhiyu-theme);
--anzhiyu-main-op: var(--anzhiyu-theme-op);
--anzhiyu-shadow-theme: 0 8px 12px -3px var(--anzhiyu-theme-op);
--anzhiyu-shadow-main: 0 8px 12px -3px var(--anzhiyu-main-op);
--anzhiyu-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, 0.2);
--anzhiyu-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, 0.2);
--anzhiyu-shadow-black: 0 0 12px 4px rgba(0, 0, 0, 0.05);
--anzhiyu-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, 0.12);
--anzhiyu-shadow-red: 0 8px 12px -3px #ee7d7936;
--anzhiyu-shadow-green: 0 8px 12px -3px #87ee7936;
--anzhiyu-shadow-border: 0 8px 16px -4px #2c2d300c;
--anzhiyu-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, 0.15);
--anzhiyu-logo-color: linear-gradient(215deg, #4584ff 30%, #ff7676 70%);
--style-border: 1px solid var(--anzhiyu-card-border);
--anzhiyu-blue-main: #3b70fc;
--style-border-hover: 1px solid var(--anzhiyu-main);
--style-border-dashed: 1px dashed var(--anzhiyu-theme-op);
--style-border-avatar: 4px solid var(--anzhiyu-background);
--style-border-always: 1px solid var(--anzhiyu-card-border);
--anzhiyu-white-acrylic1: #fefeff !important;
--anzhiyu-white-acrylic2: #fcfdff !important;
--anzhiyu-black-acrylic2: #08080a !important;
--anzhiyu-black-acrylic1: #0b0b0e !important;
--anzhiyu-main-none: #b8b8b800 !important;
}

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

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

安装 hexo

参考教程: https://blog.anheyu.com/posts/ddae.html

1
2
3
4
npm install hexo-cli -g
hexo init
npm install hexo-deployer-git --save
npm install hexo-renderer-pug hexo-renderer-stylus --save

安装 Butterfly

参考教程: https://butterfly.js.org/posts/21cfbf15/#%E5%AE%89%E8%A3%9D

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

修改 _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
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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 安知鱼
subtitle: '生活明朗 万物可爱'
description: '生活明朗,万物可爱.'
keywords: 安知鱼,安知鱼的博客,博客,安知鱼博客,陈志伟,Blog,anzhiyu,安知鱼`Blog,hexo,ANZHIYU, HEXO anzhiyu,Blog,anzhiyu`Blog,💖,安,安知,安知鱼,In安知鱼,Go安知鱼,anzhiy
author: 安知鱼
language: zh-CN
timezone:
email: anzhiy-c@qq.com

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://anheyu.com
permalink: posts/:abbrlink.html
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: false
preprocess: true
line_number: true
tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
- type: git
repository:
# github: git@github.com:anzhiyu-c/anzhiyu-c.github.io.git #用户名@服务器Ip:git仓库位置
github: https://anzhiyu-c:xxx@github.com/anzhiyu-c/anzhiyu-c.github.io.git
branch: master
- type: baidu_url_submitter # 这是新加的百度主动推送

# 文章链接转数字或字母:https://github.com/rozbo/hexo-abbrlink
abbrlink:
alg: crc16 #算法: crc16(default) and crc32
rep: hex #进制: dec(default) and hex: dec #输出进制:十进制和十六进制,默认为10进制。丨dec为十进制,hex为十六进制

# 本地搜索:https://github.com/wzpan/hexo-generator-search
search:
path: search.xml
field: all
content: true

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
enable: true #开关插件版看板娘
scriptFrom: local # 默认
# scriptFrom: https://cdn.cbd.int/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: live2d-widget-model-koharu # npm-module package name
# use: https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json # 你的自定义 url
display:
position: left #控制看板娘位置
width: 150 #控制看板娘大小
height: 300 #控制看板娘大小
mobile:
show: false # 手机中是否展示

# https://github.com/hexojs/hexo-generator-sitemap
sitemap:
path: sitemap.xml
rel: false
tags: true
categories: true

# https://github.com/coneycode/hexo-generator-baidu-sitemap
baidusitemap:
path: baidusitemap.xml

# https://github.com/hexojs/hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
rss: /atom.xml

# Extensions
plugins:
- hexo-generator-feed
- hexo-generator-baidu-sitemap
- hexo-generator-sitemap

# 追番插件
# https://github.com/HCLonely/hexo-bilibili-bangumi
bangumi: # 追番设置
enable: true
path:
vmid: 372204786
title: '追番列表'
quote: '生命不息,追番不止!'
show: 1
lazyload: false
loading:
metaColor:
color:
webp:
progress:
extra_options:
key: value
cinema: # 追剧设置
enable: false
path:
vmid: 372204786
title: '追剧列表'
quote: '生命不息,追剧不止!'
show: 1
lazyload: true
loading:
metaColor:
color:
webp:
progress:
extra_options:
key: value

# 百度主动推送
# https://github.com/huiwang/hexo-baidu-url-submit
baidu_url_submit:
count: 1 # 提交最新的多少个链接
host: blog.anheyu.com # 在百度站长平台中添加的域名
token: Rgem9kAECSLflQq6 # 秘钥
path: baidu_urls.txt # 文本文档的地址, 新链接会保存在此文本文档里

# APlayer
# https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
aplayer:
meting: true
asset_inject: false

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

参考: https://github.com/rozbo/hexo-abbrlink

1
npm install hexo-abbrlink --save

本地搜索依赖

参考:https://github.com/wzpan/hexo-generator-search

1
npm install hexo-generator-search --save

live2d

1
2
# 安装live2d
npm install --save hexo-helper-live2d
1
2
# 安装模型
npm install --save live2d-widget-model-koharu

sitemap

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save-dev

Rss

1
npm install hexo-generator-feed --save

追番插件

1
npm install hexo-bilibili-bangumi --save

百度主动推送

1
npm install hexo-baidu-url-submit --save

aplayer 音乐播放器

1
npm install hexo-tag-aplayer --save
1
2
3
aplayerInject:
enable: true
per_page: true
1
2
# aplayer音乐
- <div class="aplayer no-destroy" data-id="8152976493" data-server="netease" data-type="playlist" data-order="list" data-fixed="true" data-preload="auto" data-autoplay="false" data-mutex="true" ></div>

配置自定义 css

新建文件[Blogroot]/source/css/custom.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
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
/* @font-face {
font-family: Candyhome;
src: url(https://npm.elemecdn.com/anzhiyu-blog@1.1.6/fonts/Candyhome.ttf);
font-display: swap;
font-weight: lighter;
} */
@font-face {
font-family: ZhuZiAYuanJWD;
src: url(https://npm.elemecdn.com/anzhiyu-blog@1.1.6/fonts/ZhuZiAWan.woff2);
font-display: swap;
font-weight: lighter;
}

div#menus {
font-family: "ZhuZiAYuanJWD";
}
h1#site-title {
font-family: ZhuZiAYuanJWD;
font-size: 3em !important;
}
a.article-title,
a.blog-slider__title,
a.categoryBar-list-link,
h1.post-title {
font-family: ZhuZiAYuanJWD;
}

.iconfont {
font-family: "iconfont" !important;
font-size: 3em;
/* 可以定义图标大小 */
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* 时间轴生肖icon */
svg.icon {
/* 这里定义svg.icon,避免和Butterfly自带的note标签冲突 */
width: 1em;
height: 1em;
/* width和height定义图标的默认宽度和高度*/
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

.icon-zhongbiao::before {
color: #f7c768;
}

/* bilibli番剧插件 */
#article-container .bangumi-tab.bangumi-active {
background: var(--anzhiyu-theme);
color: var(--anzhiyu-ahoverbg);
border-radius: 10px;
}
a.bangumi-tab:hover {
text-decoration: none !important;
}
.bangumi-button:hover {
background: var(--anzhiyu-theme) !important;
border-radius: 10px !important;
color: var(--anzhiyu-ahoverbg) !important;
}
a.bangumi-button.bangumi-nextpage:hover {
text-decoration: none !important;
}
.bangumi-button {
padding: 5px 10px !important;
}

a.bangumi-tab {
padding: 5px 10px !important;
}
svg.icon.faa-tada {
font-size: 1.1em;
}
.bangumi-info-item {
border-right: 1px solid #f2b94b;
}
.bangumi-info-item span {
color: #f2b94b;
}
.bangumi-info-item em {
color: #f2b94b;
}

/* 解决artitalk的图标问题 */
#uploadSource > svg {
width: 1.19em;
height: 1.5em;
}

/*top-img黑色透明玻璃效果移除,不建议加,除非你执着于完全一图流或者背景图对比色明显 */
#page-header:not(.not-top-img):before {
background-color: transparent !important;
}

/* 首页文章卡片 */
#recent-posts > .recent-post-item {
background: rgba(255, 255, 255, 0.9);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
background: rgba(255, 255, 255, 0.9);
}

/* 文章页面正文背景 */
div#post {
background: rgba(255, 255, 255, 0.9);
}

/* 分页页面 */
div#page {
background: rgba(255, 255, 255, 0.9);
}

/* 归档页面 */
div#archive {
background: rgba(255, 255, 255, 0.9);
}

/* 标签页面 */
div#tag {
background: rgba(255, 255, 255, 0.9);
}

/* 分类页面 */
div#category {
background: rgba(255, 255, 255, 0.9);
}

/*夜间模式伪类遮罩层透明*/
[data-theme="dark"] #recent-posts > .recent-post-item {
background: #121212;
}

[data-theme="dark"] .card-widget {
background: #121212 !important;
}

[data-theme="dark"] div#post {
background: #121212 !important;
}

[data-theme="dark"] div#tag {
background: #121212 !important;
}

[data-theme="dark"] div#archive {
background: #121212 !important;
}

[data-theme="dark"] div#page {
background: #121212 !important;
}

[data-theme="dark"] div#category {
background: #121212 !important;
}

[data-theme="dark"] div#category {
background: transparent !important;
}
/* 页脚透明 */
#footer {
background: transparent !important;
}

/* 头图透明 */
#page-header {
background: transparent !important;
}

#rightside > div > button {
border-radius: 5px;
}

/* 滚动条 */

::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-thumb {
background-color: #3b70fc;
border-radius: 2em;
}

::-webkit-scrollbar-corner {
background-color: transparent;
}

::-moz-selection {
color: #fff;
background-color: #3b70fc;
}

/* 音乐播放器 */

/* .aplayer .aplayer-lrc {
display: none !important;
} */

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
left: -66px !important;
transition: all 0.3s;
/* 默认情况下缩进左侧66px,只留一点箭头部分 */
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
left: 0 !important;
transition: all 0.3s;
/* 鼠标悬停是左侧缩进归零,完全显示按钮 */
}

.aplayer.aplayer-fixed {
z-index: 999999 !important;
}

/* 评论框 */
.vwrap {
box-shadow: 2px 2px 5px #bbb;
background: rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: 30px;
margin: 30px 0px 30px 0px;
}

/* 设置评论框 */

.vcard {
box-shadow: 2px 2px 5px #bbb;
background: rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: 30px;
margin: 30px 0px 0px 0px;
}

/* md网站下划线 */
#article-container a:hover {
text-decoration: none !important;
}

#article-container #hpp_talk p img {
display: inline;
}

/* 404页面 */
#error-wrap {
position: absolute;
top: 40%;
right: 0;
left: 0;
margin: 0 auto;
padding: 0 1rem;
max-width: 1000px;
transform: translate(0, -50%);
}

#error-wrap .error-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0 1rem;
height: 18rem;
border-radius: 8px;
background: var(--card-bg);
box-shadow: var(--card-box-shadow);
transition: all 0.3s;
}

#error-wrap .error-content .error-img {
box-flex: 1;
flex: 1;
height: 100%;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background-color: #3b70fc;
background-position: center;
background-size: cover;
}

#error-wrap .error-content .error-info {
box-flex: 1;
flex: 1;
padding: 0.5rem;
text-align: center;
font-size: 14px;
font-family: Titillium Web, "PingFang SC", "Hiragino Sans GB", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}
#error-wrap .error-content .error-info .error_title {
margin-top: -4rem;
font-size: 9em;
}
#error-wrap .error-content .error-info .error_subtitle {
margin-top: -3.5rem;
word-break: break-word;
font-size: 1.6em;
}
#error-wrap .error-content .error-info a {
display: inline-block;
margin-top: 0.5rem;
padding: 0.3rem 1.5rem;
background: var(--btn-bg);
color: var(--btn-color);
}

#body-wrap.error .aside-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
bottom: 0px;
position: absolute;
padding: 1rem;
width: 100%;
overflow: scroll;
}

#body-wrap.error .aside-list .aside-list-group {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
max-width: 1200px;
margin: 0 auto;
}

#body-wrap.error .aside-list .aside-list-item {
padding: 0.5rem;
}

#body-wrap.error .aside-list .aside-list-item img {
width: 100%;
object-fit: cover;
border-radius: 12px;
}

#body-wrap.error .aside-list .aside-list-item .thumbnail {
overflow: hidden;
width: 230px;
height: 143px;
background: var(--anzhiyu-card-bg);
display: flex;
}

#body-wrap.error .aside-list .aside-list-item .content .title {
-webkit-line-clamp: 2;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
line-height: 1.5;
justify-content: center;
align-items: flex-end;
align-content: center;
padding-top: 0.5rem;
color: white;
}

#body-wrap.error .aside-list .aside-list-item .content time {
display: none;
}

/* 代码框主题 */
#article-container figure.highlight {
border-radius: 10px;
}

如果不需要一图流,请删除157行这一部分代码

1
2
3
4
5
6
7
8
9
/* 页脚透明 */
#footer {
background: transparent !important;
}

/* 头图透明 */
#page-header {
background: transparent !important;
}

_config.butterfly.yml中搜索 Inject 添加以下代码,将自定义 csscustom.css引入

1
2
3
inject:
head:
- <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

配置 pwa

点击查看参考教程

基于店长方案进行修改

参考方向教程原贴
店长原教程Butterfly 主题的 PWA 实现方案
点击查看魔改教程

安装必要插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
npm install --global gulp-cli # 全局安装gulp命令集
npm install workbox-build gulp --save # 安装workbox和gulp插件

# 压缩html插件
npm install gulp-htmlclean --save-dev
npm install --save gulp-htmlmin
# 压缩css插件
npm install gulp-clean-css --save-dev
# 压缩js插件
# 使用babel压缩js,与terser二选一
npm install --save-dev gulp-uglify
npm install --save-dev gulp-babel @babel/core @babel/preset-env
# 使用terser压缩js,与babel二选一
npm install gulp-terser --save-dev
npm install --save-dev gulp-babel @babel/core @babel/preset-env
# 压缩图片插件
npm install --save-dev gulp-imagemin
# 压缩字体插件(font-min仅支持压缩ttf格式的字体包)
npm install gulp-fontmin --save-dev

关于 font-min 的补充说明,在本文中,是通过读取所有编译好的 html 文件(./public/*/.html)中的字符,然后匹配原有字体包内./public/fonts/.ttf 字体样式,输出压缩后的字体包到./public/fontsdest/目录。所以最终引用字体的相对路径应该是/fontsdest/.ttf。而本地测试时,如果没有运行 gulp,自然也就不会输出压缩字体包到 public 目录,也就看不到字体样式。

gulp-terser 只会直接压缩 js 代码,所以不存在因为语法变动导致的错误 。事实上,当我们使用 jsdelivr 的 CDN 服务时,只需要在 css 或者 js 的后缀前添加.min,例如 example.js->example.min.js,JsDelivr 就会自动使用 terser 帮我们压缩好代码。

在 package.json 中添加

1
"type": "module",

创建gulpfile.js
在 Hexo 的根目录,创建一个gulpfile.js文件,打开[Blogroot]/gulpfile.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
/*
* @Description: gulp
* @Author: 安知鱼
* @Email: 2268025923@qq.com
* @Date: 2022-02-22 11:22:57
* @LastEditTime: 2022-08-18 12:24:11
* @LastEditors: 安知鱼
*/
import gulp from "gulp";
import cleanCSS from "gulp-clean-css";
import htmlmin from "gulp-htmlmin";
import htmlclean from "gulp-htmlclean";
import workbox from "workbox-build";
import fontmin from "gulp-fontmin";

// 若使用babel压缩js,则取消下方注释,并注释terser的代码
// var uglify = require('gulp-uglify');
// var babel = require('gulp-babel');

// 若使用terser压缩js
import terser from "gulp-terser";

//pwa
gulp.task("generate-service-worker", () => {
return workbox.injectManifest({
swSrc: "./sw-template.js",
swDest: "./public/sw.js",
globDirectory: "./public",
globPatterns: [
// 缓存所有以下类型的文件,极端不推荐
// "**/*.{html,css,js,json,woff2,xml}"
// 推荐只缓存404,主页和主要样式和脚本。
"404.html",
"index.html",
"js/main.js",
"css/index.css",
],
modifyURLPrefix: {
"": "./",
},
});
});

//minify js babel
// 若使用babel压缩js,则取消下方注释,并注释terser的代码
// gulp.task('compress', () =>
// gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
// .pipe(babel({
// presets: ['@babel/preset-env']
// }))
// .pipe(uglify().on('error', function(e){
// console.log(e);
// }))
// .pipe(gulp.dest('./public'))
// );

// minify js - gulp-tester
// 若使用terser压缩js
gulp.task("compress", () =>
gulp
.src([
"./public/**/*.js",
"!./public/**/*.min.js",
"!./public/js/custom/galmenu.js",
"!./public/js/custom/gitcalendar.js",
])
.pipe(terser())
.pipe(gulp.dest("./public"))
);

//css
gulp.task("minify-css", () => {
return gulp
.src("./public/**/*.css")
.pipe(
cleanCSS({
compatibility: "ie11",
})
)
.pipe(gulp.dest("./public"));
});

// 压缩 public 目录内 html
gulp.task("minify-html", () => {
return gulp
.src("./public/**/*.html")
.pipe(htmlclean())
.pipe(
htmlmin({
removeComments: true, //清除 HTML 註释
collapseWhitespace: true, //压缩 HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除 <script> 的 type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除 <style> 和 <link> 的 type="text/css"
minifyJS: true, //压缩页面 JS
minifyCSS: true, //压缩页面 CSS
minifyURLs: true,
})
)
.pipe(gulp.dest("./public"));
});

//压缩字体
function minifyFont(text, cb) {
gulp
.src("./public/fonts/*.ttf") //原字体所在目录
.pipe(
fontmin({
text: text,
})
)
.pipe(gulp.dest("./public/fontsdest/")) //压缩后的输出目录
.on("end", cb);
}

gulp.task("mini-font", cb => {
var buffers = [];
gulp
.src(["./public/**/*.html"]) //HTML文件所在目录请根据自身情况修改
.on("data", function (file) {
buffers.push(file.contents);
})
.on("end", function () {
var text = Buffer.concat(buffers).toString("utf-8");
minifyFont(text, cb);
});
});

// 执行 gulp 命令时执行的任务
gulp.task(
"default",
gulp.series("generate-service-worker", gulp.parallel("compress", "minify-html", "minify-css", "mini-font"))
);

创建在 Hexo 的根目录,创建一个sw-template.js文件,打开[Blogroot]/sw-template.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
/*
* @Description: sw
* @Author: 安知鱼
* @Email: 2268025923@qq.com
* @Date: 2022-02-22 11:23:58
* @LastEditTime: 2022-03-08 12:24:30
* @LastEditors: 安知鱼
*/
const workboxVersion = "5.1.3";

importScripts(`https://storage.googleapis.com/workbox-cdn/releases/${workboxVersion}/workbox-sw.js`);

workbox.core.setCacheNameDetails({
prefix: "安知鱼",
});

workbox.core.skipWaiting();

workbox.core.clientsClaim();

// 注册成功后要立即缓存的资源列表
// 具体缓存列表在gulpfile.js中配置,见下文
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST, {
directoryIndex: null,
});

// 清空过期缓存
workbox.precaching.cleanupOutdatedCaches();

// 图片资源(可选,不需要就注释掉)
// workbox.routing.registerRoute(
// /\.(?:png|jpg|jpeg|gif|bmp|webp|svg|ico)$/,
// new workbox.strategies.CacheFirst({
// cacheName: 'images',
// plugins: [
// new workbox.expiration.ExpirationPlugin({
// maxEntries: 1000,
// maxAgeSeconds: 60 * 60 * 24 * 30,
// }),
// new workbox.cacheableResponse.CacheableResponsePlugin({
// statuses: [0, 200],
// }),
// ],
// })
// )

// 字体文件(可选,不需要就注释掉)
workbox.routing.registerRoute(
/\.(?:eot|ttf|woff|woff2)$/,
new workbox.strategies.CacheFirst({
cacheName: "fonts",
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 1000,
maxAgeSeconds: 60 * 60 * 24 * 30,
}),
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200],
}),
],
})
);

// 谷歌字体(可选,不需要就注释掉)
workbox.routing.registerRoute(
/^https:\/\/fonts\.googleapis\.com/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: "google-fonts-stylesheets",
})
);
workbox.routing.registerRoute(
/^https:\/\/fonts\.gstatic\.com/,
new workbox.strategies.CacheFirst({
cacheName: "google-fonts-webfonts",
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 1000,
maxAgeSeconds: 60 * 60 * 24 * 30,
}),
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200],
}),
],
})
);

// jsdelivr的CDN资源(可选,不需要就注释掉)
// workbox.routing.registerRoute(
// /^https:\/\/cdn\.jsdelivr\.net/,
// new workbox.strategies.CacheFirst({
// cacheName: 'static-libs',
// plugins: [
// new workbox.expiration.ExpirationPlugin({
// maxEntries: 1000,
// maxAgeSeconds: 60 * 60 * 24 * 30,
// }),
// new workbox.cacheableResponse.CacheableResponsePlugin({
// statuses: [0, 200],
// }),
// ],
// })
// )

workbox.googleAnalytics.initialize();

[Blogroot]\themes\butterfly\layout\includes\third-party\目录下新建pwanotice.pug文件,
打开[Blogroot]\themes\butterfly\layout\includes\third-party\pwanotice.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
#app-refresh.app-refresh(style='position: fixed;top: -2.2rem;left: 0;right: 0;z-index: 99999;padding: 0 1rem;font-size: 15px;height: 2.2rem;transition: all 0.3s ease;')
.app-refresh-wrap(style=' display: flex;color: #fff;height: 100%;align-items: center;justify-content: center;')
label ✨ 有新文章啦! 👉
a(href='javascript:void(0)' onclick='location.reload()')
span(style='color: #fff;text-decoration: underline;cursor: pointer;') 🍗点击食用🍔
script.
if ('serviceWorker' in navigator) {
if (navigator.serviceWorker.controller) {
navigator.serviceWorker.addEventListener('controllerchange', function() {
showNotification()
})
}
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js')
})
}
function showNotification() {
if (GLOBAL_CONFIG.Snackbar) {
var snackbarBg =
document.documentElement.getAttribute('data-theme') === 'light' ?
GLOBAL_CONFIG.Snackbar.bgLight :
GLOBAL_CONFIG.Snackbar.bgDark
var snackbarPos = GLOBAL_CONFIG.Snackbar.position
Snackbar.show({
text: '✨ 有新文章啦! 👉',
backgroundColor: snackbarBg,
duration: 500000,
pos: snackbarPos,
actionText: '🍗点击食用🍔',
actionTextColor: '#fff',
onActionClick: function(e) {
location.reload()
},
})
} else {
var showBg =
document.documentElement.getAttribute('data-theme') === 'light' ?
'#3b70fc' :
'#1f1f1f'
var cssText = `top: 0; background: ${showBg};`
document.getElementById('app-refresh').style.cssText = cssText
}
}

修改[Blogroot]\themes\butterfly\layout\includes\additional-js.pug,在文件底部添加以下内容,注意缩进。butterfly_v3.6.0取消了缓存配置,转为完全默认,需要将{cache:theme.fragment_cache}改为{cache: true}:

1
2
3
4
5
6
7
      if theme.pjax.enable
!=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache})

!=partial('includes/third-party/baidu_push', {}, {cache:theme.fragment_cache})

+ if theme.pwa.enable
+ !=partial('includes/third-party/pwanotice', {}, {cache: true})

将你的图标包移入相应的目录,例如我是/img/siteicon/,所以放到[Blogroot]/source/img/siteicon/目录下。

新建文件名为manifest.json并将其放到[Blogroot]/source目录下,此时还不能直接用,需要添加一些内容,以下是我的manifest.json配置内容,权且作为参考,其中的theme_color建议用取色器取设计的图标的主色调,同时务必配置 start_url 和 name 的配置项,这关系到你之后能否看到浏览器的应用安装按钮。:

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
{
"name": "安知鱼`Blog",
"short_name": "安知鱼",
"theme_color": "#3b70fc",
"background_color": "#3b70fc",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "/img/siteicon/16.png",
"sizes": "16x16",
"type": "image/png"
},
{
"src": "/img/siteicon/32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/img/siteicon/48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/img/siteicon/64.png",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "/img/siteicon/128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/img/siteicon/144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/img/siteicon/512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}

打开主题配置文件[Blogroot]/_config.butterfly.yml,找到PWA配置项。添加图标路径。这里的 theme_color 建议改成你图标的主色调,包括manifest.json中的theme_color也是如此。

1
2
3
4
5
6
7
8
pwa:
enable: true
manifest: /manifest.json
theme_color: "#3b70fc"
apple_touch_icon: /img/siteicon/128.png
favicon_32_32: /img/siteicon/32.png
favicon_16_16: /img/siteicon/16.png
mask_icon: /img/siteicon/128.png

添加外挂标签

新建[Blogroot]/source/js/ali_font.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
!(function (c) {
var l,
h,
a,
t,
i,
v =
'<svg><symbol id="icon-dragon_chen" viewBox="0 0 1024 1024"><path d="M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z" fill="#D6B196" ></path><path d="M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-498.122105 265.620211L431.157895 754.526316V485.052632h-66.074948c-14.470737 110.645895-44.355368 197.066105-102.696421 260.742736l-39.747368-36.432842C306.526316 617.876211 323.368421 462.901895 323.368421 242.526316V215.578947h377.263158v53.894737H377.182316c-0.404211 58.260211-2.209684 112.128-6.359579 161.684211H700.631579v53.894737h-122.152421a481.172211 481.172211 0 0 0 76.826947 119.70021l66.479158-39.855158 27.728842 46.214737-54.460631 32.687158c29.507368 24.953263 63.757474 45.675789 102.80421 58.098526l-16.303158 51.361684c-134.224842-42.711579-222.773895-167.073684-261.551158-268.207157H485.052632v221.857684l68.985263-41.391158 27.728842 46.214737-109.783579 65.886316zM646.736842 377.263158h-215.578947v-53.894737h215.578947v53.894737z" fill="#231F20" ></path></symbol><symbol id="icon-dog_xu" viewBox="0 0 1024 1024"><path d="M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z" fill="#D6B196" ></path><path d="M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-375.592421 150.393263c33.684211 44.544 75.210105 74.698105 124.739369 90.812632l11.425684 3.718737 10.401684-6.009264C781.204211 727.740632 808.421053 622.565053 808.421053 592.842105h-53.894737c0 22.069895-19.132632 80.869053-33.711158 103.504842-34.816-14.605474-64.538947-39.262316-89.249684-74.13221 48.316632-55.269053 92.079158-117.328842 120.535579-179.900632l-49.044211-22.285473c-23.767579 52.250947-59.742316 104.717474-100.055579 152.656842-24.010105-50.930526-41.148632-115.927579-51.658105-195.395369H700.631579v-53.894737h-155.189895A1848.050526 1848.050526 0 0 1 538.947368 161.684211h-53.894736c0 58.206316 2.155789 112.074105 6.494315 161.68421H323.368421v26.947368c0 216.549053-13.177263 263.545263-100.702316 359.046737l39.747369 36.432842c63.326316-69.093053 92.806737-118.272 105.714526-206.848H485.052632v-53.894736h-111.319579a1742.147368 1742.147368 0 0 0 3.449263-107.789474h120.158316c12.611368 98.250105 35.031579 177.475368 67.395368 238.187789-61.978947 65.536-128.053895 117.975579-173.298526 142.282106l25.519158 47.481263c47.589053-25.573053 114.095158-77.446737 177.55621-142.821053z m125.170526-411.971368l-80.842105-80.842106-38.103579 38.103579 80.842105 80.842106 38.103579-38.103579z" fill="#231F20" ></path></symbol><symbol id="icon-dog" viewBox="0 0 1024 1024"><path d="M894.814316 904.434526l83.240421-183.134315-13.824-13.204211c-0.485053-0.458105-45.648842-47.589053-47.939369-185.263158-0.134737-7.922526-0.134737-33.953684-0.134736-55.996631-30.693053 15.306105-70.090105 19.887158-106.09179 19.887157-92.752842 0-163.624421-23.983158-210.647579-71.275789a192.512 192.512 0 0 1-27.944421-36.513684H377.263158v377.263158c342.662737 0 403.105684 51.092211 494.592 128.377263 7.922526 6.682947 15.521684 13.312 22.959158 19.86021z" fill="#85C3DE" ></path><path d="M326.063158 282.947368c0 34.250105-13.231158 44.463158-29.642105 44.463158s-29.642105-10.213053-29.642106-44.463158c0-34.223158 13.231158-44.463158 29.642106-44.463157s29.642105 10.24 29.642105 44.463157zM269.473684 430.295579v311.646316L190.275368 916.210526h59.203369L323.368421 753.637053V377.263158h-26.947368c-119.403789 0-172.732632-53.382737-185.505685-107.789474h35.624421c51.092211 0 68.581053-15.764211 120.535579-62.544842 12.773053-11.506526 28.079158-25.276632 47.023158-41.741474l18.351158-15.952842-69.658947-99.139368-44.085895 30.989474 41.768421 59.472842c-11.183158 9.862737-20.884211 18.593684-29.480421 26.327579C180.736 212.156632 176.235789 215.578947 146.539789 215.578947H53.894737v26.947369c0 88.710737 66.910316 178.149053 215.578947 187.769263z m216.710737-161.414737c2.290526 71.733895 28.698947 136.326737 75.048421 182.918737C618.711579 509.628632 702.437053 538.947368 810.091789 538.947368c18.593684 0 36.190316-1.158737 52.628211-3.449263 3.745684 111.265684 33.630316 170.334316 51.496421 196.015158l-38.507789 84.722526C782.174316 742.049684 688.774737 700.631579 377.263158 700.631579v53.894737c34.277053 0 65.697684 0.512 94.639158 1.509052L374.595368 970.105263h59.203369l96.013474-211.240421c66.182737 4.338526 117.005474 11.829895 157.911578 22.016L626.229895 916.210526h59.176421l54.16421-119.134315c47.616 18.405053 79.737263 42.091789 113.125053 69.739789L805.753263 970.105263h59.203369l113.071157-248.778105-13.824-13.204211c-0.485053-0.458105-45.648842-47.589053-47.939368-185.263158C985.168842 498.553263 1024 447.811368 1024 377.263158c0-95.205053-66.506105-161.684211-161.684211-161.684211v53.894737c65.482105 0 107.789474 42.307368 107.789474 107.789474 0 89.088-87.013053 107.789474-160.013474 107.789474-92.752842 0-163.624421-23.983158-210.647578-71.27579-30.315789-30.504421-45.891368-65.832421-53.35579-98.735158 11.210105 6.952421 22.932211 13.338947 35.274105 19.186527l23.04-48.720843c-92.106105-43.654737-148.992-128.646737-219.243789-243.981473l-46.026105 28.05221c49.448421 81.246316 92.968421 148.506947 147.051789 199.302737z" fill="#231F20" ></path></symbol><symbol id="icon-goat" viewBox="0 0 1024 1024"><path d="M548.378947 646.736842a952.32 952.32 0 0 1 140.90779-161.68421H107.789474c0 107.600842 0 107.600842-63.649685 169.283368l-13.069473 12.665263L66.721684 754.526316h417.172211c20.345263-41.472 43.654737-77.446737 64.485052-107.789474z" fill="#F7C768" ></path><path d="M608.256 144.734316C555.762526 115.577263 506.098526 107.789474 485.052632 107.789474V53.894737c32.579368 0 91.270737 11.452632 149.369263 43.735579 75.290947 41.822316 130.694737 94.531368 171.385263 150.878316C755.873684 288.013474 697.101474 323.368421 646.736842 323.368421h-107.789474v-53.894737h107.789474c20.506947 0 48.424421-11.210105 80.437895-31.285895a471.04 471.04 0 0 0-118.918737-93.453473zM832.673684 342.231579c-16.384 0-29.642105 10.24-29.642105 44.463158 0 34.250105 13.231158 44.463158 29.642105 44.463158s29.642105-10.213053 29.642105-44.463158c0-34.223158-13.231158-44.463158-29.642105-44.463158zM1024 619.789474C1024 347.109053 901.066105 122.448842 686.753684 3.395368l-26.165895 47.104C914.324211 191.461053 964.688842 440.400842 969.647158 592.842105h-84.506947c-17.92-35.624421-45.352421-69.12-87.013053-101.995789l-16.788211-13.285053-16.734315 13.392842c-66.128842 52.897684-134.629053 127.083789-187.311158 209.677474H102.965895l-8.272842-20.318316C159.043368 617.013895 161.684211 603.109053 161.684211 485.052632v-53.894737h485.052631v-53.894737H161.684211c0-80.384 14.309053-110.026105 66.586947-137.916632l-25.384421-47.535158C123.365053 234.226526 107.789474 291.920842 107.789474 377.263158v107.789474c0 107.600842 0 107.600842-63.649685 169.283368l-13.069473 12.665263L110.618947 862.315789h58.206316l-43.897263-107.789473h103.477895l43.897263 107.789473h58.206316l-43.897263-107.789473h259.47621C508.981895 824.939789 485.052632 899.152842 485.052632 970.105263h53.894736c0-68.688842 27.270737-144.060632 68.958316-215.578947H687.157895c7.410526 0 13.473684 6.063158 13.473684 13.473684V862.315789h53.894737v-94.315789c0-37.160421-30.208-67.368421-67.368421-67.368421h-44.65179c40.771368-58.017684 89.438316-111.427368 138.913684-153.626947C841.512421 600.037053 862.315789 655.225263 862.315789 754.526316h53.894737c0-38.912-2.748632-74.482526-11.102315-107.789474H1024v-26.947368z" fill="#231F20" ></path></symbol><symbol id="icon-goat_wei" viewBox="0 0 1024 1024"><path d="M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z" fill="#D6B196" ></path><path d="M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-431.157895 50.202947c52.304842 70.925474 136.973474 152.144842 232.528843 190.383158l19.994947-50.041263c-109.271579-43.708632-202.805895-152.629895-238.780632-217.49221H808.421053v-53.894737H538.947368v-53.894737h215.578948v-53.894737h-215.578948V161.684211h-53.894736v161.68421h-215.578948v53.894737h215.578948v53.894737H215.578947v53.894737h255.757474c-35.974737 64.862316-129.536 173.783579-238.807579 217.49221l20.021895 50.041263c95.528421-38.238316 180.197053-119.484632 232.501895-190.383158V808.421053h53.894736v-246.218106z" fill="#231F20" ></path></symbol><symbol id="icon-dragon" viewBox="0 0 1024 1024"><path d="M366.376421 344.441263l152.980211-152.98021c43.142737-43.142737 141.204211-9.216 270.201263 115.738947-15.225263 9.835789-25.114947 15.818105-44.13979 32.256s-38.076632 35.489684-59.418947 56.832c-4.203789 4.203789-51.173053 53.221053-78.740211 82.027789-10.805895-12.126316-22.743579-24.171789-34.654315-36.082526L493.136842 362.792421l-54.218105 54.218105-72.542316-72.569263zM862.315789 512c0 46.834526-45.352421 80.842105-107.789473 80.842105-108.948211 0-189.359158-28.806737-267.129263-56.697263C414.100211 509.871158 344.872421 485.052632 258.182737 485.052632 80.788211 485.052632 0 588.126316 0 683.897263h53.894737C73.216 659.779368 135.302737 646.736842 177.340632 646.736842c77.338947 0 223.124211 23.282526 291.893894 47.912421C547.462737 722.701474 615.989895 754.526316 734.315789 754.526316 862.315789 754.526316 916.210526 670.315789 916.210526 512h-53.894737z" fill="#FF8787" ></path><path d="M552.421053 1024c-69.766737 0-113.825684-13.958737-156.402527-27.459368-54.487579-17.273263-110.807579-35.004632-232.421052-26.516211l-3.826527-53.733053c131.718737-9.458526 195.934316 10.967579 252.52379 28.887579 42.226526 13.365895 78.686316 24.926316 140.126316 24.926316 92.752842 0 148.210526-57.936842 148.210526-113.960421 0-16.949895-5.524211-101.618526-114.634105-101.618526-64.970105 0-112.747789 23.336421-163.328 48.02021C365.325474 830.571789 300.301474 862.315789 204.288 862.315789 85.908211 862.315789 0 787.294316 0 683.897263 0 588.126316 80.788211 485.052632 258.182737 485.052632c86.689684 0 155.917474 24.818526 229.214316 51.09221 45.810526 16.410947 92.564211 33.172211 145.488842 44.166737 9.000421-7.033263 13.850947-16.276211 13.850947-26.758737 0-37.187368-37.672421-74.859789-74.13221-111.265684l-3.287579-3.287579 38.103579-38.103579 3.260631 3.287579C652.853895 446.275368 700.631579 494.026105 700.631579 553.552842c0 12.719158-2.802526 24.926316-7.976421 36.109474A594.997895 594.997895 0 0 0 754.526316 592.842105c62.437053 0 107.789474-34.007579 107.789473-80.842105 0-58.853053-52.870737-110.268632-108.840421-164.702316l-8.057263-7.841684c-19.024842 16.437895-38.076632 35.489684-59.418947 56.832l-38.103579-38.103579c74.805895-74.832842 134.898526-134.898526 268.314947-141.931789V55.619368c-63.407158 7.787789-120.993684 39.424-121.667368 39.801264l-15.818105 8.811789-14.120421-11.344842C731.701895 66.452211 709.712842 53.894737 673.684211 53.894737c-41.418105 0-74.347789 25.869474-109.190737 53.301895-26.624 20.911158-54.137263 42.549895-86.851369 53.194105L469.342316 161.684211h-69.093053l-105.525895 105.525894-38.103579-38.130526L324.015158 161.684211H161.684211V107.789474h303.104c22.231579-8.272842 43.708632-25.168842 66.398315-42.981053C569.829053 34.438737 613.618526 0 673.684211 0c48.909474 0 81.408 17.946947 110.888421 40.097684C813.702737 26.300632 877.729684 0 943.157895 0h26.947368v323.368421h-53.894737v-53.167158c-54.164211 3.098947-92.914526 15.845053-127.002947 36.675369l1.832421 1.778526C852.587789 368.505263 916.210526 430.376421 916.210526 512c0 60.928-43.708632 109.945263-107.789473 127.622737V700.631579h53.894736v-53.894737h53.894737v53.894737h53.894737v53.894737h-53.894737v53.894737h-53.894737v-53.894737h-53.894736c-29.722947 0-53.894737-24.171789-53.894737-53.894737v-53.894737c-118.325895 0-207.063579-31.797895-285.318737-59.877053C400.437895 562.229895 335.494737 538.947368 258.182737 538.947368 117.059368 538.947368 53.894737 611.732211 53.894737 683.897263 53.894737 757.221053 115.738947 808.421053 204.288 808.421053c11.910737 0 23.228632-0.538947 34.034526-1.536C248.454737 796.321684 269.473684 770.640842 269.473684 739.166316c0-33.118316-43.088842-70.979368-58.152421-81.596632l30.935579-44.139789c8.299789 5.793684 81.111579 58.664421 81.111579 125.736421 0 19.429053-4.527158 37.052632-10.994526 52.304842 30.773895-10.051368 58.314105-23.498105 86.662737-37.349053C452.877474 727.848421 508.577684 700.631579 585.997474 700.631579 702.410105 700.631579 754.526316 778.725053 754.526316 856.144842 754.526316 938.657684 678.912 1024 552.421053 1024z m-21.180632-623.104L493.136842 362.792421l137.889684-137.889684 38.103579 38.103579-137.889684 137.889684z m-126.760421-18.351158l-38.103579-38.103579 152.980211-152.98021 38.103579 38.103579-152.980211 152.98021z m282.004211-218.624c15.494737-9.754947 43.331368-31.447579 43.331368-31.447579-25.734737-27.809684-49.556211-33.333895-67.368421-29.07621-19.240421 4.608-37.753263 24.602947-37.753263 24.602947s42.253474 22.447158 61.790316 35.920842z" fill="#231F20" ></path></symbol><symbol id="icon-horse" viewBox="0 0 1024 1024"><path d="M776.003368 646.736842c16.599579-99.947789 43.439158-181.086316 83.213474-256.538947l6.817684-12.934737H269.473684c-36.756211 0-53.894737 54.945684-53.894737 92.05221 0 46.753684 6.656 77.527579 70.278737 176.074106l84.533895 128.269473L498.876632 646.736842h277.126736z" fill="#FFAF6E" ></path><path d="M1024 0v404.210526c0 33.333895 0 134.736842-92.079158 134.736842h-13.824l-78.362947-109.056c-22.743579 49.906526-40.340211 103.046737-53.490527 162.950737h115.092211C937.310316 592.842105 970.105263 625.637053 970.105263 661.638737c0 60.631579-69.389474 154.300632-77.312 164.75621l-43.008-32.471579C875.466105 759.861895 916.210526 693.813895 916.210526 661.638737c0-5.982316-8.919579-14.901895-14.901894-14.901895h-125.332211C761.128421 736.121263 754.526316 840.569263 754.526316 970.105263h-53.894737c0-283.971368 31.097263-453.605053 110.888421-605.049263l20.318316-38.534737 112.801684 156.995369c14.443789-4.419368 25.465263-20.938105 25.465263-79.306106V0h53.894737z m-161.684211 161.684211h53.894737V0h-53.894737v80.842105c-17.381053-14.955789-38.184421-26.947368-80.842105-26.947368h-134.736842v53.894737h134.736842c37.672421 0 80.842105 40.906105 80.842105 53.894737z m-107.789473 0h-215.578948v53.894736h161.684211l53.894737-53.894736zM300.894316 766.544842L400.680421 916.210526h64.754526l-95.043368-142.551579L498.876632 646.736842h167.855157a1212.631579 1212.631579 0 0 1 9.431579-53.894737h-199.383579l-175.885473 173.702737z m109.97221-184.400842l-37.861052-38.319158-132.419369 130.802526C173.729684 571.095579 161.684211 529.812211 161.684211 469.315368 161.684211 398.578526 199.464421 323.368421 269.473684 323.368421h323.368421l53.894737-53.894737H269.473684c-6.709895 0-13.258105 0.565895-19.698526 1.482105C234.927158 249.451789 204.638316 215.578947 160.633263 215.578947 65.967158 215.578947 0 349.291789 0 469.315368c0 70.170947 16.141474 136.650105 49.232842 202.671158L6.197895 723.833263l41.472 34.41179 66.128842-79.737264-8.704-16.033684C83.105684 622.133895 53.894737 558.214737 53.894737 469.315368 53.894737 368.451368 106.765474 269.473684 160.633263 269.473684c13.231158 0 25.815579 9.889684 35.43579 20.533895C142.874947 321.967158 107.789474 388.500211 107.789474 469.315368c0 78.201263 19.698526 130.937263 93.642105 243.981474l-55.296 54.622316L280.899368 970.105263h64.754527l-130.048-195.072 195.260631-192.889263z" fill="#231F20" ></path></symbol><symbol id="icon-monkey_shen" viewBox="0 0 1024 1024"><path d="M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z" fill="#BBC4C9" ></path><path d="M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-431.157895 134.736842h161.684211v53.894737h53.894737V269.473684h-215.578948V161.684211h-53.894736v107.789473h-215.578948v431.157895h53.894737v-53.894737h161.684211v215.578947h53.894736v-215.578947z m0-161.68421h161.684211v107.789473h-161.684211v-107.789473z m-215.578947 0h161.684211v107.789473h-161.684211v-107.789473z m215.578947-161.684211h161.684211v107.789474h-161.684211v-107.789474z m-215.578947 0h161.684211v107.789474h-161.684211v-107.789474z" fill="#231F20" ></path></symbol><symbol id="icon-ox_chou" viewBox="0 0 1024 1024"><path d="M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z" fill="#D6B196" ></path><path d="M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-161.68421 188.631579h-159.555369c13.985684-172.813474 43.115789-357.429895 70.817684-385.158737L700.631579 269.473684H323.368421v53.894737h107.169684c-1.940211 45.756632-8.192 103.962947-15.76421 161.684211H323.368421v53.894736h83.968c-9.862737 68.446316-20.264421 130.128842-25.734737 161.684211H215.578947v53.894737h592.842106v-53.894737z m-346.543158-161.684211h149.800421a3313.717895 3313.717895 0 0 0-16.842105 161.684211h-158.477474c6.036211-35.247158 16.114526-95.636211 25.519158-161.684211z m22.608842-215.578947h171.735579c-15.198316 41.121684-27.405474 100.594526-36.890948 161.684211h-150.123789c7.383579-57.505684 13.419789-115.361684 15.279158-161.684211z" fill="#231F20" ></path></symbol><symbol id="icon-monkey" viewBox="0 0 1024 1024"><path d="M757.733053 485.052632H565.894737a80.842105 80.842105 0 0 0-80.842105 80.842105v215.578947c0 40.96 43.546947 99.678316 77.446736 139.210105C596.426105 960.215579 603.055158 970.105263 603.055158 970.105263H754.526316s15.144421-18.674526 45.891368-58.071579S862.315789 809.984 862.315789 717.608421c0-89.573053-47.993263-166.346105-104.582736-232.555789z" fill="#C3D686" ></path><path d="M538.947368 1024h-53.894736c0-32.794947 25.869474-87.417263 77.446736-103.316211C528.599579 881.152 485.052632 822.433684 485.052632 781.473684c0-44.570947 36.271158-80.842105 80.842105-80.842105h80.842105v53.894737h-80.842105a26.947368 26.947368 0 0 0-26.947369 26.947368c0 19.725474 36.675368 77.473684 92.133053 134.736842h88.602947c20.210526-14.147368 88.737684-71.464421 88.737685-198.602105 0-108.382316-93.237895-202.967579-168.151579-278.986105-49.502316-50.202947-88.576-89.842526-98.735158-128.61979-11.749053-44.732632-21.584842-112.586105-26.327579-148.318315H377.263158c-45.136842 0-89.519158 8.434526-121.802105 53.894736H431.157895v53.894737c-97.28 0-107.789474 113.071158-107.789474 161.684211v53.894737h53.894737v161.68421h-53.894737v-107.789474h-26.947368c-170.253474 0-188.631579-94.234947-188.631579-134.736842 0-31.043368 35.220211-72.326737 55.727158-93.722947 2.694737-14.686316 5.847579-28.348632 9.431579-41.013895H161.684211V215.578947h31.528421C239.642947 120.993684 317.224421 107.789474 377.263158 107.789474h185.640421l2.802526 23.794526c0.134737 1.050947 12.719158 106.657684 27.944421 164.756211 6.494316 24.872421 44.624842 63.514947 84.965053 104.448C760.481684 483.813053 862.315789 587.129263 862.315789 717.608421c0 92.375579-31.124211 155.028211-61.898105 194.425263C904.919579 892.146526 970.105263 803.004632 970.105263 673.684211c0-91.405474-42.819368-154.381474-84.237474-215.255579C847.791158 402.458947 808.421053 344.576 808.421053 269.473684c0-119.349895 87.093895-161.684211 161.68421-161.68421v53.894737c-32.417684 0-107.789474 10.509474-107.789474 107.789473 0 58.502737 31.555368 104.933053 68.096 158.639158C974.282105 492.597895 1024 565.679158 1024 673.684211c0 177.286737-108.301474 296.421053-269.473684 296.421052h-161.684211c-37.672421 0-53.894737 40.906105-53.894737 53.894737zM229.214316 269.473684a384.808421 384.808421 0 0 0-14.012632 58.341053l-1.401263 8.488421-6.090105 6.117053c-22.878316 22.932211-44.813474 52.601263-46.026105 62.275368 0 56.805053 53.76 75.264 107.789473 79.386947V431.157895c0-58.691368 13.473684-119.619368 46.511158-161.684211h-86.770526zM323.368421 1024h-53.894737c0-32.794947 25.869474-87.417263 77.446737-103.316211C313.020632 881.152 269.473684 822.433684 269.473684 781.473684c0-44.570947 36.271158-80.842105 80.842105-80.842105h45.16379A188.847158 188.847158 0 0 1 565.894737 592.842105h134.736842v53.894737h-134.736842c-74.293895 0-134.736842 60.442947-134.736842 134.736842v26.516211l-53.894737 0.377263V781.473684c0-9.162105 0.646737-18.135579 1.913263-26.947368H350.315789c-14.848 0-26.947368 12.072421-26.947368 26.947368 0 19.725474 36.675368 77.473684 92.133053 134.736842H431.157895v53.894737h-53.894737c-37.672421 0-53.894737 40.906105-53.894737 53.894737z" fill="#231F20" ></path></symbol><symbol id="icon-horse_wu" viewBox="0 0 1024 1024"><path d="M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z" fill="#FF8787" ></path><path d="M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-431.157895 26.947368h269.473685v-53.894736H538.947368v-161.684211h161.684211v-53.894737H411.001263c12.045474-33.28 20.156632-69.793684 20.156632-107.789473h-53.894737c0 121.963789-105.364211 233.391158-106.415158 234.496l38.858105 37.349052c2.883368-3.018105 43.816421-46.133895 77.392842-110.160842H485.052632v161.684211H215.578947v53.894736h269.473685v323.368421h53.894736V538.947368z" fill="#231F20" ></path></symbol><symbol id="icon-ox" viewBox="0 0 1025 1024"><path d="M540.294737 754.526316h215.578947c20.210526 0 35.112421 1.374316 53.894737 4.581052 91.863579 15.656421 145.354105 67.691789 161.684211 86.069895V916.210526h53.894736V635.580632l-7.895579-7.895579c-9.269895-9.269895-36.513684-49.232842-44.032-196.527158H540.294737a161.684211 161.684211 0 0 0-161.684211 161.68421v131.098948c43.304421 20.210526 97.28 30.585263 161.684211 30.585263z" fill="#FFAF6E" ></path><path d="M1025.347368 635.580632V916.210526h-53.894736v-71.033263c-16.330105-18.405053-69.820632-70.413474-161.684211-86.069895V916.210526h-53.894737v-161.68421h-107.789473v215.578947h-53.894737V700.631579h161.68421c100.998737 0 172.570947 38.669474 215.578948 71.868632v-115.738948c-33.684211-43.627789-51.712-137.458526-53.706106-279.498105H701.978947c-76.934737 0-127.218526-26.219789-175.804631-51.550316a1556.048842 1556.048842 0 0 0-26.839579-13.743158c-26.839579 26.004211-66.209684 44.921263-115.738948 55.511579 24.441263 22.986105 60.874105 52.116211 106.469053 72.838737l-22.312421 49.044211c-76.584421-34.816-129.589895-88.926316-150.824421-113.125053-10.644211 0.619789-21.477053 1.024-32.687158 1.024a473.734737 473.734737 0 0 1-123.365053-15.952842l-93.022315 186.314105 68.581052 53.86779C167.882105 579.557053 237.891368 538.947368 324.715789 538.947368v53.894737c-95.986526 0-170.361263 62.490947-171.088842 63.137684l-16.78821 14.282106-136.838737-107.358316 109.729684-219.809684C46.430316 314.448842 1.347368 267.371789 1.347368 199.868632 1.347368 89.815579 121.586526 53.894737 163.031579 53.894737v53.894737c-14.120421 0-107.789474 17.165474-107.789474 92.079158C55.242105 290.465684 192.188632 323.368421 284.240842 323.368421c67.907368 0 122.421895-12.988632 157.696-35.624421-42.711579-14.336-95.097263-23.120842-169.337263-18.324211l-3.503158-53.786947c95.878737-6.117053 160.148211 8.515368 211.429053 28.833684C484.244211 235.439158 486.4 225.818947 486.4 215.578947c0-48.855579-57.829053-76.288-58.394947-76.557473l22.393263-49.017263C454.063158 91.648 540.294737 131.826526 540.294737 215.578947c0 18.566737-3.422316 35.84-9.997474 51.631158 7.060211 3.584 13.985684 7.168 20.776421 10.698106C597.854316 302.322526 638.248421 323.368421 701.978947 323.368421h269.473685v26.947368c0 214.689684 35.220211 266.590316 45.999157 277.369264l7.895579 7.895579z m-729.384421 25.141894l-98.789052 118.541474 86.797473 137.835789 45.594948-28.725894-65.913263-104.690527 37.052631-44.43621C358.642526 785.192421 439.080421 808.421053 540.294737 808.421053v-53.894737c-99.893895 0-175.077053-24.549053-223.474526-72.946527l-20.857264-20.857263z" fill="#231F20" ></path></symbol><symbol id="icon-rabbit_mao" viewBox="0 0 1024 1024"><path d="M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z" fill="#7DD47F" ></path><path d="M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-377.263158-188.631579h107.789474v323.368421c-20.48 0-39.936-11.264-40.016842-11.317895l-27.728842 46.214737c3.206737 1.940211 32.660211 18.997895 67.745684 18.997895 30.746947 0 53.894737-23.147789 53.894737-53.894737V269.473684h-215.578948v538.947369h53.894737V323.368421z m-107.789473 242.526316v-242.526316h-53.894737v196.904421l-107.789474 40.421053v-243.927579l169.094737-48.316632-14.821053-51.819789L269.473684 276.102737v304.801684l-36.405895 13.662316 18.917053 50.472421 178.741895-67.018105c-5.039158 69.928421-55.269053 106.981053-165.133474 122.933894l7.733895 53.328842C325.712842 746.657684 485.052632 723.536842 485.052632 565.894737z" fill="#231F20" ></path></symbol><symbol id="icon-rabbit" viewBox="0 0 1024 1024"><path d="M680.96 488.744421a1666.667789 1666.667789 0 0 0-54.433684-23.95621c-16.006737 12.234105-33.899789 20.264421-60.631579 20.264421h-80.842105c-36.810105 0-83.644632 30.396632-104.394106 67.772631-42.819368 77.123368-53.409684 117.813895-11.021473 201.701053C397.096421 808.879158 431.157895 876.409263 431.157895 970.105263h338.539789l68.338527-138.859789c20.129684-40.96 24.252632-73.701053 24.252631-110.349474 0.026947-57.397895-25.061053-159.717053-181.328842-232.151579z" fill="#FFBDD8" ></path><path d="M862.315789 720.896c0 36.621474-4.122947 69.389474-24.252631 110.349474L769.697684 970.105263H485.052632v-53.894737h48.370526C507.877053 880.074105 485.052632 833.509053 485.052632 781.473684c0-59.418947 24.171789-113.313684 63.218526-152.360421l38.103579 38.103579A161.091368 161.091368 0 0 0 538.947368 781.473684c0 54.784 35.381895 104.043789 63.514948 134.736842h133.712842l53.490526-108.759579c15.710316-31.851789 18.755368-55.834947 18.755369-86.554947 0-80.976842-63.434105-150.096842-178.607158-195.503158-17.542737 8.138105-38.292211 13.554526-63.919158 13.554526h-80.842105c-13.958737 0-43.924211 15.979789-57.290106 40.016843l-47.104-26.165895C401.408 515.449263 448.242526 485.052632 485.052632 485.052632h80.842105c37.268211 0 57.478737-15.440842 79.090526-36.45979C625.367579 336.195368 549.753263 269.473684 485.052632 269.473684h-107.789474a21.288421 21.288421 0 0 0-5.955369 2.021053A683.762526 683.762526 0 0 0 302.187789 194.021053c-35.84-34.223158-61.763368-58.933895-94.908631-79.440842A42.442105 42.442105 0 0 0 185.478737 107.789474a22.824421 22.824421 0 0 0-17.381053 7.194947c-10.913684 11.425684-6.063158 28.240842 1.428211 39.181474 21.989053 32.121263 47.912421 56.858947 83.752421 91.109052 20.614737 19.671579 49.259789 43.169684 77.392842 63.08379C281.007158 367.400421 215.578947 484.432842 215.578947 592.842105c0 74.482526 24.791579 124.065684 51.065264 176.586106C294.534737 825.209263 323.368421 882.903579 323.368421 970.105263h-53.894737c0-74.482526-24.791579-124.065684-51.065263-176.586105C190.517895 737.738105 161.684211 680.043789 161.684211 592.842105c0-90.866526 42.226526-197.685895 93.453473-274.485894a803.759158 803.759158 0 0 1-39.046737-34.115369C177.852632 247.754105 150.231579 221.399579 125.035789 184.616421c-24.441263-35.759158-22.797474-78.686316 4.069053-106.819368 26.300632-27.567158 70.898526-31.043368 106.522947-9.000421 37.941895 23.444211 65.562947 49.798737 103.774316 86.258526 9.970526 9.512421 33.037474 32.309895 56.93979 60.550737h68.634947c-27.621053-37.780211-60.416-72.730947-88.522105-99.543579-28.833684-27.540211-54.730105-52.116211-84.533895-74.024421L326.305684 0.296421c31.232 23.228632 57.802105 48.532211 87.309474 76.719158 53.840842 51.388632 94.450526 100.594526 121.74821 146.83621 82.836211 26.650947 150.042947 116.870737 165.025685 230.750316l1.724631 13.177263-9.404631 9.404632c-3.772632 3.772632-7.706947 7.653053-11.802948 11.587368C837.227789 561.178947 862.315789 663.498105 862.315789 720.896zM309.463579 754.526316c3.934316 8.057263 7.895579 16.087579 11.991579 24.144842C348.887579 832.970105 377.263158 889.128421 377.263158 970.105263h53.894737c0-93.696-34.061474-161.226105-61.520842-215.578947h-60.173474z m597.90821 53.894737c-3.422316 9.404632-7.814737 19.806316-13.770105 31.959579L829.790316 970.105263h60.065684l52.143158-105.957052c10.778947-21.935158 17.515789-40.016842 21.90821-55.727158h-56.535579zM514.694737 390.736842c0-34.223158-13.231158-44.463158-29.642105-44.463158s-29.642105 10.24-29.642106 44.463158c0 34.250105 13.231158 44.463158 29.642106 44.463158s29.642105-10.213053 29.642105-44.463158z" fill="#231F20" ></path></symbol><symbol id="icon-rat_zi" viewBox="0 0 1024 1024"><path d="M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z" fill="#85C3DE" ></path><path d="M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-431.157895 188.631579v-215.578947h269.473685v-53.894737H538.947368v-39.585684c26.543158-18.081684 94.585263-65.050947 177.852632-127.488L700.631579 215.578947H323.368421v53.894737h295.316211a4221.008842 4221.008842 0 0 1-121.640421 85.369263l-11.991579 8.003369V431.157895H242.526316v53.894737h242.526316v215.578947c0 48.343579-13.850947 53.894737-134.736843 53.894737v53.894737c105.391158 0 188.631579 0 188.631579-107.789474z" fill="#231F20" ></path></symbol><symbol id="icon-rat" viewBox="0 0 1024 1024"><path d="M727.659789 431.157895c-132.581053 0-220.348632 47.454316-285.803789 154.354526-19.779368 32.309895-15.845053 76.503579-9.404632 96.579368 3.260632 10.159158 7.760842 18.647579 12.422737 25.546106C464.761263 737.010526 499.927579 754.526316 538.947368 754.526316h66.829474c1.158737 17.893053-1.967158 34.762105-15.144421 53.975579-12.692211 18.539789-37.807158 40.151579-56.32 54.810947 25.249684-0.673684 52.709053-0.997053 83.240421-0.997053C877.487158 862.315789 970.105263 711.922526 970.105263 571.176421 936.421053 512 882.364632 431.157895 727.659789 431.157895z" fill="#85C3DE" ></path><path d="M210.432 1012.897684l-43.573895-31.690105c106.954105-147.051789 185.317053-171.196632 423.828211-172.705684 21.396211-31.258947 16.249263-56.266105 9.377684-89.70779-3.557053-17.138526-7.221895-34.842947-7.221895-54.433684 0-68.958316 25.330526-104.636632 63.407158-136.973474l34.896842 41.040842c-29.453474 25.061053-44.409263 46.780632-44.409263 95.932632 0 14.093474 2.937263 28.402526 6.063158 43.546947 5.901474 28.510316 12.8 62.032842-1.131789 99.462737 166.373053-10.24 264.542316-96.902737 264.542315-236.193684C916.210526 418.330947 827.580632 323.368421 684.921263 323.368421c-83.644632 0-153.303579 29.696-174.187789 39.612632a224.875789 224.875789 0 0 1-20.533895 31.339789l-41.741474-34.115368 20.884211 17.057684-20.911158-16.976842C448.781474 359.828211 485.052632 314.287158 485.052632 262.736842c0-34.816-8.946526-60.766316-26.570106-77.069474-17.515789-16.249263-44.786526-24.602947-81.219368-24.953263V323.368421h-53.894737V109.783579l24.872421-1.913263c64.700632-4.931368 114.095158 7.895579 146.863158 38.238316C524.207158 173.056 538.947368 212.291368 538.947368 262.736842c0 11.102316-1.131789 21.908211-3.072 32.202105 37.268211-12.584421 89.842526-25.465263 149.045895-25.465263C858.165895 269.473684 970.105263 387.907368 970.105263 571.176421 970.105263 711.922526 877.487158 862.315789 617.552842 862.315789c-258.667789 0-311.942737 19.698526-407.120842 150.581895z m19.105684-256.835368c-12.045474 0-24.387368-0.565895-37.025684-1.64379l-22.096842-1.859368-2.425263-22.016C167.747368 728.144842 161.684211 672.444632 161.684211 631.026526c0-103.585684 21.450105-178.903579 53.894736-259.045052V107.789474h53.894737v274.782315l-2.021052 4.904422C235.439158 465.758316 215.578947 533.800421 215.578947 631.026526c0 22.878316 2.101895 51.442526 3.826527 70.979369 99.678316 2.802526 172.813474-35.408842 222.450526-116.493474l48.020211 24.090947c-11.237053 28.133053-11.371789 51.577263-0.377264 67.853474 9.701053 14.282105 28.645053 23.174737 49.448421 23.174737v53.894737c-39.019789 0-74.186105-17.515789-94.073263-46.888421a100.244211 100.244211 0 0 1-12.422737-25.546106c-53.221053 49.178947-121.128421 73.943579-202.913684 73.970527zM379.957895 525.473684c0-34.223158-13.231158-44.463158-29.642106-44.463158s-29.642105 10.24-29.642105 44.463158c0 34.250105 13.231158 44.463158 29.642105 44.463158s29.642105-10.213053 29.642106-44.463158z" fill="#231F20" ></path></symbol><symbol id="icon-rooster_you" viewBox="0 0 1024 1024"><path d="M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z" fill="#BBC4C9" ></path><path d="M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-215.578947-188.631579h-161.684211v-26.947368h161.684211V242.526316H269.473684v53.894737h161.684211v26.947368h-161.684211v485.052632h53.894737v-53.894737h377.263158v53.894737h53.894737V323.368421zM323.368421 646.736842h377.263158v53.894737H323.368421v-53.894737z m0-269.473684h107.789474c0 103.316211-72.784842 107.654737-81.084632 107.789474L350.315789 538.947368c46.592 0 134.736842-33.792 134.736843-161.68421h53.894736v107.789474c0 29.722947 24.171789 53.894737 53.894737 53.894736h107.789474v53.894737H323.368421v-215.578947z m377.263158 0v107.789474h-107.789474v-107.789474h107.789474z m-215.578947-80.842105h53.894736v26.947368h-53.894736v-26.947368z" fill="#231F20" ></path></symbol><symbol id="icon-rooster" viewBox="0 0 1024 1024"><path d="M891.688421 506.421895C877.244632 455.033263 862.315789 401.893053 862.315789 323.368421V116.224l-323.368421 195.745684V323.368421c0 78.524632 14.928842 131.664842 29.372632 183.053474 12.611368 44.894316 24.522105 87.282526 24.522105 140.314947 0 101.618526-77.931789 176.693895-168.286316 203.991579l5.416422 11.587368h215.578947c24.333474 0 43.385263-0.242526 58.556631-2.128842C811.52 846.821053 916.210526 764.550737 916.210526 646.736842c0-53.032421-11.910737-95.420632-24.522105-140.314947z" fill="#FF8787" ></path><path d="M673.684211 354.357895c-16.384 0-29.642105-10.213053-29.642106-44.463158 0-34.223158 13.231158-44.463158 29.642106-44.463158s29.642105 10.24 29.642105 44.463158c0 34.250105-13.258105 44.463158-29.642105 44.463158zM540.106105 970.105263l-50.58021-107.789474h156.05221l50.607158 107.789474h59.553684l-51.60421-109.918316C811.52 846.821053 916.210526 764.550737 916.210526 646.736842c0-53.032421-11.910737-95.420632-24.522105-140.314947C877.244632 455.033263 862.315789 401.893053 862.315789 323.368421V107.789474c0-59.445895-48.343579-107.789474-107.789473-107.789474a107.924211 107.924211 0 0 0-107.789474 106.172632 100.890947 100.890947 0 0 0-24.117895-3.314527 88.710737 88.710737 0 0 0-88.602947 88.602948c0 20.668632 5.227789 39.720421 10.671158 53.921684l-99.489684 59.688421 93.749894 14.470737V377.263158c0 14.416842-5.901474 21.692632-33.360842 49.152l-11.129263 11.129263C398.228211 326.521263 324.985263 269.473684 215.740632 269.473684 96.768 269.473684 0 366.241684 0 485.214316V646.736842h53.894737v-161.522526A162.007579 162.007579 0 0 1 215.740632 323.368421c82.081684 0 140.422737 36.244211 240.64 152.252632l-38.615579 38.615579C367.804632 461.285053 323.098947 431.157895 259.584 431.157895A151.983158 151.983158 0 0 0 107.789474 582.952421V754.526316h53.894737v-171.573895A98.007579 98.007579 0 0 1 259.584 485.052632c46.322526 0 79.629474 20.911158 137.027368 86.016l18.970948 21.530947 128.080842-128.080842C572.200421 435.981474 592.842105 415.366737 592.842105 377.263158v-97.926737l23.309474-14.120421-13.662316-23.04c-0.161684-0.242526-14.578526-24.899368-14.578526-50.688 0-19.132632 15.575579-34.708211 34.70821-34.708211 5.093053 0 26.785684 3.179789 39.558737 18.647579l26.327579 46.026106 39.774316-24.090948-20.372211-49.367579C704.754526 140.449684 700.631579 117.517474 700.631579 107.789474c0-29.722947 24.171789-53.894737 53.894737-53.894737s53.894737 24.171789 53.894737 53.894737v215.578947c0 85.935158 16.680421 145.300211 31.366736 197.632C851.887158 564.008421 862.315789 601.141895 862.315789 646.736842c0 95.285895-99.408842 161.684211-188.631578 161.684211h-209.461895l-68.419369-145.704421C375.242105 618.954105 338.108632 592.842105 296.448 592.842105A80.976842 80.976842 0 0 0 215.578947 673.711158V862.315789h53.894737v-188.604631c0-14.874947 12.099368-26.974316 26.974316-26.974316 20.533895 0 38.965895 14.147368 50.553263 38.858105L480.579368 970.105263h59.526737z" fill="#231F20" ></path></symbol><symbol id="icon-snake_si" viewBox="0 0 1024 1024"><path d="M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z" fill="#FF8787" ></path><path d="M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-242.041263 180.762947l-52.116211-13.797052C657.219368 749.864421 651.425684 754.526316 619.789474 754.526316h-242.526316V485.052632h269.473684v53.894736h53.894737V215.578947H323.368421v538.947369c0 29.722947 24.171789 53.894737 53.894737 53.894737h242.526316c77.689263 0 91.189895-51.065263 108.274526-115.658106zM377.263158 269.473684h269.473684v161.684211H377.263158v-161.684211z" fill="#231F20" ></path></symbol><symbol id="icon-tiger_yin" viewBox="0 0 1024 1024"><path d="M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z" fill="#7DD47F" ></path><path d="M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-257.42821 299.250526l-107.789474-53.894737-24.117895 48.208843 107.789474 53.894736 24.117895-48.208842z m-269.473685-5.658947l-24.117894-48.208842-107.789474 53.894737 24.117895 48.208842 107.789473-53.894737zM700.631579 431.157895h-161.684211v-53.894737h107.789474v-53.894737H377.263158v53.894737h107.789474v53.894737h-161.684211v323.368421h53.894737v-53.894737h269.473684v53.894737h53.894737V431.157895z m-161.684211 161.68421h107.789474v53.894737h-107.789474v-53.894737z m-161.68421 0h107.789474v53.894737h-107.789474v-53.894737z m161.68421-107.789473h107.789474v53.894736h-107.789474v-53.894736z m-161.68421 0h107.789474v53.894736h-107.789474v-53.894736zM754.526316 215.578947h-223.097263l-20.803369-62.410105-51.119158 17.057684L474.624 215.578947H269.473684v107.789474h53.894737v-53.894737h377.263158v53.894737h53.894737V215.578947z" fill="#231F20" ></path></symbol><symbol id="icon-snake" viewBox="0 0 1024 1024"><path d="M107.789474 790.474105c0-72.434526 67.880421-91.513263 121.451789-91.513263 74.401684 0 153.815579 34.438737 237.891369 70.925474 50.580211 21.935158 104.609684 45.325474 162.250105 63.083789-52.412632 44.786526-118.784 74.347789-195.152842 83.078737-143.171368 16.357053-326.440421 7.006316-326.440421-125.574737zM377.263158 215.578947c-15.575579 0-30.288842 3.449263-43.654737 9.377685A250.691368 250.691368 0 0 0 323.368421 296.421053c0 115.550316 76.422737 169.391158 137.83579 212.614736 8.138105 5.712842 16.141474 11.371789 23.848421 17.057685V323.368421a107.789474 107.789474 0 0 0-107.789474-107.789474z" fill="#C3D686" ></path><path d="M671.528421 788.857263c44.328421 11.964632 89.626947 19.563789 136.892632 19.56379 89.168842 0 161.684211-60.442947 161.68421-134.736842s-72.515368-134.736842-161.68421-134.736843c-19.078737 0-37.025684 1.509053-54.218106 4.015158-0.754526-101.402947-38.211368-172.355368-79.413894-219.648L673.684211 323.368421a1749.962105 1749.962105 0 0 1-79.036632-1.751579c45.702737 35.866947 108.705684 107.870316 105.984 232.367158 0 0.431158-0.080842 0.808421-0.10779 1.239579-34.923789 10.994526-66.155789 26.731789-95.097263 45.190737a163.085474 163.085474 0 0 0-15.845052-42.388211c-21.557895-39.639579-60.065684-66.775579-97.360842-93.022316C433.098105 423.343158 377.263158 384 377.263158 296.421053c0-130.290526 108.274526-188.631579 215.578947-188.631579 64.134737 0 132.715789 12.045474 214.366316 37.807158C802.330947 180.250947 780.099368 209.381053 700.631579 214.635789V161.684211h-53.894737v53.679157c-63.272421-1.024-104.528842-5.200842-104.986947-5.254736l-5.578106 53.598315C538.408421 263.949474 592.357053 269.473684 673.684211 269.473684c125.170526 0 188.631579-48.128 188.631578-143.063579V106.981053l-18.432-6.144C747.789474 68.823579 668.025263 53.894737 592.842105 53.894737c-158.666105 0-269.473684 99.732211-269.473684 242.526316 0 115.550316 76.422737 169.391158 137.83579 212.614736 33.684211 23.713684 65.509053 46.106947 81.003789 74.698106 9.539368 17.542737 13.285053 33.414737 12.341895 47.750737 21.153684 9.108211 42.118737 17.839158 62.949052 25.977263C671.151158 620.193684 729.977263 592.842105 808.421053 592.842105c59.445895 0 107.789474 36.271158 107.789473 80.842106s-48.343579 80.842105-107.789473 80.842105c-105.472 0-203.237053-42.388211-297.768421-83.429053-94.800842-41.094737-184.346947-79.952842-281.411369-79.952842C122.718316 591.171368 53.894737 644.715789 53.894737 727.578947c0 79.063579 67.098947 136.434526 159.555368 136.434527 142.174316 0 230.426947-66.883368 306.79579-129.886316 31.420632 13.419789 62.787368 26.058105 94.450526 37.133474-47.077053 49.637053-110.969263 82.566737-186.610526 91.270736l5.066105 53.625264c93.453474-7.006316 143.144421 9.350737 195.718737 26.543157 46.457263 15.225263 94.127158 30.854737 169.822316 30.854737 19.994947 0 41.957053-1.077895 66.344421-3.557052l-5.416421-53.625263c-105.283368 10.778947-158.100211-6.548211-213.935158-24.872422-22.150737-7.275789-44.624842-14.632421-70.305684-20.345263a334.848 334.848 0 0 0 96.14821-82.297263z m-458.078316 21.261474C162.573474 810.118737 107.789474 784.276211 107.789474 727.578947c0-60.847158 62.733474-82.539789 121.451789-82.539789 77.850947 0 154.731789 30.288842 235.250526 64.943158-66.263579 52.924632-139.722105 100.136421-251.041684 100.136421z" fill="#231F20" ></path></symbol><symbol id="icon-tiger" viewBox="0 0 1024 1024"><path d="M431.157895 162.250105V134.736842c0-41.552842-39.289263-80.842105-80.842106-80.842105-28.833684 0-57.128421 4.661895-58.314105 4.850526L269.473684 62.490947v83.887158C144.788211 223.824842 89.222737 346.839579 66.991158 431.157895h266.051368c240.747789 0 415.851789 107.789474 415.85179 269.473684-14.848-25.114947-43.924211-53.894737-88.68379-53.894737-67.988211 0-121.263158 71.033263-121.263158 161.684211 0 66.802526 30.477474 119.888842 60.712421 156.16 12.638316 15.171368 36.055579 37.726316 59.014737 58.88 5.066105 0.107789 9.781895 0.538947 15.009685 0.538947 219.297684 0 350.315789-191.811368 350.315789-377.263158C1024 327.545263 679.855158 172.813474 431.157895 162.250105z" fill="#F7C768" ></path><path d="M673.684211 1024c-114.768842 0-188.820211-33.333895-254.167579-62.787368-53.625263-24.144842-99.974737-45.002105-161.28-45.002106-40.448 0-83.590737 23.255579-103.639579 45.16379l-39.747369-36.432842C142.497684 894.787368 199.168 862.315789 258.236632 862.315789c68.392421 0 119.861895 21.288421 172.921263 45.056V673.684211c0-35.166316-17.542737-64.107789-30.639158-80.815158-15.198316 9.835789-32.067368 18.890105-50.741895 26.947368l-21.342316-49.475368C469.800421 509.413053 485.052632 377.317053 485.052632 323.368421V221.642105A597.827368 597.827368 0 0 0 404.210526 215.578947h-26.947368V134.736842c0-12.099368-14.848-26.947368-26.947369-26.947368-9.377684 0-18.836211 0.592842-26.947368 1.347368V269.473684h-53.894737V211.671579c-136.030316 102.912-158.450526 266.886737-161.306947 295.882105 9.135158 9.108211 38.992842 25.061053 71.976421 38.669474l38.103579-59.365053 12.449684-1.589894C321.212632 473.653895 377.263158 392.192 377.263158 323.368421h53.894737c0 88.333474-68.796632 192.242526-180.870737 213.342316l-48.397474 75.398737-20.291368-7.437474C53.894737 557.756632 53.894737 523.317895 53.894737 512c0-50.041263 37.025684-254.733474 215.578947-365.621895V62.490947l22.528-3.745684C293.187368 58.556632 321.482105 53.894737 350.315789 53.894737c41.552842 0 80.842105 39.289263 80.842106 80.842105v27.513263c248.697263 10.563368 592.842105 165.295158 592.842105 484.486737 0 185.451789-131.018105 377.263158-350.315789 377.263158z m-13.473685-323.368421c-36.513684 0-67.368421 49.367579-67.368421 107.789474 0 85.746526 68.096 145.084632 89.465263 161.549473 91.540211-2.533053 164.378947-45.487158 213.827369-107.654737H700.631579v-53.894736h230.238316c8.919579-17.273263 16.357053-35.354947 22.285473-53.894737h-239.885473l-6.467369-17.650527C706.290526 735.582316 692.439579 700.631579 660.210526 700.631579zM485.052632 931.112421c33.926737 14.066526 70.521263 26.597053 114.607157 33.468632C569.424842 928.309895 538.947368 875.223579 538.947368 808.421053c0-90.650947 53.274947-161.684211 121.263158-161.684211 44.759579 0 73.835789 28.779789 88.68379 53.894737h217.007158c2.775579-17.866105 4.203789-35.920842 4.203789-53.894737 0-38.938947-5.658947-74.752-15.925895-107.627789l-126.706526 126.679579-38.103579-38.103579L932.001684 485.052632a367.939368 367.939368 0 0 0-57.775158-81.596632l-154.543158 154.543158-38.103579-38.103579 153.573053-153.573053a537.869474 537.869474 0 0 0-82.593684-56.751158l-140.665263 140.638316-38.103579-38.103579 128.134737-128.134737A794.731789 794.731789 0 0 0 538.947368 231.046737V323.368421c0 50.149053-11.102316 156.698947-95.932631 236.328421 18.378105 23.417263 42.037895 63.407158 42.037895 113.987369v257.42821zM215.578947 431.157895v-53.894737c39.774316 0 53.894737-29.022316 53.894737-53.894737h53.894737c0 53.571368-37.025684 107.789474-107.789474 107.789474z" fill="#231F20" ></path></symbol><symbol id="icon-boar" viewBox="0 0 1024 1024"><path d="M732.079158 377.263158c-107.789474 0-186.421895 31.393684-281.869474 126.841263L180.331789 773.982316C257.724632 807.909053 348.725895 808.421053 485.052632 808.421053h96.013473c55.834947-34.411789 133.551158-53.894737 227.354948-53.894737h121.344L970.105263 680.555789V572.631579c0-94.315789-130.236632-195.368421-238.026105-195.368421z" fill="#FFBDD8" ></path><path d="M808.421053 700.631579v53.894737c-196.446316 0-323.368421 84.641684-323.368421 215.578947h-53.894737c0-163.705263 148.075789-269.473684 377.263158-269.473684z m-323.368421 107.789474v-53.894737c-158.342737 0-245.598316 0-319.649685-49.367579L158.612211 700.631579H80.842105c-21.692632 0-26.624-14.821053-26.947368-26.947368v-82.620632c84.156632-11.183158 161.684211-74.913684 161.68421-186.853053V215.578947H161.684211v161.684211H134.736842c-66.964211 0-134.736842 37.025684-134.736842 107.789474h53.894737c0-42.630737 52.870737-53.894737 80.842105-53.894737h24.629895C147.132632 504.912842 85.153684 538.947368 26.947368 538.947368H0v134.736843c0 32.498526 21.530947 80.842105 80.842105 80.842105h61.682527c32.687158 20.506947 67.125895 33.145263 105.957052 41.013895A232.879158 232.879158 0 0 0 215.578947 916.210526h53.894737c0-41.930105 14.012632-80.303158 39.424-112.505263C358.885053 808.151579 415.959579 808.421053 485.052632 808.421053z m-72.946527-342.420211L323.368421 554.738526V431.157895h-53.894737v253.682526l180.736-180.736-38.103579-38.103579zM323.368421 161.684211h-53.894737v190.032842a769.536 769.536 0 0 1 53.894737-49.098106V161.684211z m323.368421-53.894737c-72.623158 0-146.809263 23.336421-215.578947 58.637473V107.789474h-53.894737v154.138947C458.832842 205.392842 555.331368 161.684211 646.736842 161.684211c148.587789 0 269.473684 120.885895 269.473684 269.473684v235.654737L809.579789 862.315789h61.359158L970.105263 680.555789V431.157895c0-178.310737-145.057684-323.368421-323.368421-323.368421z" fill="#231F20" ></path></symbol><symbol id="icon-boar_hai" viewBox="0 0 1024 1024"><path d="M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z" fill="#85C3DE" ></path><path d="M309.975579 804.756211l-27.136-46.592c103.073684-60.011789 183.026526-132.473263 241.475368-219.24379H350.315789l-13.473684-50.283789c58.88-33.980632 99.435789-117.571368 118.703158-165.295158H242.526316v-53.894737h538.947368v53.894737h-268.18021c-12.395789 34.088421-42.469053 106.603789-90.435369 161.68421h134.009263a680.555789 680.555789 0 0 0 46.349474-107.708631l51.092211 17.057684c-58.421895 175.265684-171.034947 309.490526-344.333474 410.381474z m192.350316-2.937264L467.806316 760.454737c88.414316-73.728 154.516211-158.773895 202.105263-259.907369l48.801684 22.959158a797.372632 797.372632 0 0 1-82.351158 137.781895c32.741053 15.009684 83.456 44.867368 137.647158 101.591579l-38.938947 37.268211c-57.236211-59.877053-109.325474-85.557895-133.766737-95.178106a850.997895 850.997895 0 0 1-98.977684 96.848842z m48.613052-536.872421l-80.842105-53.894737 29.884632-44.840421 80.842105 53.894737-29.884632 44.840421zM512 53.894737C259.395368 53.894737 53.894737 259.395368 53.894737 512s205.500632 458.105263 458.105263 458.105263c9.081263 0 17.973895-0.835368 26.947368-1.374316v-53.894736c-8.946526 0.619789-17.866105 1.374316-26.947368 1.374315-222.881684 0-404.210526-181.328842-404.210526-404.210526S289.118316 107.789474 512 107.789474s404.210526 181.328842 404.210526 404.210526c0 195.206737-139.075368 358.507789-323.368421 396.045474v54.460631c214.096842-38.346105 377.263158-225.549474 377.263158-450.533052C970.105263 259.395368 764.604632 53.894737 512 53.894737z" fill="#231F20" ></path></symbol><symbol id="icon-bilibili1" viewBox="0 0 1129 1024"><path d="M234.909 9.656a80.468 80.468 0 0 1 68.398 0 167.374 167.374 0 0 1 41.843 30.578l160.937 140.82h115.07l160.936-140.82a168.983 168.983 0 0 1 41.843-30.578A80.468 80.468 0 0 1 930.96 76.445a80.468 80.468 0 0 1-17.703 53.914 449.818 449.818 0 0 1-35.406 32.187 232.553 232.553 0 0 1-22.531 18.508h100.585a170.593 170.593 0 0 1 118.289 53.109 171.397 171.397 0 0 1 53.914 118.288v462.693a325.897 325.897 0 0 1-4.024 70.007 178.64 178.64 0 0 1-80.468 112.656 173.007 173.007 0 0 1-92.539 25.75H212.377a341.186 341.186 0 0 1-72.421-4.024A177.835 177.835 0 0 1 28.91 939.065a172.202 172.202 0 0 1-27.36-92.539V388.662a360.498 360.498 0 0 1 0-66.789A177.03 177.03 0 0 1 162.487 178.64h105.414c-16.899-12.07-31.383-26.555-46.672-39.43a80.468 80.468 0 0 1-25.75-65.984 80.468 80.468 0 0 1 39.43-63.57M216.4 321.873a80.468 80.468 0 0 0-63.57 57.937 108.632 108.632 0 0 0 0 30.578v380.615a80.468 80.468 0 0 0 55.523 80.469 106.218 106.218 0 0 0 34.601 5.632h654.208a80.468 80.468 0 0 0 76.444-47.476 112.656 112.656 0 0 0 8.047-53.109v-354.06a135.187 135.187 0 0 0 0-38.625 80.468 80.468 0 0 0-52.304-54.719 129.554 129.554 0 0 0-49.89-7.242H254.22a268.764 268.764 0 0 0-37.82 0z m0 0" fill="#20B0E3" ></path><path d="M348.369 447.404a80.468 80.468 0 0 1 55.523 18.507 80.468 80.468 0 0 1 28.164 59.547v80.468a80.468 80.468 0 0 1-16.094 51.5 80.468 80.468 0 0 1-131.968-9.656 104.609 104.609 0 0 1-10.46-54.719v-80.468a80.468 80.468 0 0 1 70.007-67.593z m416.02 0a80.468 80.468 0 0 1 86.102 75.64v80.468a94.148 94.148 0 0 1-12.07 53.11 80.468 80.468 0 0 1-132.773 0 95.757 95.757 0 0 1-12.875-57.133V519.02a80.468 80.468 0 0 1 70.007-70.812z m0 0" fill="#20B0E3" ></path></symbol><symbol id="icon-yinle" viewBox="0 0 1024 1024"><path d="M512.2976 0a531.2 531.2 0 0 0-512 548.48V960h128V548.48a398.72 398.72 0 0 1 384-411.52 398.72 398.72 0 0 1 384 411.52V960h128V548.48A531.2 531.2 0 0 0 512.2976 0z" fill="#5c8add" ></path><path d="M64.2976 576l256 0 0 448-256 0 0-448Z" fill="#5c8add" ></path><path d="M704.2976 576l256 0 0 448-256 0 0-448Z" fill="#5c8add" ></path></symbol><symbol id="icon-icon-test-copy" viewBox="0 0 1024 1024"><path d="M512 512m-229.517241 0a229.517241 229.517241 0 1 0 459.034482 0 229.517241 229.517241 0 1 0-459.034482 0Z" fill="#5c8add" ></path><path d="M512 1024A512 512 0 1 1 1024 512 512 512 0 0 1 512 1024z m0-141.241379A370.758621 370.758621 0 1 0 141.241379 512 370.758621 370.758621 0 0 0 512 882.758621z" fill="#5c8add" ></path></symbol><symbol id="icon-V" viewBox="0 0 1024 1024"><path d="M1012.47774251 492.58192592L544.94137566 87.22962963a49.96686561 49.96686561 0 0 0-65.88275132 0L11.63784127 492.6975097c-21.03624691 18.26223633-23.3479224 49.93219048-5.08568606 70.96843739 18.03106878 21.03624691 49.93219048 23.3479224 70.96843738 5.08568607L512 191.83294532l434.71057495 376.91868784c9.47786949 8.20644797 21.26741446 12.25188008 32.82579189 12.13629629 14.10122046 0 27.97127337-5.77918871 38.02706173-17.33756613 18.14665256-20.92066314 15.95056084-52.70620106-5.08568606-70.9684374z" fill="#5c8add" ></path><path d="M109.30613051 567.59579541V896.89396825c0 42.53482892 34.90629982 77.44112875 77.44112875 77.44112875h220.76500882V666.30433862c0-25.54401411 20.92066314-46.46467725 46.46467724-46.46467724h116.16169313c25.54401411 0 46.46467725 20.92066314 46.46467725 46.46467724V974.335097h220.76500882c42.53482892 0 77.44112875-34.90629982 77.44112874-77.44112875l0.11558377-329.29817284L512 218.18604586 109.30613051 567.59579541zM848.00203175 197.49655027h-63.91782716c-12.82979894 0-23.23233862 10.40253968-23.23233863 23.23233862v24.27259259l110.49808818 95.70336508V220.72888889h-0.11558377c0-12.82979894-10.40253968-23.23233862-23.23233862-23.23233862zM905.44716754 83.18419754s-34.90629982 56.86721693-89.11508994 100.32671603c152.68616579 13.98563668 127.83565432-133.26809171 127.83565432-133.2680917-134.07717813-10.28695591-132.92134039 102.29164021-131.072 127.83565432 20.92066314-20.92066314 49.70102293-62.64640564 92.35143562-94.89427865zM798.53217637 174.61096297c-19.64924162-16.52847972-40.56990476-43.45949912-51.203612-53.97762258 0 0 32.94137566 20.57391182 56.40488184 49.3542716 2.42725926-18.37782011 6.47269135-93.3916896-93.16052205-85.3008254 0 0-13.98563668 104.71889947 87.95925221 89.92417638z" fill="#5c8add" ></path></symbol><symbol id="icon-zhifeiji" viewBox="0 0 1167 1024"><path d="M41.201759 463.52493L1110.665064 30.117647c10.32605-4.159104 21.942857 0.860504 26.101961 11.043137 1.434174 3.728852 1.864426 7.744538 1.003921 11.616807L949.033691 978.823529c-2.151261 10.89972-12.764146 17.927171-23.663865 15.632493-2.72493-0.573669-5.306443-1.721008-7.601121-3.298599L634.80624 789.79944l-163.065546 133.951821c-16.492997 13.62465-40.87395 11.186555-54.498599-5.306443-3.011765-3.728852-5.306443-7.887955-6.884034-12.477311l-102.973669-313.080112-265.178712-91.787115c-10.469468-3.585434-16.062745-15.058824-12.333893-25.528291 1.864426-5.44986 6.023529-9.895798 11.329972-12.047059z" fill="#FCFDFC" ></path><path d="M929.385512 1023.569748c-3.155182 0-6.453782-0.286835-9.752381-1.003922-6.740616-1.434174-12.907563-4.015686-18.50084-8.031372L635.953579 825.940616l-146.142297 120.040336c-13.911485 11.473389-31.408403 16.779832-49.335574 15.058824-17.927171-1.721008-34.133333-10.32605-45.463305-24.237535-5.306443-6.453782-9.322129-13.768067-11.903642-21.79944l-98.527731-299.598879-251.697479-87.19776c-12.333894-4.302521-22.229692-13.05098-27.966386-24.811204s-6.453782-24.954622-2.151261-37.288515c4.589356-13.337815 14.771989-23.9507 27.82297-29.257143L1099.908761 3.585434c24.954622-10.039216 53.351261 2.007843 63.533894 26.819048 3.585434 8.891877 4.445938 18.644258 2.581513 28.109804L977.143495 984.560224c-4.732773 23.090196-25.098039 39.009524-47.757983 39.009524z m-294.579272-233.770308l282.962465 201.357983c2.294678 1.577591 4.87619 2.72493 7.601121 3.298599 10.89972 2.151261 21.512605-4.87619 23.663865-15.632493L1137.914364 52.777591c0.860504-3.872269 0.430252-7.887955-1.003922-11.616807-4.159104-10.32605-15.919328-15.202241-26.101961-11.043137L41.201759 463.52493c-5.306443 2.151261-9.465546 6.597199-11.47339 12.047059-1.721008 5.019608-1.434174 10.469468 0.860505 15.345658 2.294678 4.87619 6.453782 8.461625 11.473389 10.182633l265.178711 91.787115L410.214644 905.967507c1.434174 4.589356 3.872269 8.748459 6.884033 12.477311 6.597199 8.031373 15.919328 12.907563 26.101961 13.911485 10.32605 1.003922 20.365266-2.007843 28.396639-8.605042l163.208963-133.951821z" fill="#4A4A4A" ></path><path d="M307.097557 592.743978l105.698599 316.091876c6.310364 18.787675 26.532213 28.970308 45.319888 22.659944 4.159104-1.434174 7.887955-3.442017 11.186555-6.166946l164.786555-133.951821-165.360224-118.892997c297.017367-287.982073 447.462185-433.980952 451.191036-437.853222 0.573669-0.573669 2.581513-3.442017 0.430252-7.027451-1.290756-1.577591-3.298599-3.298599-7.027451-2.15126-202.218487 120.327171-404.293557 242.805602-606.22521 367.291877z" fill="#CAE0EE" ></path><path d="M446.786072 934.794398c-5.736695 0-11.329972-1.290756-16.636414-3.872269-8.891877-4.445938-15.632493-12.047059-18.787675-21.512605L305.376549 592.313725l1.003921-0.573669C507.308201 467.684034 711.391114 344.058263 912.60568 224.161345l0.286835-0.143418c3.585434-1.147339 6.310364-0.286835 8.605042 2.581513l0.143417 0.143417c2.438095 4.015686 0.573669 7.457703-0.573669 8.74846-3.872269 4.015686-155.177591 150.87507-450.043698 436.705882l165.503642 119.036414-166.220728 135.09916c-3.442017 2.868347-7.457703 5.019608-11.760225 6.453782-3.728852 1.290756-7.744538 2.007843-11.760224 2.007843z m-137.967507-341.333334l105.268348 314.944538c2.868347 8.748459 9.035294 15.77591 17.210084 19.935014 8.17479 4.159104 17.496919 4.732773 26.245378 1.864426 3.872269-1.290756 7.60112-3.298599 10.756302-5.880112l163.352381-132.804482L466.434252 672.627451l1.290756-1.147339C763.308201 384.932213 915.043775 237.642577 918.772627 233.626891c0 0 2.007843-2.294678 0.286835-5.306443-1.003922-1.290756-2.438095-2.438095-5.306443-1.577591-200.784314 119.610084-404.293557 242.94902-604.934454 366.718207z" fill="#CAE0EE" ></path><path d="M460.840974 924.898599l7.457703-253.561904 165.933894 119.896918-168.658824 135.959664c-1.290756 1.003922-3.011765 0.860504-4.015686-0.430252-0.430252-0.430252-0.717087-1.147339-0.717087-1.864426z" fill="#94C3E2" ></path><path d="M463.709322 929.344538c-1.290756 0-2.438095-0.573669-3.2986-1.577591-0.573669-0.860504-1.003922-1.864426-1.003921-2.868348l7.60112-256.286834 169.519328 122.621848-1.434174 1.147339-168.658823 135.959664c-0.860504 0.717087-1.721008 1.003922-2.72493 1.003922z m6.023529-255.282913l-7.457703 250.836974c0 0.286835 0.143417 0.717087 0.286835 1.003922 0.430252 0.573669 1.434174 0.717087 2.007843 0.286835l167.22465-134.812325-162.061625-117.315406z" fill="#94C3E2" ></path></symbol><symbol id="icon-lianjie" viewBox="0 0 1079 1024"><path d="M695.355535 432.666896c-0.553495-1.10699-0.885592-2.186305-1.383737-3.265619-0.193723-0.193723-0.193723-0.359772-0.359771-0.719543-12.508983-26.318678-39.436506-43.366319-69.325226-41.013966-39.076734 3.265619-68.439634 39.021384-65.312388 79.841627 0.857917 10.516401 3.653066 20.147211 7.998 28.83708 19.78744 46.659613 11.097571 103.448181-25.377737 141.750022l-191.094085 199.950001a118.088119 118.088119 0 0 1-171.998513 0c-47.434506-49.537786-47.434506-130.098956 0-179.636742l71.234782-74.389703-0.52582-0.553494a75.911814 75.911814 0 0 0 24.326097-61.880721c-3.127246-40.820243-37.3609-71.51153-76.437634-68.24591a69.463599 69.463599 0 0 0-46.908685 23.966325l-0.166049-0.193723-72.618519 75.856464c-103.226783 107.793115-103.226783 282.36538 0 390.158495 103.171433 107.793115 270.299193 107.793115 373.498301 0l191.619904-200.1714c80.256748-83.992838 97.636485-208.307773 52.83108-310.289193z" fill="#5c8add" ></path><path d="M1002.047012 80.865592c-103.226783-107.82079-270.382217-107.82079-373.581325 0l-191.619905 200.199075c-80.284423 83.854464-97.66416 208.197074-52.997128 310.233843 0.52582 1.079315 0.857917 2.15863 1.383737 3.26562 0.166048 0.166048 0.166048 0.359772 0.332097 0.719543 12.536658 26.291004 39.46418 43.366319 69.3529 41.013966 39.076734-3.265619 68.439634-39.021384 65.312388-79.869302a78.679288 78.679288 0 0 0-7.998-28.864755c-19.78744-46.631938-11.097571-103.448181 25.377737-141.750022l191.287808-199.839302a118.088119 118.088119 0 0 1 172.026188 0c47.434506 49.537786 47.434506 130.126631 0 179.692091l-71.234782 74.417378 0.52582 0.553495a75.939489 75.939489 0 0 0-24.353772 61.88072c3.15492 40.847917 37.3609 71.51153 76.465309 68.245911a69.463599 69.463599 0 0 0 46.908685-23.938651l0.166049 0.166048 72.646194-75.856464c103.03306-107.82079 103.03306-282.642127 0-390.269194z" fill="#5c8add" ></path></symbol><symbol id="icon-liaotian" viewBox="0 0 1171 1024"><path d="M1068.71699 0.243751H102.193768C46.228437 0.243751 0.500666 45.045267 0.500666 99.74309v696.251622c0 54.697824 45.727771 99.450589 101.693102 99.450589h329.113198l120.851966 114.465677a48.652788 48.652788 0 0 0 66.641644 0l120.851966-114.465677h329.064448c55.965331 0 101.741852-44.752765 101.741852-99.450589V99.74309C1170.458842 45.045267 1124.682321 0.243751 1068.71699 0.243751z m-439.776354 596.849784h-370.989696c-27.933915 0-50.846551-22.425133-50.846551-49.774045 0-27.348912 22.912636-49.725294 50.846551-49.725294h370.989696c27.933915 0 50.846551 22.376382 50.846551 49.725294 0 27.348912-22.912636 49.774045-50.846551 49.774045z m287.18795-211.381252H254.782171a50.456549 50.456549 0 0 1-50.846551-49.725294c0-27.397662 22.912636-49.774045 50.846551-49.774045h661.346415c27.933915 0 50.846551 22.376382 50.846551 49.774045 0 27.348912-22.912636 49.725294-50.846551 49.725294z" fill="#5C8ADD" ></path></symbol><symbol id="icon-xinfeng" viewBox="0 0 1400 1024"><path d="M1301.63733163 214.78520234a207.81921797 207.81921797 0 0 1 7.02423018 52.42036465v489.73590176a205.10753818 205.10753818 0 0 1-205.05853125 205.05853125H283.05853124A205.15654424 205.15654424 0 0 1 77.99999999 756.79444971V267.20556699a201.36672685 201.36672685 0 0 1 7.02423106-52.42036465L586.24393329 562.1905874c69.44187217 51.96297217 146.36536612 49.13694404 214.1736961 0zM1103.60303056 62.0000167H283.05853124A204.50312753 204.50312753 0 0 0 106.37462518 163.41030547l489.71956641 335.75823018c62.43397646 50.77048623 127.85733457 50.31309463 194.62019765 0L1280.28693749 163.41030547A204.68281729 204.68281729 0 0 0 1103.60303056 62.0000167z m0 0" fill="#5c8add" ></path></symbol><symbol id="icon-QQ1" viewBox="0 0 1024 1024"><path d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z" fill="#18ACFC" ></path><path d="M500.113 228.39c118.396-1.518 178.924 61.004 201 156 3.497 15.048 0.15 34.807 0 50 27.143 5.682 33.087 60.106 10 75v1h1c8.26 14.33 19.04 28.125 26 44 7.332 16.723 9.306 35.16 14 55 4.024 17.01-2.287 51.505-10 57-0.771 0.683-2.231 1.312-3 2-14.601-3.016-30.377-16.865-38-27-3.065-4.074-5.275-9.672-10-12-0.395 21.568-12.503 41.15-22 55-3.514 5.123-14.073 13.217-14 18 3.691 2.836 8.305 2.956 13 5 10.513 4.577 25.449 13.168 32 22 2.334 3.146 5.548 7.555 7 11 16.193 38.414-36.527 48.314-63 54-27.185 5.839-77.818-10.224-92-19-8.749-5.414-16.863-18.573-29-19-3.666 2.389-14.438 1.132-20 1-16.829 32.804-101.913 47.868-148 31-14.061-5.146-43.398-17.695-38-40 4.437-18.327 19.947-29.224 35-37 5.759-2.975 18.915-4.419 22-10-13.141-8.988-24.521-28.659-31-44-3.412-8.077-4.193-25.775-9-32-7.789 12.245-32.097 36.91-52 33-3.071-4.553-7.213-9.097-9-15-4.792-15.835-1.81-40.379 2-54 8.117-29.02 16.965-50.623 32-72 4.672-6.643 11.425-12.135 16-19-8.945-9.733-6.951-37.536-1-49 4.002-7.709 9.701-7.413 10-20-1.92-3.022-0.071-8.604-1-13-4.383-20.75 3.273-47.552 9-63 19.8-53.421 53.712-90.466 105-112 11.986-5.033 25.833-7.783 39-11 5.322-1.3 11.969 0.518 16-2z" fill="#FFFFFF" ></path></symbol><symbol id="icon-rss" viewBox="0 0 1024 1024"><path d="M749.61196492 908.06119793C749.61196492 560.41848146 463.58151854 274.36328126 115.93880207 274.36328126V115.93880207c434.50388795 0 792.12239584 357.61850789 792.12239586 792.12239586zM224.55858562 690.72261555a108.91682943 108.91682943 0 0 1 108.69404499 108.74355267C333.25263061 859.29616292 284.24005737 908.06119793 224.31104736 908.06119793 164.48105265 908.06119793 115.96355592 859.41993206 115.96355592 799.46616822s48.69077351-108.71879883 108.61978351-108.74355267zM641.01693522 908.06119793h-153.96879069c0-203.60020956-167.50913289-371.13409627-371.10934246-371.13409629v-153.96879068c288.03550619 0 525.07813313 237.11688843 525.07813315 525.10288697z" fill="#FFA500" ></path></symbol><symbol id="icon-youxiang" viewBox="0 0 1024 1024"><path d="M583.60666667 972h-68.08c-8.43333333 0-15.33333333-6.9-15.33333334-15.33333333V609.52c0-8.43333333 6.9-15.33333333 15.33333334-15.33333333h68.08c8.43333333 0 15.33333333 6.9 15.33333333 15.33333333V956.66666667c0 8.43333333-6.9 15.33333333-15.33333333 15.33333333z" fill="#629FF9" ></path><path d="M294.42 167c-113.62 0-205.77333333 92-205.77333333 205.31333333v336.72h411.39333333V372.31333333c0.15333333-113.31333333-92-205.31333333-205.62-205.31333333z" fill="#2166CC" ></path><path d="M519.97333333 627H216.98666667c-25.45333333 0-46-20.54666667-46-46V393.78c0-25.45333333 20.54666667-46 46-46h302.98666666c25.45333333 0 46 20.54666667 46 46V581c0 25.45333333-20.54666667 46-46 46z" fill="#D2E4FF" ></path><path d="M565.97333333 397a49.22 49.22 0 0 0-49.37333333-49.22H220.36c-27.29333333 0-49.37333333 22.08-49.37333333 49.22v10.27333333l179.4 94.60666667c11.34666667 5.98 24.84 5.98 36.18666666 0l179.4-94.60666667v-10.27333333z" fill="#FFFFFF" ></path><path d="M730.5 167h-427.8v0.46c109.78666667 4.29333333 197.49333333 94.3 197.49333333 205.00666667v336.72h411.39333334c27.29333333 0 49.37333333-22.08 49.37333333-49.22V397c0-126.96-103.19333333-230-230.46-230z" fill="#4E8DF6" ></path><path d="M845.80666667 52H681.12666667c-9.04666667 0-16.40666667 7.36-16.40666667 16.40666667v336.72a24.67133333 24.67133333 0 1 0 49.37333333 0V134.18666667h131.71333334c9.04666667 0 16.40666667-7.36 16.40666666-16.40666667V68.40666667c0-9.04666667-7.36-16.40666667-16.40666666-16.40666667z" fill="#2166CC" ></path><path d="M896.25333333 659.81333333h-35.11333333c-8.43333333 0-15.33333333-6.9-15.33333333-15.33333333v-35.11333333c0-8.43333333 6.9-15.33333333 15.33333333-15.33333334h35.11333333c8.43333333 0 15.33333333 6.9 15.33333334 15.33333334v35.11333333c0 8.58666667-6.9 15.33333333-15.33333334 15.33333333z" fill="#FFFFFF" ></path><path d="M88.8 709.18666667l-24.22666667 131.40666666c-9.66 54.43333333 26.83333333 98.59333333 81.26666667 98.59333334h213.9c54.58666667 0 106.56666667-44.16 116.22666667-98.59333334l23.15333333-131.40666666H88.8z" fill="#2974CE" ></path></symbol><symbol id="icon-gitHub" viewBox="0 0 1049 1024"><path d="M523.6581816 52C262.83923907 52 52 262.8401375 52 523.6581816c0 208.49703047 135.09433812 384.97758117 322.50789391 447.44906532 23.42658172 4.68531653 32.01647887-10.15136894 32.01647796-22.64584583 0-10.93210574-0.78163433-48.41463703-0.78163433-87.45953855-131.18885996 28.11189824-158.5200223-56.22379738-158.52002231-56.22379739-21.08437312-54.66232469-52.3201152-68.71827336-52.3201152-68.71827335-42.94858371-28.89353348 3.12384382-28.89353348 3.12384384-28.89353348 47.63479867 3.12384382 72.62285398 48.41643391 72.62285398 48.4164339 42.16784782 71.84121875 110.10538527 51.53758242 137.43654672 39.04400399 3.90457972-30.45500618 16.3990566-51.5393793 29.67427028-63.25222094-104.64023039-10.93300418-214.74561566-51.53848086-214.74561657-232.70524742 0-51.53848086 18.74126609-93.70632867 48.4164339-126.50444187-4.68621496-11.71284164-21.08527156-60.12837711 4.6844181-124.94207075 0 0 39.82563922-12.49447688 129.62738726 48.41463704 37.48253129-10.15136894 78.08980484-15.61742227 117.91454562-15.61742137s80.43201433 5.46605242 117.91454473 15.61742137c89.80264648-60.90911391 129.62828571-48.41463703 129.62828571-48.41463704 25.76879122 64.81369363 9.37063305 113.22922911 4.68531651 124.94207075 30.45410773 32.79721477 48.41463703 74.96506258 48.41463703 126.50444187 0 181.16676656-110.10538527 220.99150644-215.52545401 232.70524742 17.1797934 14.83668547 32.01647887 42.94858371 32.01647886 87.45953946 0 63.25222094-0.78163433 114.009965-0.78163523 129.62738636 0 12.49447688 8.59079468 27.33116234 32.01737731 22.64584583 187.41265734-62.4705866 322.50699547-238.95203574 322.50699546-447.44996375C995.31636231 262.8401375 783.69369203 52 523.6581816 52z" fill="#663399" ></path><path d="M230.82365863 729.03136735c-0.7807359 2.34310703-4.68531653 3.12384382-7.80916035 1.56237113s-5.46605242-4.68531653-3.90368129-7.02842356c0.7807359-2.34220859 4.68531653-3.12384382 7.80826192-1.56147269s4.68531653 4.68531653 3.90457972 7.02752512z m18.7412661 21.08437312c-2.34220859 2.34220859-7.02752512 0.78163433-9.37063305-2.34310703-3.12294539-3.12294539-3.90457972-7.80826192-1.5614727-10.15136894 2.34220859-2.34220859 6.24678922-0.7807359 9.37063305 2.34310702 3.12384382 3.90457972 3.90457972 8.58899782 1.5614727 10.15136895zM268.30618992 777.44690281c-3.12294539 2.34220859-7.80826192 0-10.15136895-3.90457972-3.12384382-3.90457972-3.12384382-9.37063305 0-10.93210574 3.12384382-2.34310703 7.80916035 0 10.15226739 3.90457972 3.12294539 3.90368129 3.12294539 8.58899782 0 10.93210574z m25.76968965 26.55042555c-2.34220859 3.12294539-7.80916035 2.34220859-12.49447688-1.56237113-3.90457972-3.90368129-5.46605242-9.37063305-2.34220859-11.71284164 2.34220859-3.12384382 7.80826192-2.34310703 12.49447687 1.56147269 3.90368129 3.12384382 4.68531653 8.58989625 2.3422086 11.71374008z m35.1403227 14.83668637c-0.78163433 3.90457972-6.24768766 5.46605242-11.71374008 3.90457972-5.46605242-1.5614727-8.58899782-6.24768766-7.80916036-9.37063305 0.78163433-3.90457972 6.24768766-5.46605242 11.71374009-3.90457972 5.46605242 1.5614727 8.58899782 5.46605242 7.80916035 9.37063305z m38.26416562 3.12384382c0 3.90457972-4.68621496 7.02752512-10.15226738 7.02752512-5.46605242 0-10.15226738-3.12294539-10.15226739-7.02752512s4.68621496-7.02842356 10.15226739-7.02842445c5.46605242 0 10.15226738 3.12384382 10.15226738 7.02842445z m35.92016106-6.24768766c0.78163433 3.90457972-3.12384382 7.80916035-8.58899872 8.58989625-5.46695086 0.78163433-10.15226738-1.5614727-10.93390172-5.46605241-0.77983747-3.90457972 3.12384382-7.80916035 8.5907947-8.58899872 5.46605242-0.78163433 10.15136894 1.56057426 10.93210574 5.46515488z m0 0" fill="#663399" ></path></symbol><symbol id="icon-bilibili" viewBox="0 0 1024 1024"><path d="M832.61667555 181.33447111h-164.32545185l74.45617778-74.45617778c12.84020148-12.84020148 12.84020148-30.8140563 0-43.65425778-12.84020148-12.84020148-30.8140563-12.84020148-43.65425778 0L573.2882963 189.04101925H450.04420741L324.2272237 63.23617185c-10.26730667-12.84020148-25.68040297-15.40096-41.08136295-7.70654815-2.57289482 0-2.57289482 2.57289482-5.13365334 5.13365333-12.84020148 12.84020148-12.84020148 30.8140563 0 43.65425779l77.02907259 77.02907259h-164.32545185c-89.86927408 0-164.32545185 74.45617778-164.32545185 164.32545184v408.24073483c0 87.29637925 74.45617778 161.75255703 164.32545185 161.75255703h25.68040296c0 30.8140563 25.68040297 53.92156445 53.92156444 53.92156444s53.92156445-25.68040297 53.92156445-53.92156444H704.23893333c2.57289482 30.8140563 28.24116148 53.92156445 59.05521778 51.34866964 28.24116148-2.57289482 48.78791111-23.10750815 51.34866964-51.34866964h20.53461333c89.86927408 0 164.32545185-74.45617778 164.32545184-164.32545186V343.09916445c-2.56075852-89.86927408-77.02907259-161.76469333-166.88621037-161.76469334z m-5.13365333 634.19429926H200.99527111c-33.37481482 0-59.05521778-28.24116148-61.61597629-61.61597629l-2.57289482-415.94728297c0-33.37481482 28.24116148-61.6159763 61.6159763-61.61597629h626.48775111c33.37481482 0 59.05521778 28.24116148 61.61597629 61.61597629l2.57289482 415.94728297c-2.57289482 35.93557333-28.24116148 61.6159763-61.6159763 61.61597629z" fill="#ff7299" ></path><path d="M403.82919111 417.55534222l15.40096 77.0290726-205.40681481 38.50846815-15.40096-77.0290726 205.40681481-38.50846815z m197.70026667 77.0290726l15.40096-77.0290726 205.40681481 38.50846815-15.40096 77.0290726-205.40681481-38.50846815z m41.08136297 161.75255703c0 2.57289482 0 7.70654815-2.57289483 10.26730667-12.84020148 28.24116148-41.08136297 46.2150163-74.45617777 48.78791111-20.53461333 0-41.08136297-10.26730667-53.92156445-25.68040296-15.40096 15.40096-33.37481482 25.68040297-53.92156445 25.68040296-30.8140563-2.57289482-59.05521778-20.53461333-74.45617777-48.78791111 0-2.57289482-2.57289482-5.13365333-2.57289481-10.26730667 0-10.26730667 7.70654815-17.97385482 17.97385481-20.53461333h2.57289482c7.70654815 0 12.84020148 2.57289482 15.40096 10.26730666 0 0 20.53461333 28.24116148 38.50846815 28.24116149 35.94770963 0 35.94770963-30.8140563 56.48232296-53.92156445 23.10750815 25.68040297 23.10750815 53.92156445 56.48232296 53.92156445 23.10750815 0 38.50846815-28.24116148 38.50846815-28.24116149 2.57289482-5.13365333 10.26730667-10.26730667 15.40096-10.26730666 10.26730667-2.57289482 17.97385482 5.13365333 20.53461333 15.40096v5.13365333h0.0364089z" fill="#ff7299" ></path></symbol></svg>',
o = (o = document.getElementsByTagName("script"))[o.length - 1].getAttribute("data-injectcss"),
p = function (c, l) {
l.parentNode.insertBefore(c, l);
};
if (o && !c.__iconfont__svg__cssinject__) {
c.__iconfont__svg__cssinject__ = !0;
try {
document.write(
"<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>"
);
} catch (c) {
console && console.log(c);
}
}
function d() {
i || ((i = !0), a());
}
function m() {
try {
t.documentElement.doScroll("left");
} catch (c) {
return void setTimeout(m, 50);
}
d();
}
(l = function () {
var c,
l = document.createElement("div");
(l.innerHTML = v),
(v = null),
(l = l.getElementsByTagName("svg")[0]) &&
(l.setAttribute("aria-hidden", "true"),
(l.style.position = "absolute"),
(l.style.width = 0),
(l.style.height = 0),
(l.style.overflow = "hidden"),
(l = l),
(c = document.body).firstChild ? p(l, c.firstChild) : c.appendChild(l));
}),
document.addEventListener
? ~["complete", "loaded", "interactive"].indexOf(document.readyState)
? setTimeout(l, 0)
: ((h = function () {
document.removeEventListener("DOMContentLoaded", h, !1), l();
}),
document.addEventListener("DOMContentLoaded", h, !1))
: document.attachEvent &&
((a = l),
(t = c.document),
(i = !1),
m(),
(t.onreadystatechange = function () {
"complete" == t.readyState && ((t.onreadystatechange = null), d());
}));
})(window);

执行以下命令

1
2
3
4
5
# https://www.npmjs.com/package/hexo-butterfly-tag-plugins-plus
npm install hexo-butterfly-tag-plugins-plus --save

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

添加配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
enable: true # 开关
priority: 5 #过滤器优先权
issues: false #issues标签开关
link:
placeholder: /img/siteicon/64.png #link_card标签默认的图标图片
CDN:
anima: https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
jquery: https://cdn.cbd.int/jquery@latest/dist/jquery.min.js #issues标签依赖
issues: https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
iconfont: /js/ali_font.js #参看https://akilar.top/posts/d2ebecef/
carousel: https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
tag_plugins_css: https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

添加 wowjs 特效

参考:wowjs 特效

see https://www.npmjs.com/package/hexo-butterfly-wowjs

1
npm install hexo-butterfly-wowjs --save

添加配置项

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
# wowjs
# see https://www.npmjs.com/package/hexo-butterfly-wowjs
wowjs:
enable: true #控制动画开关。true是打开,false是关闭
priority: 10 #过滤器优先级
mobile: false #移动端是否启用,默认移动端禁用
animateitem:
- class: recent-post-item #必填项,需要添加动画的元素的class
style: animate__zoomIn #必填项,需要添加的动画
duration: 1.5s #选填项,动画持续时间,单位可以是ms也可以是s。例如3s,700ms。
delay: 200ms #选填项,动画开始的延迟时间,单位可以是ms也可以是s。例如3s,700ms。
offset: 30 #选填项,开始动画的距离(相对浏览器底部)
iteration: 1 #选填项,动画重复的次数
- class: card-widget
style: animate__zoomIn
delay: 200ms
# - class: flink-list-card
# style: wowpanels
- class: flink-list-card
style: animate__flipInY
duration: 3s
- class: flink-list-card
style: animate__animated
duration: 3s
- class: article-sort-item
style: animate__slideInRight
duration: 1.5s
- class: site-card
style: animate__flipInY
duration: 3s
- class: site-card
style: animate__animated
duration: 3s
animate_css: https://cdn.cbd.int/hexo-butterfly-wowjs/lib/animate.min.css
wow_js: https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow.min.js
wow_init_js: https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow_init.js

留言板:薇尔莉特信封

1
npm install hexo-butterfly-envelope --save

添加配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# envelope_comment
# see https://akilar.top/posts/e2d3c450/
# envelope_comment
# see https://akilar.top/posts/e2d3c450/
envelope_comment:
enable: true #控制开关
custom_pic:
cover: https://cdn.cbd.int//hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
line: https://cdn.cbd.int/hexo-butterfly-envelope/lib/line.png #信笺底部图片
beforeimg: https://cdn.cbd.int/hexo-butterfly-envelope/lib/before.png # 信封前半部分
afterimg: https://cdn.cbd.int/hexo-butterfly-envelope/lib/after.png # 信封后半部分
message: #信笺正文,多行文本,写法如下
- 有什么想问的?
- 有什么想说的?
- 有什么想吐槽的?
- 哪怕是有什么想吃的,都可以告诉我哦~
bottom: 自动书记人偶竭诚为您服务! #仅支持单行文本
height: #1050px,信封划出的高度
path: #【可选】comments 的路径名称。默认为 comments,生成的页面为 comments/index.html
front_matter: #【可选】comments页面的 front_matter 配置
title: 留言板
comments: true
1
留言板: /comments/ || fas fa-envelope

使用 Github Action 实现全自动部署

参考https://blog.anheyu.com/posts/asdx.html

页脚 github 徽标和计时器

参考: https://www.npmjs.com/package/hexo-butterfly-footer-beautify

1
npm install hexo-butterfly-footer-beautify --save

添加配置项

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
# 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/anzhiyu-blog@2.0.4/js/runtime/runtime.min.js
runtime_css: https://npm.elemecdn.com/anzhiyu-blog@2.0.4/css/runtime/runtime.min.css
# 徽标部分配置项
swiperpara: 0 #若非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_v4.2.2
- link: https://www.jsdelivr.com/
shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
message: 本站使用JsDelivr为静态资源提供CDN加速
- link: https://beian.miit.gov.cn/#/Integrated/index
shields: https://img.shields.io/badge/湘ICP备-2022004213号-e1d492?style=flat&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAdCAYAAAC9pNwMAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+nhxg7wAACNlJREFUSInF1mmMVeUdx/Hv2e+5+519mJWBYQZkGxZZxLKJqBXGoLS1iXWrmihotFXaJiTWWlsbl6q1aetWd5u0VkKjNG4YEJSlOCibDLMwM8x679z9nnPP1jcVJUxf+7z6J8+LT37/Z4VvaQhfFS8+sBXbctCDGrVTKlBUH4mxAbI9Hfj0IJLsp6paJ5/tmn20N/D0wKDRMq9F/c3M2U1/V0vDfWMFh+tv/Ig1zYPMabDImPJ52OaXO87W580KggCiiOsJOJ6I3wcNFaaeNKxrt72f2fLGu4FpJ/sDQABRzD22fH7/Yze069vGc6mrDLNIJCDik10sxz2by3VdPM87xzkP9jwPTZFRVI1YUJKH+oy7n3tbvv/P2wW/UQxRWe6w4ZJRptYLHDoCuz8v5cP92XbI762O+h6UVWHnUFbPpU0fEb2A60mMJ7MUi9b/b7UgKhiZMaIxm8YLplLMDPz8hl/EH+rs8TNlUpFf32uyZJGLPDwCiTGUyTWodTN49eUCdz2YwXb9NNcObp1X98WDoufynzMVCEKGn27ayPTWBi5ad8P5iQUkJEnFLjqM9Z+hrVX0vfDe6K2dPRWsW2bwyp9EUifSJB84gdxrkR0eRgv1o/3I4fbbprJ6scqamzVO9pffec1S5ZWY2Nfz5qEy/FqOC2Y3s3j53HMSi18VRjFPwSwg+1RfVbl115vvJrsfej7UGIsYPPGgQ7JXoO+Xx5B3dHEomyJ9x1qiQozkr95h5937aFnVyouPlgJK+Ss7Fxz64OTSxSX+LHYxT2IsRW5kbGI4oHcR0jqoqTjV9se3I7/f8rS/ClS23GxSXhph6L5d9Akm7qqZhHWBQGUJ+CWGFzcg7e7m6D3/ZuW1Ea5YKdA3EojuONi813TqNi+YPYOKUhXDtCeGL26/hakLLiEcdsaHRkRAoLRc4fJrmhnekyF0apgZowWSwwkaa+rw3f8WA1GZZsPP5JEChX8dhZTN6iU6kAcs5s+dHd183SJ0VVKL57pfw6YdRQw23aeWTns47DPTALWlRTR7kMLew6hGgYqUhWXYFFUdPZ6lUBahLA8hVcOftckfi7No7VRAAQqsX1dybfvG1qwriM9mM5mJ4e4jO5Cc01dPqixbr8tWGBQUL4vjGigEEShi+xUmZ2RiR/sJ1pbS8NkgZrKAGw0TsgQsQyFaF/nfYTGprAlMFysbA1pI3mhkR6snhGsaymYGvPyFEb9IdbUE2AzFFTwpRqCtBY0wmdER+hZW4j63gcJj38V+/ErSUZXsYBfjIZHIRW0c2Z8BskCAqN+CbBJBFnyyKjR+Ez57nBxLqpfMUeSISElMBFz6x2Q6OxzWrYjyxWVzEewioU3LCS5vQY6nMUrLwNaxXvoQ59IloFSx54PPAZtQLExVZZDxsVE8J4dn6v4JYatgbSjk0owPw7RGH2ADMo88Z7L20ip8f7gC7fAo0q4+0rt7kEQDvaghVZbiPHUHcyeXcfLjT3jmpR7AYsnSScya3UR8bARVMck7Y/cB75/X6rDf3Fg2dw2jKZm5dXGm1LuAzO5DCo9v6aT0ibco5kzOvLOP+NGTFJtDpPYeZKijk/Rn3QxsfZV7txwhX7ABiZUXBsGvIvguQApNQQva9RMmTvZ2dpVUls+tX/UD7GN/Y8Ws05w6rQF+9vyzg1vZjbvMRJhXiRSU8DpTFFe0QE8S6SfPkOkZoktrB2oAhZWrwljxOPmchiSMYOWNoxNuruFU5vWeXdsojiUon345113dBBQBmTYlTimgdB8nfPo4WjaNFgN9OMEkJ02dnadVt5ki54Esqy+bzKJltVhSPbI3iN2zCyMTeXNCuG7Omm2Zok7PR2+R7jvD8ouruHhmCrB5jVZeYxLdrTP4sr4Vtd9g4MA4qc4c+6cu5NPamfw4P59t2WrA4YdXKkASf7SFivo6PDdEPmf1fRM++zp1bH/0r4I1dD1ODtOWaW4IsvPjL7nqXhloQiSPwjjgMYkMASyGEBkjhISCQwkwzve/18AbT+pk8pVY4UacQi9y+gyZ0eRAw4qHa89LXEx1LXMSPfhDJYRb59BtlLKg2WPT2l6qYl1svtGkrLYckyA1S+t5+2ATm37WCui0LSynsckDNH5zTxAchbQtkx08hDHYiW6NgC0enHBzEZ102UDH8QORdEckjEzZrNWkRydzyx17uGnDXqbUnGZ6dRPjSY91q2TqwjFuvTxLo5Zn5Qo/pumRSFcTLQtybEhGE0fQrDhhJ0VvH2lTnnHPhGtsmWan469apERjI2MH3qN7+7MEfH6ql29CbV7PvsMG32k6yU2XDhEKyZw66eJaRdrXR7CzCcqUNC3zwgymPJRCH4KRRLINimpL14A5Y4GDeOqbsPRVcfuN7Xj44pav/hFfrNT2kr2rsqf2Ibp5pEA14ZIImUyW3t5REkkTXRGQ/DGGhtLginhqCWknQDE5hKf5UFSF9Lj020Q2ul5V1AR2hr+8vuP8Vlc2zMPRxoSjnx7XBC14sDoydahSGq7KdO/HFyrBchxCVfX4fDKp4T7SCQejYODZLrYgIqgKFsNIgQqEYob8mW6yiUyb7Z64LVK/+B85xznnJ3AWzqTzuIX46mr5wLs+UUTyIriBCjRNxguHMJIFDLEEvXEOVRWnSJ0+jCd4CJoGjoedM1CLcXQziW3nMV2TSMBeOx7vWZvPt1r+cMPzE8KunaUkFn0vNrvtqXj34c1W6gzxlEQ6naIoBahtnkMwoFMwIVzSRNguMt53Aj2s4nkSlgPoGqLkICsRNF0gl8rYWuP8+11/w/OOJDEhHPKLCIpOXmi+M9AgP+maiesLifF2T1Rn5ZNj5Lo/Qc/GcPMmhdoqlEgIGzCK4PiCmJKK68p4KfF3qYGuF0qCRUkJTzleUbvQyWRTuE5xYthxQbBs7EISAbkzUFG3VfXXbK2YFi3X/eryfKKnqVBItNjJxDzH8erddC4SqWwcN5WyTtlyO1RP/Lh3eHD76MB40swmiDVJyDLYRhpc5+ub6tse/wWKbvSQEAw1awAAAABJRU5ErkJggg==
message: 本站已在湘进行备案
- 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://cdn.cbd.int/hexo-butterfly-swiper/lib/swiper.min.css
# swiper_js: https://cdn.cbd.int/hexo-butterfly-swiper/lib/swiper.min.js
# swiperbdage_init_js: https://cdn.cbd.int/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js

runtime.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
var now = new Date();
function createtime() {
var grt = new Date("04/01/2021 00:00:00");
now.setTime(now.getTime() + 250);
var days = (now - grt) / 1e3 / 60 / 60 / 24,
dnum = Math.floor(days),
hours = (now - grt) / 1e3 / 60 / 60 - 24 * dnum,
hnum = Math.floor(hours);
1 == String(hnum).length && (hnum = "0" + hnum);
var minutes = (now - grt) / 1e3 / 60 - 1440 * dnum - 60 * hnum,
mnum = Math.floor(minutes);
1 == String(mnum).length && (mnum = "0" + mnum);
var seconds = (now - grt) / 1e3 - 86400 * dnum - 3600 * hnum - 60 * mnum,
snum = Math.round(seconds);
1 == String(snum).length && (snum = "0" + snum);
let currentTimeHtml = "";
(currentTimeHtml =
hnum < 18 && hnum >= 9
? `<img class='boardsign' src='https://npm.elemecdn.com/anzhiyu-blog@2.0.4/img/badge/安知鱼-上班摸鱼中.svg' title='距离月入25k也就还差一个大佬带我~'><span class='textTip'> <br> 本站居然运行了 ${dnum} 天</span><span id='runtime'> ${hnum} 小时 ${mnum}${snum} 秒 </span> <i class='fas fa-heartbeat' style='color:red'></i>`
: `<img class='boardsign' src='https://npm.elemecdn.com/anzhiyu-blog@2.0.4/img/badge/安知鱼-下班啦.svg' title='下班了就该开开心心的玩耍,嘿嘿~'><span class='textTip'> <br> 本站居然运行了 ${dnum} 天</span><span id='runtime'> ${hnum} 小时 ${mnum}${snum} 秒 </span> <i class='fas fa-heartbeat' style='color:red'></i>`),
document.getElementById("workboard") && (document.getElementById("workboard").innerHTML = currentTimeHtml);
}
setInterval(() => {
createtime();
}, 250);

电子钟

参考:https://blog.anheyu.com/posts/fc18.html

1
npm install hexo-butterfly-clock-anzhiyu --save

添加配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# electric_clock
# see https://blog.anheyu.com/posts/fc18.html
electric_clock:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: all # 应用页面
exclude:
# - /posts/
# - /about/
layout: # 挂载容器类型
type: class
name: sticky_layout
index: 0
loading: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu@1.1.6/lib/loading.gif #加载动画自定义
clock_css: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu@1.1.6/lib/clock.min.css
clock_js: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu@1.1.6/lib/clock.min.js
ip_api: https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0
qweather_key: # 和风天气key
gaud_map_key: # 高得地图web服务key
default_rectangle: true # 开启后将一直显示rectangle位置的天气,否则将获取访问者的地理位置与天气
rectangle: 112.6534116,27.96920845 # 获取访问者位置失败时会显示该位置的天气,同时该位置为开启default_rectangle后的位置

Gitcalendar

参考:https://akilar.top/posts/1f9c68c9/

1
npm install hexo-filter-gitcalendar --save

添加配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# hexo-filter-gitcalendar
# see https://akilar.top/posts/1f9c68c9/
gitcalendar:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: / # 应用页面
# butterfly挂载容器
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
user: anzhiyu-c #git用户名
apiurl: "https://python-github-calendar-api-spk83h666-anzhiyu-c.vercel.app"
minheight:
pc: 280px #桌面端最小高度
mibile: 0px #移动端最小高度
# color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']" #橘黄色调
color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']" #浅紫色调
# color: "['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620']" #翠绿色调
# color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']" #天青色调
container: .recent-post-item(style='width:100%;height:auto;padding:10px;') #父元素容器,需要使用pug语法
gitcalendar_css: https://cdn.cbd.int/hexo-filter-gitcalendar/lib/gitcalendar.css
gitcalendar_js: https://cdn.cbd.int/hexo-filter-gitcalendar/lib/gitcalendar.js

hexo-butterfly-swiper-anzhiyu 插件安装

点击查看参考教程
参考方向教程原贴
店长原教程Swiper Bar
点击查看魔改教程

本站首页 Swiper Bar 修改请参考 hexo-butterfly-swiper-anzhiyu-pro 文档自行修改。此处不做赘述。

hexo-butterfly-swiper-anzhiyu 安装教程

1
npm install hexo-butterfly-swiper-anzhiyu --save

_config.butterfly.yml加入以下配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# hexo-butterfly-swiper-anzhiyu
# see https://akilar.top/posts/8e1264d1/
swiper:
enable: true # 开关
randomenable: true # 人潮汹涌开关
priority: 5 #过滤器优先权
enable_page: / # 应用页面
timemode: date #date/updated
layout: # 挂载容器类型
type: id
name: recent-posts
index: 1
default_descr: 再怎么看我也不知道怎么描述它的啦!
swiper_css: https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper.min.css #swiper css依赖
swiper_js: https://npm.elemecdn.com/anzhiyu-blog@1.1.6/js/swiper.min.js #swiper js依赖 #swiper js依赖
custom_css: https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiperstyle.css # 适配主题样式补丁
custom_js: https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper_init.js # swiper初始化方法
gsap_js: https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js
people_js: https://npm.elemecdn.com/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/people.min.js
1
2
3
4
5
6
7
8
# Pjax
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
enable: true
exclude:
# - xxxx
# - xxxx

swiper_index: 1

hexo-butterfly-categories-card

点击查看参考教程
参考方向教程原贴
店长原教程Categories Magnet
点击查看魔改教程
1
npm install hexo-butterfly-categories-card --save

_config.butterfly.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
# hexo-butterfly-categories-card
# see https://akilar.top/posts/a9131002/
categoryBar:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: / # 应用页面
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
column: odd # odd:3列 | even:4列
row: 1 #显示行数,默认两行,超过行数切换为滚动显示
message:
- descr: 大学学习史
cover: https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover1.webp
- descr: 前端成长历程
cover: https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover2.webp
- descr: 生活欢乐多
cover: https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover3.webp
- descr:
cover: https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover4.webp
- descr:
cover: https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover5.webp
- descr:
cover: https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover6.webp
custom_css: https://cdn.cbd.int/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css

友链朋友圈

点击查看参考教程

基于店长方案进行修改

参考方向教程原贴
店长原教程hexo-filter-fcircle
点击查看魔改友链朋友圈教程
1
2
npm uninstall hexo-butterfly-fcircle --save
npm install hexo-filter-fcircle --save

_config.butterfly.yml加入以下配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
# fcircle
# see https://akilar.top/posts/62f13a97/
fcircle:
enable: true #控制开关
apiurl: https://hexo-friendcircle-api-ai9d4hwad-anzhiyu-c.vercel.app/api #api地址
initnumber: 20 #【可选】页面初始化展示文章数量
stepnumber: 10 #【可选】每次加载增加的篇数
css: https://npm.elemecdn.com/anzhiyu-blog@1.1.6/css/friend.min.css #【可选】开发者接口,自定义css链接
js: https://npm.elemecdn.com/anzhiyu-blog@1.1.6/js/fcircle.min.js #【可选】开发者接口,自定义js链接
path: #【可选】fcircle的路径名称。默认为 fcircle,生成的页面为 fcircle/index.html
front_matter: #【可选】fcircle页面的 front_matter 配置
title: 朋友圈
comments: false

魔改友人帐

点击查看魔改友人帐参考教程

字数统计

点击查看参考教程
1
npm install hexo-wordcount --save

使用 github-action 推送博客部署仓库至 NPM

点击查看参考教程
参考方向教程原贴
使用 github-action 推送博客部署仓库至 NPMhttps://blog.anheyu.com/posts/asdx.html

引入阿里图标

点击查看参考教程

基于店长方案进行修改

参考方向教程原贴
店长原教程Iconfont Inject
点击查看引入阿里图标魔改教程

注意 ⚠️ 先自行引入ali_font.js

添加外挂标签,在[Blogroot]\themes\butterfly\scripts\tag\目录下新建iconfont.js,打开[Blogroot]\themes\butterfly\scripts\tag\iconfont.js,输入

1
2
3
4
5
6
7
8
9
10
"use strict";

function iconFont(args) {
args = args.join(" ").split(",");
let p0 = args[0];
let p1 = args[1] ? args[1] : 1;
return `<svg class="icon" style="width:${p1}em; height:${p1}em" aria-hidden="true"><use xlink:href="#${p0}"></use></svg>`;
}

hexo.extend.tag.register("icon", iconFont);
1
{% icon [icon-xxxx],[font-size] %}
  1. icon-xxxx:表示图标font-class,可以在自己的阿里矢量图标库项目的font-class引用方案内查询并复制。
  2. font-size:表示图标大小,直接填写数字即可,单位为em。图标大小默认值为1em
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% icon icon-rat_zi %}{% icon icon-rat,2 %}

{% icon icon-ox_chou,3 %}{% icon icon-ox,4 %}

{% icon icon-tiger_yin,5 %}{% icon icon-tiger,6 %}

{% icon icon-rabbit_mao,1 %}{% icon icon-rabbit,2 %}

{% icon icon-dragon_chen,3 %}{% icon icon-dragon,4 %}

{% icon icon-snake_si,5 %}{% icon icon-snake,6 %}

{% icon icon-horse_wu %}{% icon icon-horse,2 %}

{% icon icon-goat_wei,3 %}{% icon icon-goat,4 %}

{% icon icon-monkey_shen,5 %}{% icon icon-monkey,6 %}

{% icon icon-rooster_you %}{% icon icon-rooster,2 %}

{% icon icon-dog_xu,3 %}{% icon icon-dog,4 %}

{% icon icon-boar_hai,5 %}{% icon icon-boar,6 %}

站点动态 title

点击查看魔改站点动态 title 教程

添加自定义title.js,然后主题配置文件inject引入即可.

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);
}
});

时间轴生肖

点击查看参考教程

基于店长方案进行修改

参考方向教程原贴
店长原教程Archive Beautify

点击查看魔改时间轴生肖教程

[Blogroot]\themes\butterfly\scripts\目录下新建year.js,并在[Blogroot]\themes\butterfly\scripts\year.js中输入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
hexo.extend.helper.register("getAnimalIcon", function (year) {
var index = parseInt(year) % 12;
var icon = {
0: "icon-monkey",
1: "icon-rooster",
2: "icon-dog",
3: "icon-boar",
4: "icon-rat",
5: "icon-ox",
6: "icon-tiger",
7: "icon-rabbit",
8: "icon-dragon",
9: "icon-snake",
10: "icon-horse",
11: "icon-goat",
};
return icon[index];
});

修改[Blogroot]\themes\butterfly\layout\includes\mixins\article-sort.pug,第 7 行开始,注意缩进。

1
2
3
4
5
6
7
8
9
10
11
    - let title = article.title || _p('no_title')
+ - let iconAnimal = '#'+ getAnimalIcon(tempYear)
if tempYear !== year
- year = tempYear
- .article-sort-item.year= year
+ .article-sort-item.year
+ span= year
+ svg.icon(aria-hidden='true')
+ use(xlink:href=iconAnimal)
.article-sort-item(class=no_cover)
if article.cover && theme.cover.archives_enable

打赏按钮投币彩蛋效果

点击查看参考教程

基于店长方案进行修改

参考方向教程原贴
店长原教程hexo-theme-butterfly添加 打赏按钮投币彩蛋效果

点击查看打赏按钮投币彩蛋效果教程

修改[Blogroot]\themes\butterfly\languages\zh-CN.yml

1
2
3
4
5
6
7
8
9
10
date_suffix:
just: 刚刚
min: 分钟前
hour: 小时前
day: 天前
month: 个月前

- donate: 打赏
+ donate: 不给糖果就捣蛋
share: 分享

修改[Blogroot]\themes\butterfly\layout\includes\post\reward.pug,整体替换为以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
link(rel='stylesheet' href=url_for(theme.CDN.option.coin_css) media="defer" onload="this.media='all'")
.post-reward
button.tip-button.reward-button
span.tip-button__text= _p('donate')
.coin-wrapper
.coin
.coin__middle
.coin__back
.coin__front
.reward-main
ul.reward-all
each item in theme.reward.QR_code
- var clickTo = (item.itemlist||item).link ? (item.itemlist||item).link : (item.itemlist||item).img
li.reward-item
a(href=clickTo target='_blank')
img.post-qr-code-img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text)
.post-qr-code-desc=(item.itemlist||item).text
if theme.reward.coinAudio
- var coinAudio = theme.reward.coinAudio ? url_for(theme.reward.coinAudio) : 'https://cdn.cbd.int/akilar-candyassets@1.0.36/audio/coin.mp3'
audio#coinAudio(src=coinAudio)
script(defer src=url_for(theme.CDN.option.coin_js))

新建[Blogroot]source\css\coin\coin.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
213
214
215
216
217
218
219
220
.tip-button {
border: 0;
border-radius: 0.25rem;
cursor: pointer;
font-size: 20px;
font-weight: 600;
height: 2.6rem;
margin-bottom: -4rem;
outline: 0;
position: relative;
top: 0;
transform-origin: 0% 100%;
transition: transform 50ms ease-in-out;
width: auto;
-webkit-tap-highlight-color: transparent;
}
.tip-button:active {
transform: rotate(4deg);
}
.tip-button.clicked {
animation: 150ms ease-in-out 1 shake;
pointer-events: none;
}
.tip-button.clicked .tip-button__text {
opacity: 0;
transition: opacity 100ms linear 200ms;
}
.tip-button.clicked::before {
height: 0.5rem;
width: 60%;
background: $button-hover-color;
}
.tip-button.clicked .coin {
transition: margin-bottom 1s linear 200ms;
margin-bottom: 0;
}
.tip-button.shrink-landing::before {
transition: width 200ms ease-in;
width: 0;
}
.tip-button.coin-landed::after {
opacity: 1;
transform: scale(1);
transform-origin: 50% 100%;
}
.tip-button.coin-landed .coin-wrapper {
background: radial-gradient(circle at 35% 97%, rgba(3, 16, 50, 0.4) 0.04rem, transparent 0.04rem), radial-gradient(
circle at 45% 92%,
rgba(3, 16, 50, 0.4) 0.04rem,
transparent 0.02rem
), radial-gradient(circle at 55% 98%, rgba(3, 16, 50, 0.4) 0.04rem, transparent 0.04rem), radial-gradient(circle at
65% 96%, rgba(3, 16, 50, 0.4) 0.06rem, transparent 0.06rem);
background-position: center bottom;
background-size: 100%;
bottom: -1rem;
opacity: 0;
transform: scale(2) translateY(-10px);
}
.tip-button__text {
color: #fff;
margin-right: 1.8rem;
opacity: 1;
position: relative;
transition: opacity 100ms linear 500ms;
z-index: 3;
}
.tip-button::before {
border-radius: 0.25rem;
bottom: 0;
content: "";
display: block;
height: 100%;
left: 50%;
position: absolute;
transform: translateX(-50%);
transition: height 250ms ease-in-out 400ms, width 250ms ease-in-out 300ms;
width: 100%;
z-index: 2;
}
.tip-button::after {
bottom: -1rem;
color: white;
content: "ヾ(≧O≦)〃嗷~"; /*点击后显示的内容*/
height: 110%;
left: 0;
opacity: 0;
position: absolute;
pointer-events: none;
text-align: center;
transform: scale(0);
transform-origin: 50% 20%;
transition: transform 200ms cubic-bezier(0, 0, 0.35, 1.43);
width: 100%;
z-index: 1;
}

.coin-wrapper {
background: none;
bottom: 0;
height: 18rem;
left: 0;
opacity: 1;
overflow: hidden;
pointer-events: none;
position: absolute;
transform: none;
transform-origin: 50% 100%;
transition: opacity 200ms linear 100ms, transform 300ms ease-out;
width: 100%;
}

.coin {
--front-y-multiplier: 0;
--back-y-multiplier: 0;
--coin-y-multiplier: 0;
--coin-x-multiplier: 0;
--coin-scale-multiplier: 0;
--coin-rotation-multiplier: 0;
--shine-opacity-multiplier: 0.4;
--shine-bg-multiplier: 50%;
bottom: calc(var(--coin-y-multiplier) * 1rem - 3.5rem);
height: 3.5rem;
margin-bottom: 3.05rem;
position: absolute;
right: calc(var(--coin-x-multiplier) * 34% + 16%);
transform: translateX(50%) scale(calc(0.4 + var(--coin-scale-multiplier))) rotate(calc(var(
--coin-rotation-multiplier
) * -1deg));
transition: opacity 100ms linear 200ms;
width: 3.5rem;
z-index: 3;
}
.coin__front,
.coin__middle,
.coin__back,
.coin::before,
.coin__front::after,
.coin__back::after {
border-radius: 50%;
box-sizing: border-box;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 3;
}
.coin__front {
background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%),
linear-gradient(210deg, #8590b3 32%, transparent 32%), linear-gradient(150deg, #8590b3 32%, transparent 32%),
linear-gradient(to right, #8590b3 22%, transparent 22%, transparent 78%, #8590b3 78%), linear-gradient(
to bottom,
#fcfaf9 44%,
transparent 44%,
transparent 65%,
#fcfaf9 65%,
#fcfaf9 71%,
#8590b3 71%
), linear-gradient(to right, transparent 28%, #fcfaf9 28%, #fcfaf9 34%, #8590b3 34%, #8590b3 40%, #fcfaf9 40%, #fcfaf9
47%, #8590b3 47%, #8590b3 53%, #fcfaf9 53%, #fcfaf9 60%, #8590b3 60%, #8590b3 66%, #fcfaf9 66%, #fcfaf9 72%, transparent
72%);
background-color: #8590b3;
background-size: 100% 100%;
transform: translateY(calc(var(--front-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--front-scale-multiplier));
}
.coin__front::after {
background: rgba(0, 0, 0, 0.2);
content: "";
opacity: var(--front-y-multiplier);
}
.coin__middle {
background: #737c99;
transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--middle-scale-multiplier));
}
.coin__back {
background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%),
radial-gradient(circle at 50% 40%, #fcfaf9 23%, transparent 23%), radial-gradient(circle at 50% 100%, #fcfaf9 35%, transparent
35%);
background-color: #8590b3;
background-size: 100% 100%;
transform: translateY(calc(var(--back-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--back-scale-multiplier));
}
.coin__back::after {
background: rgba(0, 0, 0, 0.2);
content: "";
opacity: var(--back-y-multiplier);
}
.coin::before {
background: radial-gradient(circle at 25% 65%, transparent 50%, rgba(255, 255, 255, 0.9) 90%), linear-gradient(55deg, transparent
calc(var(--shine-bg-multiplier) + 0%), #e9f4ff calc(var(--shine-bg-multiplier) + 0%), transparent calc(var(
--shine-bg-multiplier
) + 50%));
content: "";
opacity: var(--shine-opacity-multiplier);
transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / -2)) scaleY(var(--middle-scale-multiplier))
rotate(calc(var(--coin-rotation-multiplier) * 1deg));
z-index: 10;
}
.coin::after {
background: #737c99;
content: "";
height: 0.3181818182rem;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 2;
}

@keyframes shake {
0% {
transform: rotate(4deg);
}
66% {
transform: rotate(-4deg);
}
100% {
transform: rotate();
}
}

新建[Blogroot]\source\js\coin\coin.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
var tipButtons = document.querySelectorAll(".tip-button");

function coinAudio() {
var coinAudio = document.getElementById("coinAudio");
if (coinAudio) {
coinAudio.play(); //有音频时播放
}
}
// Loop through all buttons (allows for multiple buttons on page)
tipButtons.forEach(button => {
var coin = button.querySelector(".coin");

// The larger the number, the slower the animation
coin.maxMoveLoopCount = 90;

button.addEventListener("click", () => {
if (/Android|webOS|BlackBerry/i.test(navigator.userAgent)) return true; //媒体选择
if (button.clicked) return;
button.classList.add("clicked");

// Wait to start flipping th coin because of the button tilt animation
setTimeout(() => {
// Randomize the flipping speeds just for fun
coin.sideRotationCount = Math.floor(Math.random() * 5) * 90;
coin.maxFlipAngle = (Math.floor(Math.random() * 4) + 3) * Math.PI;
button.clicked = true;
flipCoin();
coinAudio();
}, 50);
});

var flipCoin = () => {
coin.moveLoopCount = 0;
flipCoinLoop();
};

var resetCoin = () => {
coin.style.setProperty("--coin-x-multiplier", 0);
coin.style.setProperty("--coin-scale-multiplier", 0);
coin.style.setProperty("--coin-rotation-multiplier", 0);
coin.style.setProperty("--shine-opacity-multiplier", 0.4);
coin.style.setProperty("--shine-bg-multiplier", "50%");
coin.style.setProperty("opacity", 1);
// Delay to give the reset animation some time before you can click again
setTimeout(() => {
button.clicked = false;
}, 300);
};

var flipCoinLoop = () => {
coin.moveLoopCount++;
var percentageCompleted = coin.moveLoopCount / coin.maxMoveLoopCount;
coin.angle = -coin.maxFlipAngle * Math.pow(percentageCompleted - 1, 2) + coin.maxFlipAngle;

// Calculate the scale and position of the coin moving through the air
coin.style.setProperty("--coin-y-multiplier", -11 * Math.pow(percentageCompleted * 2 - 1, 4) + 11);
coin.style.setProperty("--coin-x-multiplier", percentageCompleted);
coin.style.setProperty("--coin-scale-multiplier", percentageCompleted * 0.6);
coin.style.setProperty("--coin-rotation-multiplier", percentageCompleted * coin.sideRotationCount);

// Calculate the scale and position values for the different coin faces
// The math uses sin/cos wave functions to similate the circular motion of 3D spin
coin.style.setProperty("--front-scale-multiplier", Math.max(Math.cos(coin.angle), 0));
coin.style.setProperty("--front-y-multiplier", Math.sin(coin.angle));

coin.style.setProperty("--middle-scale-multiplier", Math.abs(Math.cos(coin.angle), 0));
coin.style.setProperty("--middle-y-multiplier", Math.cos((coin.angle + Math.PI / 2) % Math.PI));

coin.style.setProperty("--back-scale-multiplier", Math.max(Math.cos(coin.angle - Math.PI), 0));
coin.style.setProperty("--back-y-multiplier", Math.sin(coin.angle - Math.PI));

coin.style.setProperty("--shine-opacity-multiplier", 4 * Math.sin((coin.angle + Math.PI / 2) % Math.PI) - 3.2);
coin.style.setProperty("--shine-bg-multiplier", -40 * (Math.cos((coin.angle + Math.PI / 2) % Math.PI) - 0.5) + "%");

// Repeat animation loop
if (coin.moveLoopCount < coin.maxMoveLoopCount) {
if (coin.moveLoopCount === coin.maxMoveLoopCount - 6) button.classList.add("shrink-landing");
window.requestAnimationFrame(flipCoinLoop);
} else {
button.classList.add("coin-landed");
coin.style.setProperty("opacity", 0);
setTimeout(() => {
button.classList.remove("clicked", "shrink-landing", "coin-landed");
setTimeout(() => {
resetCoin();
}, 300);
}, 1500);
}
};
});

修改_config.butterfly.yml,添加音频文件配置项,添加 CDN 配置项:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  # Sponsor/reward
reward:
enable: true
+ coinAudio: https://cdn.cbd.int/akilar-candyassets@1.0.36/audio/aowu.m4a
QR_code:
- img: https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/qrcode-weichat.png
link:
text: wechat
- img: https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/qrcode-alipay.png
link:
text: alipay
CDN:
# main
main_css: /css/index.css
jquery: https://cdn.cbd.int/jquery@latest/dist/jquery.min.js
main: /js/main.js
utils:/js/utils.js
option:
+ # 打赏按钮投币效果
+ coin_js: /js/coin/coin.js
+ coin_css: /css/coin/coin.css

现在的打赏按钮样式需要稍作适配,当前若提示语太长,悬停时会无法显示完全。需要微调一下,修改[Blogroot]\themes\butterfly\source\css\_layout\reward.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
.post-reward
position: relative
margin-top: 4rem
width: 100%
text-align: center

.reward-button
display: inline-block
padding: .2rem 1.2rem
background: var(--btn-bg)
color: var(--btn-color)
cursor: pointer
transition: all .4s

&:hover
box-shadow: inset 15em 0 0 0 var(--btn-hover-color)

.reward-main
display: block

.reward-main
position: absolute
bottom: 40px
left: -25%
z-index: 100
display: none
padding: 0 0 15px
width: 150%

.reward-all
display: inline-block
margin: 0
padding: 1rem .5rem
border-radius: 4px
background: var(--reward-pop)

&:before
position: absolute
bottom: -10px
left: 0
width: 100%
height: 20px
content: ''

&:after
position: absolute
right: 0
bottom: 2px
left: 0
margin: 0 auto
width: 0
height: 0
border-top: 13px solid var(--reward-pop)
border-right: 13px solid transparent
border-left: 13px solid transparent
content: ''

.reward-item
display: inline-block
padding: 0 8px
list-style-type: none
vertical-align: top

img
width: 130px
height: 130px

.post-qr-code-desc
padding-top: .4rem
width: 130px
color: $reward-pop-up-color
点击查看碎碎念

还可以针对自己的情况适度调整以下内容:

  • 修改悬停打赏按钮时的颜色填充长度:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
      .reward-button
    display: inline-block
    padding: .2rem 1.2rem
    background: var(--btn-bg)
    color: var(--btn-color)
    cursor: pointer
    transition: all .4s

    &:hover
    - box-shadow: inset 9em 0 0 0 var(--btn-hover-color)
    + box-shadow: inset 20em 0 0 0 var(--btn-hover-color)
  • 修改打赏二维码的样式(仅针对 2 张二维码的情况,单张不用改动。两张以上需要自己调试这两个参数)

1
2
3
4
5
6
7
8
9
10
  .reward-main
position: absolute
bottom: 40px
- left: 0
+ left: -25%
z-index: 100
display: none
padding: 0 0 15px
- width: 100%
+ width: 150%

每页单独配置背景图

点击查看参考教程

基于店长方案进行修改

参考方向教程原贴
店长原教程每页单独配置背景图
点击查看每页单独配置背景图魔改教程
  1. 修改[Blogroot]\themes\butterfly\layout\includes\layout.pug
1
2
3
4
5
6
  if theme.background
- #web_bg
+ if page.background
+ #web_bg(style=`background:`+ page.background + `;background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;`)
+ else
+ #web_bg
  1. 如此即可在每个页面的markdown文件的front-matter中使用background配置项单独配置页面背景了,不写或留空则使用主题配置文件中的默认背景。
1
2
3
4
5
6
7
8
9
10
11
---
title: 使用 Github Pages 和 Hexo 搭建自己的独立博客
tags: Hexo
cover: "https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/banner.jpg"
keywords: "使用 Github Pages 和 Hexo 搭建自己的独立博客,博客,hexo,github,搭博客"
description: 记录搭建博客的经历~
abbrlink: ddae
date: 2021-03-31 13:26:54
background: url(https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/banner.jpg)
swiper_index: 4
---
  1. 开了 pjax 的用户会发现背景变了以后就变不回去了,需要刷新才行。因此为了实现期望的效果,这里还要再把#web_bg加到pjax选择器中。
    修改[Blogroot]\themes\butterfly\layout\includes\third-party\pjax.pug
1
2
3
4
5
6
7
8
9
10
11
  script(src=url_for(theme.CDN.pjax))
script.
let pjaxSelectors = [
'title',
'#config-diff',
'#body-wrap',
'#rightside-config-hide',
'#rightside-config-show',
+ '#web_bg',
'.js-pjax'
]

菜单栏多色图标配置教程

点击查看参考教程

基于店长方案进行修改

参考方向教程原贴
店长原教程菜单栏多色图标配置教程
点击查看菜单栏多色图标配置教程
  1. 配置项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# 公共css
- <link rel="stylesheet" href="/css/custom.css"">
- <link rel="stylesheet" href="https://cdn.cbd.int/qweather-icons@1.1.1/font/qweather-icons.css">
# - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
bottom:
# 控制台打印消息
- <script async rel="prefetch" src="/js/console.js"></script>
# 标题卖萌
- <script async src="/js/diytitle.js"></script>
# 站点公祭日自动变灰判定
- <script async src="/js/grayscale.js"></script>
# 浮动动画特效
- <script async data-pjax src="/js/floatpanel.js"></script>
# aplayer音乐
- <div class="aplayer no-destroy" data-id="8152976493" data-server="netease" data-type="playlist" data-order="list" data-fixed="true" data-preload="auto" data-autoplay="false" data-mutex="true" ></div>
  1. 替换全部内容修改[Blogroot]\themes\butterfly\layout\includes\header\menu_item.pug,本方案默认使用观感最佳的悬停父元素触发子元素动画效果。默认动画为faa-tada
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
if theme.menu
//- for mobile sidebar
- let sidebarChildHide = theme.hide_sidebar_menu_child ? 'hide' : ''

.menus_items
each value, label in theme.menu
if typeof value !== 'object'
.menus_item
a.site-page.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])))
if value.split('||')[1]
- var icon_value = trim(value.split('||')[1])
- var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
if icon_value.substring(0,2)=="fa"
i.fa-fw(class=icon_value + ' ' + anima_value)
else if icon_value.substring(0,4)=="icon"
svg.icon(aria-hidden="true" class=anima_value)
use(xlink:href=`#`+ icon_value)
span=' '+label
else
.menus_item
a.site-page.faa-parent.animated-hover(href='javascript:void(0);')
if label.split('||')[1]
- var icon_label = trim(label.split('||')[1])
- var anima_label = label.split('||')[2] ? trim(label.split('||')[2]) : 'faa-tada'
if icon_label.substring(0,2)=="fa"
i.fa-fw(class=icon_label + ' ' + anima_label)
else if icon_label.substring(0,4)=="icon"
svg.icon(aria-hidden="true" class=anima_label)
use(xlink:href=`#`+ icon_label)
span=' '+ trim(label.split('||')[0])
i.fas.fa-chevron-down.expand(class=sidebarChildHide)
ul.menus_item_child
each val,lab in value
li
a.site-page.child.faa-parent.animated-hover(href=url_for(trim(val.split('||')[0])))
if val.split('||')[1]
- var icon_val = trim(val.split('||')[1])
- var anima_val = val.split('||')[2] ? trim(val.split('||')[2]) : 'faa-tada'
if icon_val.substring(0,2)=="fa"
i.fa-fw(class=icon_val + ' ' + anima_val)
else if icon_val.substring(0,4)=="icon"
svg.icon(aria-hidden="true" class=anima_val)
use(xlink:href=`#`+ icon_val)
span=' '+ lab
  1. 修改配置项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
menu:
首页: / || fas fa-home || faa-tada
时间轴: /archives/ || fas fa-archive
闲言碎语: /artitalk/ || fas fa-comment-dots
音乐馆: /music/ || fas fa-music
分类: /categories/ || fas fa-folder-open
# List||fas fa-list:
# Music: /music/ || fas fa-music
# Movie: /movies/ || fas fa-video

朋友圈: /fcircle/ || fab fa-artstation
留言板: /comments/ || fas fa-envelope
友人帐: /link/ || fas fa-link
# 闲言碎语: /hpptalk/ || fas fa-comment-dots
追番: /bangumis/ || icon-bilibili1
关于: /about/ || icon-zhifeiji

Social 卡片彩色图标引入

点击查看参考教程

基于店长方案进行修改

参考方向教程原贴
店长原教程Social 卡片彩色图标引入
点击查看Social 卡片彩色图标引入魔改教程
  1. 重写[Blogroot]\themes\butterfly\layout\includes\header\social.pug,替换为以下代码:
1
2
3
4
5
6
7
8
9
10
each value, title in theme.social
a.social-icon.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])) target="_blank" title=title === undefined ? '' : trim(title))
if value.split('||')[1]
- var icon_value = trim(value.split('||')[1])
- var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
if icon_value.substring(0,2)=="fa"
i.fa-fw(class=icon_value + ' ' + anima_value)
else if icon_value.substring(0,4)=="icon"
svg.icon(aria-hidden="true" class=anima_value)
use(xlink:href=`#`+ icon_value)
  1. 以下为对应的social配置项。写法沿用menu_item的写法示例。早就想吐槽 butterfly 里 menu 和 social 截然相反的配置项写法了。修改[Blogroot]\_config.butterfly.ymlsocial配置项。
1
2
3
4
5
6
7
8
9
# social settings (社交图标设置)
# formal:
# icon: link || the description
social:
Github: https://github.com/anzhiyu-c || icon-gitHub || faa-tada
Email: https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=2268025923@qq.com || icon-youxiang || faa-tada
RSS: atom.xml || icon-rss || faa-tada
BiliBili: https://space.bilibili.com/372204786 || icon-bilibili || faa-tada
QQ: tencent://Message/?Uin=2268025923&amp;websiteName=local.edu.com:8888=&amp;Menu=yes || icon-QQ1 || faa-tada

404 页面展示最近文章

点击查看参考教程

基于HEO方案进行修改

参考方向教程原贴
洪哥原教程Butterfly 魔改:404 页面展示最近文章
点击查看魔改404页面展示最近文章教程

替换themes\butterfly\layout\includes\404.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
- var top_img = theme.error_404.background || theme.default_top_img
- var bg_img = `background-image: url('${url_for(top_img)}')`

#body-wrap.error
div(style='display: none')
include ./header/index.pug

#error-wrap
.error-content
.error-img(style=bg_img)
.error-info
h1.error_title= '404'
.error_subtitle= theme.error_404.subtitle
a.button--animated(href=config.root)
i.fas.fa-rocket
= _p('返回主页')

.aside-list
.aside-list-group
- let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
- let sort = theme.aside.card_recent_post.sort === 'updated' ? 'updated' : 'date'
- site.posts.sort(sort, -1).limit(postLimit).each(function(article){
- let link = article.link || article.path
- let title = article.title || _p('no_title')
- let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : ''
- let post_cover = article.cover
.aside-list-item(class=no_cover)
if post_cover && theme.cover.aside_enable
a.thumbnail(href=url_for(link) title=title)
img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
.content
a.title(href=url_for(link) title=title)= title
if theme.aside.card_recent_post.sort === 'updated'
time(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)]
else
time(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)]
- })

random.js 随机跳转一篇文章

点击查看参考教程

基于HEO方案进行修改

参考方向教程原贴
洪哥原教程Hexo 的 Butterfly 魔改:随机网页跳转(无缝版)
random.js随机跳转一篇文章

目前博主已将该内容集成在hexo-butterfly-swiper-anzhiyu中, 如果你有安装该插件,那么你将无需魔改该内容即可在任意位置使用toRandomPost()方法来实现跳转随意一篇文章。

创建themes/butterfly/scripts/helpers/random.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
hexo.extend.generator.register("random", function (locals) {
const config = hexo.config.random || {};
const posts = [];
for (const post of locals.posts.data) {
if (post.random !== false) posts.push(post.path);
}
return {
path: config.path || "zhheo/random.js",
data: `var posts=${JSON.stringify(
posts
)};function toRandomPost(){pjax.loadUrl('/'+posts[Math.floor(Math.random() * posts.length)]);};`,
};
});

如果你没有开启pjax用下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
hexo.extend.generator.register("random", function (locals) {
const config = hexo.config.random || {};
const posts = [];
for (const post of locals.posts.data) {
if (post.random !== false) posts.push(post.path);
}
return {
path: config.path || "anzhiyu/random.js",
data: `var posts=${JSON.stringify(
posts
)};function toRandomPost(){window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self");};`,
};
});

在主题配置文件引入themes/butterfly/_config.ymlinjectbottom里添加

1
<script src="/anzhiyu/random.js"></script>

调用
在需要调用的位置执行toRandomPost()函数即可。

比如任意dom添加onclick="toRandomPost()"

右键菜单魔改

点击查看参考教程
点击查看右键菜单魔改教程

themes/butterfly/source/js/search/local-search.js添加以下代码(站内搜索 🔍)

1
2
3
4
const searchClickFn = () => {
document.querySelector('#search-button > .search').addEventListener('click', openSearch)
+ document.querySelector('#menu-search').addEventListener('click', openSearch)
}

themes/butterfly/layout/includes/layout.pug添加以下代码

1
2
3
4
  include ./rightside.pug
!=partial('includes/third-party/search/index', {}, {cache: true})
+ !=partial('includes/anzhiyu/rightmenu', {}, {cache:true})
include ./additional-js.pug

评论弹幕

点击查看参考教程

文章双栏

点击查看参考教程
参考方向教程原贴
小冰博客教程:butterfly 主题文章双栏布局插件
点击查看文章双栏教程

执行以下命令

1
2
3
4
5
npm i hexo-butterfly-article-double-row --save

# 或者

cnpm i hexo-butterfly-article-double-row --save

注意,一定要加 –save,不然本地预览的时候可能不会显示!!!

新增网站根目录_config 配置项 (不是主题的):

1
2
butterfly_article_double_row:
enable: true

站外链接 tag

点击查看参考教程
参考方向教程原贴
洪哥原教程Hexo 的 Butterfly 魔改:网址卡片外挂标签

bilibili 视频适配

效果预览
点击查看bilibili视频适配

直接复制插入你的 md 文章就行,修改里面的 aid 为你的视频 id:

1
2
3
4
5
6
7
8
9
10
11
12
<div align="center" class="aspect-ratio">
<iframe
src="https://player.bilibili.com/player.html?aid=556933559&&page=1&as_wide=1&high_quality=1&danmaku=0"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
high_quality="1"
danmaku="1"
allowfullscreen="true"
></iframe>
</div>

记得去 blog/source/css/custom.css 里,添加上述的样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*哔哩哔哩视频适配*/
.aspect-ratio {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%;
margin: 3% auto;
text-align: center;
}
.aspect-ratio iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

文章页局部 html 代码不渲染

点击查看文章页局部 html 代码不渲染代码

md 文章页,部分内容不想经过 Hexo 渲染,则包一层 raw 标签:

1
2
3
4
5
{% raw %}

<div class="">你的一些代码...</div>
<script>你的一些代码...</script>
{% endraw %}

文章置顶

想要在首页置顶某篇文章,只需在文章头部信息添加以下内容:

1
sticky: 1

文章页 H1-H6 图标风车样式效果

点击查看文章页H1-H6图标风车样式效果魔改教程

本站使用了风车样式

1
2
3
4
5
6
beautify:
enable: true
field: post # site/post
# title-prefix-icon: '\f0c1' 原内容
title-prefix-icon: '\f863'
title-prefix-icon-color: "#F47466"

在上文的 blog/source/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
/* 文章页H1-H6图标样式效果 */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
-webkit-animation: ccc 1.6s linear infinite;
animation: ccc 1.6s linear infinite;
}
@-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);
}
}

本站使用了风车样式,添加以下 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
#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;
}

鼠标碰到小风车转速变慢及变色
设置鼠标碰到标题时,小风车跟随标题变色,且像是被光标阻碍了,转速变慢。鼠标离开恢复转速。也可以设置为 none 鼠标碰到停止转动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#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: #3b70fc;
}
#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: #3b70fc;
-webkit-animation: ccc 3.2s linear infinite;
animation: ccc 3.2s linear infinite;
}

右下角设置 icon 转的太快了,让它慢一点吧。继续添加:

1
2
3
4
/* 页面设置icon转动速度调整 */
#rightside_config i.fas.fa-cog.fa-spin {
animation: fa-spin 5s linear infinite;
}

侧边栏标签修改

点击查看侧边栏标签修改魔改教程

打开themes/butterfly/scripts/helpers/page.js修改第 52 行左右, 其中 <sup> 表示上标,<sub> 表示下标。开启了排序。

1
2
3
4
5
6
7
8
9
10
11
12
13
  const length = sizes.length - 1
- source.forEach(tag => {
+ source.sort('name').forEach(tag => {
const ratio = length ? sizes.indexOf(tag.length) / length : 0
const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
style += ` color: ${color}`
- result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
+ result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}<sup>${tag.length}</sup></a>`
})
return result
})

加入以下 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
/* tags样式 */
#aside-content .card-tag-cloud a {
color: var(--anzhiyu-fontcolor) !important;
font-size: 1.05rem !important;
border-radius: 8px;
display: inline-block;
margin-right: 4px;
}
#aside-content .card-tag-cloud a:hover {
background: var(--anzhiyu-theme);
color: var(--anzhiyu-white) !important;
box-shadow: var(--anzhiyu-shadow-theme);
}
@media screen and (min-width: 1300px) {
#aside-content .card-tag-cloud a:hover {
transform: scale(1.03);
}
#aside-content .card-tag-cloud a:active {
transform: scale(0.97);
}
}
#aside-content .card-tag-cloud a sup {
opacity: 0.4;
margin-left: 2px;
}

侧边栏归档修改

点击查看侧边栏标签修改魔改教程

打开themes/butterfly/scripts/helpers/aside_archives.js修改第 92 行左右, 其中 <sup> 表示上标,<sub> 表示下标。开启了排序。

1
2
3
4
5
6
7
8
9
result += transform ? transform(item.name) : item.name
result += '</span>'

if (showCount) {
- result += `<span class="card-archive-list-count">${item.count}</span>`
+ result += `<div class="card-archive-list-count-group"><span class="card-archive-list-count">${item.count}</span><span>篇</span></div>`
}
result += '</a>'
result += '</li>'

加入以下 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
/* 归档样式 */
span.card-archive-list-count {
width: auto;
text-align: left;
font-size: 1.5rem;
line-height: 0.9;
font-weight: 700;
}
.card-archive-list-count-group {
display: flex;
flex-direction: row;
align-items: baseline;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child,
#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
width: fit-content;
margin-left: 4px;
}
span.card-archive-list-count {
width: auto;
text-align: left;
font-size: 1.1rem;
line-height: 0.9;
font-weight: 700;
}
.card-archive-list-date {
font-size: 14px;
opacity: 0.6;
}
li.card-archive-list-item {
width: 100%;
flex: 0 0 48%;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover,
#aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
color: var(--anzhiyu-white);
background-color: var(--anzhiyu-theme);
box-shadow: var(--anzhiyu-shadow-theme);
border-radius: 8px;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
@media screen and (min-width: 1300px) {
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover,
#aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
transform: scale(1.03);
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:active,
#aside-content .card-categories ul.card-category-list > .card-category-list-item a:active {
transform: scale(0.97);
}
}
#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 {
border-radius: 8px;
margin: 4px 0;
display: flex;
flex-direction: column;
align-content: space-between;
border: var(--style-border);
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child,
#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
width: auto;
flex: inherit;
}
#aside-content .card-archives ul.card-archive-list,
#aside-content .card-categories ul.card-category-list {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}

侧边栏最近文章修改

点击查看侧边栏最近文章修改魔改教程

去除首页最近文章显示,改为文章页显示,修改themes/butterfly/layout/includes/widget/index.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
else
//- page
!=partial('includes/widget/card_author', {}, {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})

加入以下 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
#aside-content .aside-list > .aside-list-item .content > time {
display: none;
}
#aside-content .aside-list > .aside-list-item .content > .title {
-webkit-line-clamp: 3;
font-weight: 700;
padding: 2px 0;
}
#aside-content .aside-list > .aside-list-item {
padding: 8px;
padding-top: 6px !important;
padding-bottom: 6px !important;
border-radius: 12px;
transition: 0.3s;
margin: 4px 0;
cursor: pointer;
}
@media screen and (min-width: 1300px) {
#aside-content .aside-list > .aside-list-item:hover {
transform: scale(1.03);
}
#aside-content .aside-list > .aside-list-item:active {
transform: scale(0.97);
}
}
#aside-content .aside-list > .aside-list-item:hover .thumbnail > img {
transform: scale(1);
}
#aside-content .aside-list > .aside-list-item:not(:last-child) {
border-bottom: 0 dashed var(--anzhiyu-background) !important;
}
#aside-content .aside-list > .aside-list-item .thumbnail {
border-radius: 8px;
border: var(--style-border);
}
#aside-content .aside-list > .aside-list-item:hover {
background: var(--anzhiyu-blue-main);
color: var(--anzhiyu-white);
transition: 0.3s;
box-shadow: var(--anzhiyu-shadow-main);
}
#aside-content .aside-list > .aside-list-item:hover a {
color: var(--anzhiyu-white) !important;
}
.card-widget.card-recent-post {
padding: 0.4rem 0.6rem !important;
}

加载渐变条

点击查看参考教程
参考方向教程原贴
轻笑 Chuckle给 Butterfly 加上顶部加载条

引入以下progress_bar

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
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 2000;
position: fixed;
margin: auto;
top: 10px;
left: 0;
right: 0;
height: 8px;
border-radius: 8px;
width: 4rem;
background: #eaecf2;
border: 1px #e3e8f7;
overflow: hidden;
}

.pace-inactive .pace-progress {
opacity: 0;
transition: 0.3s ease-in;
}

.pace .pace-progress {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
max-width: 200px;
position: absolute;
z-index: 2000;
display: block;
top: 0;
right: 100%;
height: 100%;
width: 100%;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
animation: gradient 1.5s ease infinite;
background-size: 200%;
}

.pace.pace-inactive {
opacity: 0;
transition: 0.3s;
top: -8px;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

inject中引入 js

1
2
# 顶部小进度条
- <script data-pjax src="//npm.elemecdn.com/pace-js@1.2.4/pace.min.js"></script>

侧边栏个人卡片渐变色

添加自定义 css

1
2
3
4
5
6
7
8
9
10
11
12
#aside-content > .card-widget.card-info {
background: linear-gradient(-45deg, var(--anzhiyu-main), #031764, #150136, #67044d);
background-size: 400%;
box-shadow: var(--anzhiyu-shadow-black);
animation: gradient 15s ease infinite;
position: relative;
color: var(--anzhiyu-white);
}
.site-data > a .headline,
.site-data > a .length-num {
color: var(--anzhiyu-white);
}

群聊

如果还是有问题 🤨,老规矩,进群答案 (akilar.top 店长yyds!