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

  • 如若是小白想要尝试搭建可参照以下的新手教程

Hexo 纯升级

本节仅仅只是在原本的项目上 进行Hexo的升级 和插件依赖的更新

升级前请 备份! 备份! 备份!
有较大的改动一定要备份 而且更新Hexo存在很多不可控因素 哪怕更新成功了也一定要保留一份备份以备不时之需
做好备份就可以开始更新框架工作

npm 全局更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ npm cache clean -f
# 清理 NPM缓存

$ npm install -g npm-check
$ npm install -g npm-upgrade
# 全局安装版本检测、版本升级工具

$ npm-check -g
# 全局检测哪些模块可以升级
# 这里可以根据打印的提示信息 手动安装最新版本的模块

$ npm update -g
# 全局更新模块

$ npm install --global hexo
# 全局安装 或 更新 Hexo的最新版本

Hexo 目录插件更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$ cd /Hexo-MeuiCat
# 进入博客的根目录

$ npm-check
# 检测Hexo哪些模块可以升级

# rm -rf package-lock.json
# 删除 package-lock.json

$ npm-upgrade
# 更新package.json 一直回车即可

$ rm -rf node_modules
# 删除整个模块目录 这样可以避免很多坑

$ npm update --save
# 更新Hexo的模块

$ npm audix
# 若出现依赖的问题 用此命令检查 把报错的统一修复一下即可

$ npm update --save --force
# 或者强制更新

完成检查

  • 在上述步骤完成后,package.json 将成为以下版本信息:
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
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "hexo generate",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server"
},
"hexo": {
"version": "6.3.0"
},
"dependencies": {
"hexo": "^6.3.0",
"hexo-baidu-url-submit": "0.0.6",
"hexo-blog-encrypt": "^3.1.6",
"hexo-butterfly-artitalk": "^1.0.4",
"hexo-deployer-git": "^4.0.0",
"hexo-filter-nofollow": "^2.0.2",
"hexo-generator-archive": "^2.0.0",
"hexo-generator-baidu-sitemap": "^0.1.9",
"hexo-generator-category": "^2.0.0",
"hexo-generator-feed": "^3.0.0",
"hexo-generator-index": "^3.0.0",
"hexo-generator-search": "^2.4.3",
"hexo-generator-sitemap": "^3.0.1",
"hexo-generator-tag": "^2.0.0",
"hexo-renderer-ejs": "^2.0.0",
"hexo-renderer-marked": "^6.0.0",
"hexo-renderer-pug": "^3.0.0",
"hexo-renderer-stylus": "^2.1.0",
"hexo-server": "^3.0.0",
"hexo-wordcount": "^6.0.1",
"sweetalert2": "^11.7.3"
}
}
  • 当在其他设备上 可以依据已更新成功的 package.json 直接通过 npm install 进行升级

Hexo 升级&重构

此节内容是重构 彻底的重构
新建空白文件夹 把 HexoButterfly 升到最新版本

全局更新 Hexo

1
2
3
4
5
6
7
8
9
10
11
12
$ hexo version
# 查看当前Hexo版本

$ npm config set registry https://registry.npm.taobao.org
$ npm config set registry https://registry.npmjs.org/
# 【可选源】 1:淘宝源 / 2:npm原镜像源(安装一些package 不容易报错)

$ npm i hexo-cli -g
# 全局安装或更新Hexo的最新版本

$ hexo version
# 再次查看当前Hexo版本是否至最新版

安装 Hexo

1
2
3
4
5
6
7
8
$ hexo init
# 空文件夹内执行

$ npm install hexo-deployer-git --save
# 部署必要依赖插件包

$ npm install hexo-renderer-pug hexo-renderer-stylus --save
# 必要渲染器

安装 Butterfly

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

自用数据记录

本节内容可能有所出入,如有缺失,请使用 F12 大法

_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
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
# Hexo 设置
# https://github.com/hexojs/hexo/
# https://hexo.io/zh-cn/docs/configuration



# 网站的基本信息
# --------------------------------------

title: 爱吃肉的猫
# 网站标题
subtitle: '有肉有猫有生活.'
# 网站副标题
description: '记录生活与技术点滴'
# 网站描述 主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词
keywords: Hexo,广播剧,分享,软件
# 网站关键词
author: MeuiCat
# 作者名字
language: zh-CN
# 网站语言 en/zh-CN
timezone: 'Asia/Shanghai'
# 网站时区 Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置,如 America/New_York, Japan, 和 UTC 。一般的,对于中国大陆地区可以使用 Asia/Shanghai



# URL
# https://hexo.io/zh-cn/docs/configuration#%E7%BD%91%E5%9D%80
# 在此处设置网站url;例如,如果您使用GitHub页面,请将url设置为 'https://username.github.io/project'
# --------------------------------------

url: https://meuicat.com
# 网站网址
root: /
# 网站根目录
permalink: blog/:title/
# 文章的永久链接格式 https://hexo.io/zh-cn/docs/permalinks
permalink_defaults:
# 永久链接中各部分的默认值
pretty_urls:
# 改写 permalink 的值来美化 URL
trailing_index: true
# 是否在永久链接中保留尾部的 index.html,设置为 false 时去除
trailing_html: true
# 是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)



# 文件目录
# https://hexo.io/zh-cn/docs/configuration#%E7%9B%AE%E5%BD%95
# --------------------------------------

source_dir: source
# 资源文件夹,这个文件夹用来存放内容
public_dir: public
# 公共文件夹,这个文件夹用于存放生成的站点文件
tag_dir: tags
# 标签文件夹
archive_dir: archives
# 归档文件夹
category_dir: categories
# 分类文件夹
code_dir: downloads/code
# Include code 文件夹,source_dir 下的子目录
i18n_dir: :lang
# 国际化(i18n)文件夹
skip_render:
# 跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中



# 文章
# https://hexo.io/zh-cn/docs/configuration#%E6%96%87%E7%AB%A0
# --------------------------------------
new_post_name: :title.md
# 新文章的文件名称
default_layout: post
# 预设布局
titlecase: false
# 把标题转换为 title case
external_link:
# 在新标签中打开链接
enable: true
# 在新标签中打开链接
field: site
# 对整个网站(site)生效或仅对文章(post)生效
exclude: ''
# 需要排除的域名。主域名和子域名如 www 需分别配置
filename_case: 0
# 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false
# 显示草稿
post_asset_folder: false
# 启动 Asset 文件夹
relative_link: false
# 把链接改为与根目录的相对位址
future: false
# 显示未来的文章 默认打开true
highlight:
# 代码块的设置 https://hexo.io/zh-cn/docs/syntax-highlight#Highlight-js
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
# 代码块的设置 https://hexo.io/zh-cn/docs/syntax-highlight#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

# 分类 & 标签
default_category: uncategorized
# 默认分类
category_map:
# 分类别名
tag_map:
# 标签别名



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

meta_generator: true
# 插入头部元数据元素



# 日期 / 时间格式
# --------------------------------------

date_format: YYYY-MM-DD
# 日期格式
time_format: HH:mm:ss
# 时间格式
updated_option: 'mtime'
# 当 Front Matter 中没有指定 updated 时 updated 的取值
# mtime: 使用文件的最后修改时间
# date: 使用 date 作为 updated 的值。可被用于 Git 工作流之中,因为使用 Git 管理站点时,文件的最后修改日期常常会发生改变
# empty: 直接删除 updated。使用这一选项可能会导致大部分主题和插件无法正常工作



# 分页
# --------------------------------------

per_page: 10
# 每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page
# 分页目录



# 包括或不包括目录和文件
# https://hexo.io/zh-cn/docs/configuration#%E5%8C%85%E6%8B%AC%E6%88%96%E4%B8%8D%E5%8C%85%E6%8B%AC%E7%9B%AE%E5%BD%95%E5%92%8C%E6%96%87%E4%BB%B6
# --------------------------------------

include:
# Hexo 默认会不包括 source/ 下的文件和文件夹(包括名称以下划线和 . 开头的文件和文件夹,Hexo 的 _posts 和 _data 等目录除外)。通过设置此字段将使 Hexo 处理他们并将它们复制到 source 目录下
exclude:
# Hexo 不包括 source/ 下的这些文件和目录
ignore:
# Hexo 会忽略整个 Hexo 项目下的这些文件夹或文件



# 选用主题
# --------------------------------------

theme: butterfly
# 当前主题名称。值为false时禁用主题



# 部署
# https://github.com/hexojs/hexo-deployer-git
# https://hexo.io/zh-cn/docs/one-command-deployment
# --------------------------------------

deploy:
- type: git
repo: git@github.com:yife68/yife68.github.io.git
branch: master
message: upload
- type: baidu_url_submitter



# Artitalk 说说功能
# https://artitalk.js.org/
# https://www.npmjs.com/package/hexo-butterfly-artitalk
# https://artitalk.js.org/doc.html#%F0%9F%8C%88-leancloud-%E7%9A%84%E7%9B%B8%E5%85%B3%E5%87%86%E5%A4%87
# --------------------------------------

artitalk:
enable: true
appId: # 填自己的AppID
# LeanCloud 創建的應用中的 AppID
appKey: # 填自己的AppKEY
# LeanCloud 創建的應用中的 AppKEY
path: daily
# Artitalk 的路徑名稱(默認為 artitalk,生成的頁面為 artitalk/index.html)
js:
# 更換 Artitalk 的 js CDN(默認為 https://cdn.jsdelivr.net/npm/artitalk)
option:
# Artitalk 需要的額外配置
front_matter:
# Artitalk 頁面的 front_matter 配置



# RSS订阅
# https://github.com/hexojs/hexo-generator-feed
# --------------------------------------

feed:
type: atom
# 类型
path: atom.xml
# 路径。当指定两种类型时,路径必须遵循类型值的顺序。(默认:atom.xml / rss2.xml)
limit: false
# 提要中的最大帖子数(使用 0 或 false 显示所有帖子)



# 外链 nofollow
# https://github.com/hexojs/hexo-filter-nofollow
# 自动为所有外部链接添加 nofollow 属性
# --------------------------------------

nofollow:
enable: true
field: site
# 'post' - 仅向帖子内容中的外部链接添加 nofollow 属性;'site' - 为整个站点的外部链接添加 nofollow 属性
exclude:
# 排除主机名
# - 'meuicat.com'



# 站点地图
# https://github.com/hexojs/hexo-generator-sitemap
# --------------------------------------

sitemap:
path:
# 站点地图路径(默认值:sitemap.xml)
- sitemap.xml
- sitemap.txt
rel: false
# 将relsitemap添加到网站的标题(默认值:false)
tags: true
# 添加网站标签
categories: true
# 添加网站分类



# 百度站点地图
# https://github.com/coneycode/hexo-generator-baidu-sitemap
# --------------------------------------

baidusitemap:
path: baidusitemap.xml
# 站点地图路径。(默认值:baidusitemap.xml)



# 文章加密
# https://github.com/D0n9X1n/hexo-blog-encrypt
# --------------------------------------

encrypt:
abstract: 内容已加密,需要数字密码查看~
message: 请输入六位数字密码查看~
tags:
- {name: tagName, password: 密码A}
- {name: tagName, password: 密码B}
template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
wrong_pass_message: Sorry, 不是这个密码哦, 再试试吧..
wrong_hash_message: Sorry, 这个文章不能被校验, 不过您还是能看看解密后的内容.



# 设置百度主动推送
# https://github.com/huiwang/hexo-baidu-url-submit
# --------------------------------------

baidu_url_submit:
count: 200
# 提交数量;代表提交最新的 N 个链接
host: meuicat.com
# 在百度站长平台中注册的域名,这个改为你自己的域名
token: # 填自己的秘钥
# 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
path: baidu_urls.txt
# 文本文档的地址, 新链接会保存在此文本文档里,这个默认

_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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
# 图标列表http://www.wapadd.cn/icons/awesome/index.htm
# V6图标:https://fontawesome.com/v6/icons/



# 导航菜单
# --------------------------------------

menu:
合集||iconfont icat-square||:
归档: /archives/ ||
标签: /tags/ ||
分类: /categories/ ||
小玩意||iconfont icat-inbox||:
广播剧小站: https://radio.meuicat.com/ ||
Capucino: https://Capucino.meuicat.com/ ||
KabuChino: https://KabuChino.meuicat.com/ ||
iCat运行状态: https://uptime.meuicat.com/ ||
我の音乐馆: https://music.meuicat.com/ ||
即刻说: /essay/ || iconfont icat-essay
相册集: /photos/ || iconfont icat-photos
足迹阁: /collect/ || iconfont icat-collect
传送门: /link/ || iconfont icat-link
关于: /about/ || iconfont icat-about



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

nav:
logo:
# 网站的 logo,支持图片,直接填入图片链接
display_title: true
# 顶部菜单栏是否显示网站标题 true/false
fixed: false
# 是否固定状态栏 true/false



# 代码高亮主题
# --------------------------------------

highlight_theme: mac
# 代码主题 darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true
# 复制按钮 true/false
highlight_lang: true
# 显示代码使用的语言
highlight_shrink: false
# true: 折叠代码块 / false: 默认展开代码块 | none: 展开并取消折叠按钮
highlight_height_limit: 200
# 可配置代码高度限制,超出的部分会隐藏,并显示展开按钮
code_word_wrap: true
# 代码超出页面自动换行



# 复制相关配置
# 可配置网站是否可以复制、复制的内容是否添加版权信息
# --------------------------------------

copy:
enable: true
# 是否开启网站复制权限
copyright:
# 复制的内容后面加上版权信息
enable: true
# 是否开启复制版权信息添加
limit_count: 30
# 字数限制,当复制文字大于这个字数限制时,将在复制的内容后面加上版权信息



# 社交图标
# 右侧社交图标设置
# --------------------------------------

social:
iconfont icat-qq: http://wpa.qq.com/msgrd?v=3&uin=2714344056 || 企鹅
iconfont icat-tg: https://t.me/yife68 || TG
iconfont icat-rss: https://meuicat.com/atom.xml || RSS



# 搜索系统
# see https://butterfly.js.org/posts/ceeb73f/#搜索系統
# --------------------------------------

algolia_search:
enable: false
hits:
per_page: 6
# 每页显示的数量
# Algolia 二选一
# https://github.com/oncletom/hexo-algolia
# https://github.com/LouisBarranqueiro/hexo-algoliasearch
# 如果你使用 hexo-algoliasearch,请记得配置 fields 参数的 title, permalink 和 content

local_search:
enable: true
preload: true
# 预加载,开启后,进入网页后会自动加载搜索文件。关闭时,只有点击搜索按钮后,才会加载搜索文件
CDN:
# 搜索文件的 CDN 地址(默认使用的本地链接)
# 本地搜索
# https://github.com/PaicHyperionDev/hexo-generator-search

docsearch:
enable: false
appId:
# 你的 Algolia 应用 ID
apiKey:
# 你的 Algolia 搜索 API key
indexName:
# 你的 Algolia index name
option:
# 其余的 docsearch 配置
# https://docsearch.algolia.com/docs/api/
# DocSearch
# https://docsearch.algolia.com/
# DocSearch 是另一款由 algolia 提供的搜索服务,具体申请和使用请查看 DocSearch 文档



# Math 数学
# 不要在标题里使用 mathjax 语法,toc 目录不一定能正确显示 mathjax,可能显示 mathjax 代码
# 不要在标题里使用 KaTeX 语法,toc 目录不能正确显示 KaTeX
# --------------------------------------

mathjax:
enable: false
# true 表示每一页都加载mathjax.js
# false 需要时加载,须在使用的Markdown Front-matter 加上 mathjax: true
per_page: false
# https://www.npmjs.com/package/hexo-renderer-kramed
# 如果 per_page 设为 true,则每一页都会加载 Mathjax 服务。设为 false,则需要在文章 Front-matter 添加 mathjax: true,对应的文章才会加载 Mathjax 服务

katex:
enable: false
# true 表示每一页都加载katex.js
# false 需要时加载,须在使用的Markdown Front-matter 加上 katex: true
per_page: false
hide_scrollbar: true
# https://katex.org/docs/options.html
# https://github.com/hexojs/hexo-renderer-markdown-it
# 首先禁用MathJax(如果你配置过 MathJax 的话),然后修改你的主题配置文件以便加载katex.min.css:
# 你不需要添加 katex.min.js 来渲染数学方程。相应的你需要卸载你之前的 hexo 的 markdown 渲染器,然后安装其它插件
# npm un hexo-renderer-marked --save # 如果有安装这个的话,卸载
# npm un hexo-renderer-kramed --save # 如果有安装这个的话,卸载
# npm i hexo-renderer-markdown-it --save # 需要安装这个渲染插件
# npm install katex @renbaoshuo/markdown-it-katex #需要安装这个katex插件



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

favicon: /media/favicon.ico
# ico 网站图标

avatar:
img: /media/avatar.jpg
effect: false
# 头像一直转圈
# 头像

disable_top_img: false
# 顶部图 显示/false 不显示/true

index_img: https://s1.ax1x.com/2023/03/17/ppGw1m9.jpg
# 主页的 top_img

default_top_img: https://s1.ax1x.com/2023/03/17/ppG0eHA.jpg
# 默认的 top_img,当页面的 top_img 没有配置时,会显示 default_top_img

archive_img: https://s1.ax1x.com/2023/03/17/ppG0eHA.jpg
# 归档页面的 top_img

tag_img: https://s1.ax1x.com/2023/03/17/ppG0eHA.jpg
# tag 子页面 的 默认 top_img

tag_per_img:
# tag 子页面的 top_img,可配置每个 tag 的 top_img
# - tag name: xxxxx

category_img: https://s1.ax1x.com/2023/03/17/ppG0eHA.jpg
# category 子页面 的 默认 top_img

category_per_img:
# category 子页面的 top_img,可配置每个 category 的 top_img
# - category name: xxxxx

cover:
# 是否文章封面
index_enable: true
# 主页是否显示文章封面图
aside_enable: true
# 侧栏是否显示文章封面图
archives_enable: true
# 归档页面是否显示文章封面图
position: both
# 主页卡片文章封面的显示位置 - left:全部显示在左边 - right:全部显示在右边 - both:封面位置以左右左右轮流显示
default_cover:
# 当没有设置cover时,默认的封面显示
# - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

# Replace Broken Images (替換無法顯示的圖片)
error_img:
flink: /img/friend_404.gif
post_page: /img/404.jpg



# 404页面
# --------------------------------------

error_404:
enable: true
subtitle: '请尝试站内搜索寻找文章 ~'
background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png



# 文章meta显示
post_meta:
page:
# 主页文章
date_type: created
# created / updated / both 主页文章日期是创建日或者更新日或都显示
date_format: date
# date / relative 显示日期还是相对日期
categories: true
# true / false 主页是否显示分类
tags: false
# true or false 主页是否显示标签
label: true
# true or false 显示描述性文字
post:
# 文章页
date_type: created
# created / updated / both 文章页日期是创建日或者更新日或都显示
date_format: date
# date / relative 显示日期还是相对日期
categories: true
# true or false 文章页是否显示分类
tags: true
# true or false 文章页是否显示标签
label: true
# true or false 显示描述性文字

# 字数统计
# see https://butterfly.js.org/posts/ceeb73f/#字數統計
# --------------------------------------

wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true



# 主页文章节选(自动节选和文章页description)
# 1:description: 只显示description
# 2:both: 优先选择description,如果没有配置description,则显示自动节选的内容
# 3:auto_excerpt:只显示自动节选
# false: 不显示文章内容
# --------------------------------------

index_post_content:
method: 2
length: 500
# 如果将method设置为2或3,则需要配置长度



# 页面锚点
# 开启页面锚点后,当你在进行滚动时,页面链接会根据标题ID进行替换
# --------------------------------------

anchor:
button:
enable: false
always_show: false
icon: # the unicode value of Font Awesome icon, such as '\3423'
auto_update: false # when you scroll in post, the URL will update according to header id.



# 目录
# --------------------------------------

toc:
post: true
# 文章页是否显示 TOC
page: false
# 普通页面是否显示 TOC
number: true
# 是否显示章节数
expand: true
# 是否展开 TOC
style_simple: false
# 简洁模式(侧边栏只显示 TOC, 只对文章页有效 )
scroll_percent: true
# 是否显示滚动进度百分比



# 文章版权
# --------------------------------------

post_copyright:
enable: true
decode: false
# 由于Hexo 4.1开始,默认对网址进行解码,以至于如果是中文网址,会被解码,可设置decode: true来显示中文网址
author_href: https://github.com/yife68
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/



# 文章打赏
# --------------------------------------

reward:
enable: true
QR_code:
- img: https://yife68.gitee.io/icat-pic-2022/03/19/wechat.jpg
# link:
text: 微信
- img: https://yife68.gitee.io/icat-pic-2022/03/19/alipay.jpg
# link:
text: 支付宝



# 文章编辑按钮
# 在文章标题旁边显示一个编辑按钮,点击会跳转到对应的链接去
# --------------------------------------

post_edit:
enable: false
# url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
# For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
url:



# 相关文章
# --------------------------------------

related_post:
enable: true
limit: 6
# 显示推荐文章数目
date_type: created
# created / updated 文章日期显示创建日或者更新日

photofigcaption: true
# 可开启图片Figcaption描述文字显示
# 优先显示图片的 title 属性,然后是 alt 属性



# 文章分页按钮
# false:关闭分页按钮 / 1:下一篇显示的是旧文章 / 2:下一篇显示的是新文章
# --------------------------------------

post_pagination: 1



# 文章过期提醒
# --------------------------------------

noticeOutdate:
enable: false
style: flat
# 样式,带图标或纯色底 simple/flat
limit_day: 500
# 距离更新时间多少天才显示文章过期提醒
position: top
# 提示在文字顶部或底部 top / bottom
message_prev: Hey~这是
# 天数前的文字
message_next: 天前的文章了,可能会过时哦~
# 天数后的文字



# 分享功能
# 只能选择一个分享服务商
# --------------------------------------

addThis:
enable: false
pubid:
# 你的pub-id
# https://www.addthis.com/
# 访问 AddThis 官网,找到你的 pub-id

sharejs:
enable: true
sites: twitter,wechat,weibo,qq
# 设置分享平台,可选:facebook,twitter,wechat,weibo,qq
# https://github.com/overtrue/share.js

addtoany:
enable: false
item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link
# https://www.addtoany.com/



# 评论设置
# https://butterfly.js.org/posts/ceeb73f/#%E8%A9%95%E8%AB%96
# --------------------------------------

comments:
use:
# 使用的评论(请注意,最多支持两个,如果不需要请留空)
# 注意:双评论不能是 Disqus 和 Disqusjs 一起,由于其共用同一个 ID,会出错
# Disqus / Disqusjs / Livere / Gitalk / Valine / Waline / Utterances / Facebook Comments / Twikoo / Giscus/ Remark42 / Artalk
text: true
# 是否显示评论服务商的名字
lazyload: false
# 是否为评论开启lazyload,开启后,只有滚动到评论位置时才会加载评论所需要的资源(开启 lazyload 后,评论数将不显示)
count: false
# 是否在文章顶部显示评论数
# livere、Giscus 和 utterances 不支持评论数显示
card_post_count: false
# 是否在首页文章卡片显示评论数
# gitalk、livere 、Giscus 和 utterances 不支持评论数显示

disqus:
shortname:
apikey:
# 对于最新的评论小部件
# https://disqus.com/
# 注册 disqus,配置你自己的 disqus,然后在Butterfly里开启它

disqusjs:
shortname:
apikey:
option:
# https://github.com/SukkaW/DisqusJS
# 与Disqus一样,但由于Disqus在中国大陆无法访问, 使用Disqusjs可以在无法访问Disqus时显示评论。具体可参考Disqusjs。

livere:
uid:
# https://www.livere.com/
# 注册来必力,配置你自己的来必力设置,然后在Butterfly里开启它

gitalk:
client_id:
client_secret:
repo:
owner:
admin:
option:
# https://github.com/gitalk/gitalk
# 遵循 gitalk的指示去获取你的 github Oauth 应用的 client id 和 secret 值。以及查看它的相关配置説明

valine:
appId:
appKey:
avatar: monsterid
# 风格样式 https://valine.js.org/#/avatar
serverURLs:
# 此配置适用于国内自定义域名用户,海外版本将自动检测(无需手动填写)
bg:
# valine 背景
visitor: false
option:
# https://valine.js.org
# 遵循 Valine的指示去配置你的 LeanCloud 应用。以及查看相应的配置説明
# Valine于 v1.4.5 开始支持自定义表情,如果你需要自行配置,请在emojiCDN配置表情 CDN
# 开启 visitor 后,文章页的访问人数将改为 Valine 提供,而不是 不蒜子

waline:
serverURL:
# Waline 服务器地址url
bg:
# waline 背景
pageview: false
option:
# https://waline.js.org/
# Waline - 一款从 Valine 衍生的带后端评论系统。可以将 Waline 等价成 With backend Valine
# 开启 pageview 后,文章页的访问人数将改为 Waline 提供,而不是 不蒜子

utterances:
repo:
# 可选 pathname/url/title/og:title
issue_term: pathname
# 可选 github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
light_theme: github-light
dark_theme: photon-dark
# https://utteranc.es/
# 与Gitalk一样,基于 GitHub issues 的评论工具。相对于Gitalk,其相对需要权限较少。具体配置可参考Utterances。

facebook_comments:
app_id:
user_id:
pageSize: 10
# 要显示的评论数
order_by: social
# social / time / reverse_time
lang: zh_TW
# 语言 en_US / zh_CN / zh_TW
# https://developers.facebook.com/docs/plugins/comments/
# Facebook Comments是Facebook提供的评论插件,需要登陆Facebook才可评论

twikoo:
envId:
# 环境 ID
region:
# 环境地域,默认为 ap-shanghai,如果您的环境地域不是上海,需传此参数
visitor: false
# 是否显示文章閲读数
option:
# 可选配置
# https://github.com/imaegoo/twikoo
# Twikoo 是一个简洁、安全、无后端的静态网站评论系统,基于腾讯云开发
# 你只需要把获取到的 环境ID (envId) 填写到配置上去就行
# 开启 visitor 后,文章页的访问人数将改为 Twikoo 提供,而不是 不蒜子

giscus:
repo:
repo_id:
category_id:
theme:
light: light
dark: dark
option:
# https://giscus.app/
# 一个基于 GitHub Discussions 的评论

remark42:
host: # Your Host URL
siteId: # Your Site ID
option:
# https://remark42.com/docs/configuration/frontend/
# remark42 是一款只支持私有部署的评论

artalk:
server:
site:
visitor: false
option:
# https://artalk.js.org/guide/frontend/config.html
# artalk 是一款只支持私有部署的评论



# 在綫聊天设置
# --------------------------------------

chat_btn: false
# 它将在网站右下角创建一个按钮,并隐藏源按钮

chat_hide_show: false
# 为了不影响访客的体验,主题提供一个chat_hide_show配置
# 设为true后,向上滚动时显示原始聊天按钮,向下滚动时隐藏该按钮

chatra:
enable: false
id:
# https://chatra.io/
# 打开chatra并注册账号,在 Preferences 中找到 Public key

tidio:
enable: false
public_key:
# https://www.tidio.com/
# 打开tidio并注册账号,在 Preferences > Developer 中找到 Public key

daovoice:
enable: false
app_id:
# http://dashboard.daovoice.io/app
# 打开daovoice和注册帐号,找到你的app id

gitter:
enable: false
room:
# https://gitter.im/
# 打开Gitter和注册账号,创建一个 community 或者 room ,复制名称到设置去

crisp:
enable: false
website_id:
# https://crisp.chat/en/
# 打开crisp并注册帐号,找到需要的网站ID

messenger:
enable: false
pageID:
lang: zh_TW
# 语言 en_US / zh_CN / zh_TW
# https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/
# messenger 为 Facebook 旗下的聊天服务



# 页脚设置
# --------------------------------------

footer:
owner:
enable: true
since: 2021
custom_text: <p><a style="margin-inline:5px" target="_blank" href="https://hexo.io/" rel="external nofollow noreferrer"><img src="https://yife68.gitee.io/icat-pic-2022/04/22/4.svg" data-lazy-src="https://yife68.gitee.io/icat-pic-2022/04/22/4.svg" title="框架为Hexo 6.3.0" data-ll-status="loaded" class="entered loaded"></a><a style="margin-inline:5px" target="_blank" href="https://github.com/jerryc127/hexo-theme-butterfly/" rel="external nofollow noreferrer"><img src="https://yife68.gitee.io/icat-pic-2022/04/22/5.svg" data-lazy-src="https://yife68.gitee.io/icat-pic-2022/04/22/5.svg" title="主题采用Butterfly 4.7.0" data-ll-status="loaded" class="entered loaded"></a><a style="margin-inline:5px" target="_blank" href="https://www.dogecloud.com/" rel="external nofollow noreferrer"><img src="https://yife68.gitee.io/icat-pic-2023/blog/1.svg" data-lazy-src="https://yife68.gitee.io/icat-pic-2023/blog/1.svg" title="本站使用多吉云为静态资源提供CDN加速" data-ll-status="loaded" class="entered loaded"></a><div class="youpai" style="margin:auto;height:25px;text-align:center"><span style="font-size:14px;">本网站由</span><a href="https://gitee.com/"><img src="https://yife68.gitee.io/icat-pic-2022/04/22/7.png" style="vertical-align:middle;"></a><span style="font-size:14px;">提供图源服务</span></div></p><div class="icp"><a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/"><img class="icp-icon" src="https://yife68.gitee.io/icat-pic-2022/04/22/8.png"><span>粤ICP备2022035648号</span></a>&nbsp&nbsp|&nbsp<img class="icp-icon" src="https://icp.gov.moe/favicon.ico"><a href="https://icp.gov.moe/?keyword=20227060" target="_blank">萌ICP备20227060号</a></div>
copyright: false
# 主题和框架的版权



# 网站分析统计
# --------------------------------------

baidu_analytics: # 自己的id
# 百度统计
# https://tongji.baidu.com/web/welcome/login

google_analytics: # 自己的id
# 谷歌分析
# https://analytics.google.com/analytics/web/

cloudflare_analytics:
# Cloudflare 分析
# https://www.cloudflare.com/zh-tw/web-analytics/

microsoft_clarity: # 自己的id
# 微软Clarity
# https://clarity.microsoft.com/



# 广告
# --------------------------------------

google_adsense:
# 谷歌广告
enable: false
auto_ads: true
js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
client:
# 填入个人识别码
enable_page_level_ads: true

# ad:
# index:
# 主页文章列表中
# aside:
# 侧边栏
# post:
# 文章底部
# 三个位置可供插入广告,分别为主页文章(每三篇文章出现广告)/aside公告之后/文章页打赏之后;把html代码填写到对应的位置
# index: <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="xxxxxxxxxxxx" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({})</script>



# 网站验证
# --------------------------------------

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



# 美化/特效
# 可以修改大部分UI颜色
# 颜色值必须被双引号包裹,就像"#000"而不是#000。否则将会在构建的时候报错!
# --------------------------------------

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

# 主页top_img显示大小
# 默认top_img全屏,site_info在中间
# 使用默认, 都无需填写(建议默认)
# --------------------------------------

index_site_info_top:
# 主页标题距离顶部距离 例如 300px/300em/300rem/10%
index_top_img_height:
# 主页top_img高度 例如 300px/300em/300rem 不能使用百分比

# The user interface setting of category and tag page (category和tag頁的UI設置)
# index - same as Homepage UI (index 值代表 UI將與首頁的UI一樣)
# default - same as archives UI 默認跟archives頁面UI一樣
category_ui: # 留空或 index
tag_ui: # 留空或 index

background: 'linear-gradient(90deg, rgba(247, 149, 51, 0.1) 0, rgba(243, 112, 85, 0.1) 15%, rgba(239, 78, 123, 0.1) 30%, rgba(161, 102, 171, 0.1) 44%, rgba(80, 115, 184, 0.1) 58%, rgba(16, 152, 173, 0.1) 72%, rgba(7, 179, 155, 0.1) 86%, rgba(109, 186, 130, 0.1) 100%)'
# 网站背景
# 图片格式 url(http://xxxxxx.com/xxx.jpg)
# 颜色(HEX值/RGB值/顔色单词/渐变色)
# 留空 不显示背景

footer_bg: false
# footer是否显示图片背景(与top_img一致)

rightside-bottom:
# 右下角按钮距离底部的距离(单位为:px)

enter_transitions: true
# 网站载入效果



# 背景特效
# --------------------------------------

canvas_ribbon:
enable: false
size: 150
alpha: 0.6
zIndex: -1
click_to_change: false
# 设置是否每次点击都更换綵带
mobile: false
# false:手机端不显示 true:手机端显示
# 静态丝带
# https://github.com/hustcc/ribbon.js

canvas_fluttering_ribbon:
enable: false
mobile: false
# false:手机端不显示 true:手机端显示
# 动态丝带

canvas_nest:
enable: false
color: '0,0,255'
# 线条颜色,默认值:“0,0,0”;RGB值:(R、G、B)。(注意:使用“,”分隔。)
opacity: 0.7
# 线条的不透明度(0~1),默认值:0.5
zIndex: -1
# 背景的z-index属性,默认值:-1
count: 99
# 行数,默认值:99
mobile: false
# false:手机端不显示 true:手机端显示
# 多结构
# https://github.com/hustcc/canvas-nest.js



# 打字效果
# https://github.com/disjukr/activate-power-mode
# --------------------------------------

activate_power_mode:
enable: false
colorful: true
# 冒光特效
shake: false
# 抖动特效
mobile: false



# 鼠标点击效果
# --------------------------------------

fireworks:
enable: false
zIndex: 9999
# 建议只在 -1 至 9999 间选;-1:代表烟火效果在底部;9999:代表烟火效果在前面
mobile: false
# false:手机端不显示 true:手机端显示
# 烟花效果

click_heart:
enable: false
mobile: false
# false:手机端不显示 true:手机端显示
# 爱心效果

ClickShowText:
enable: false
text:
# - I
# - LOVE
# - YOU
fontSize: 15px
random: false
# 文字随机显示
mobile: false
# false:手机端不显示 true:手机端显示
# 文字效果
# 点击出现文字,文字可自行修改



# 网站默认颜色
# light (default) / dark
# --------------------------------------

display_mode: light



# 页面美化
# 会改变ol、ul、h1-h5的样式
# --------------------------------------

beautify:
enable: true
field: post
# post:只在文章页生效;site:在全站生效
title-prefix-icon: '\f08d'
title-prefix-icon-color: '#F47466'



# 自定义字体和字体大小
# 非必要不要修改
# --------------------------------------

font:
global-font-size:
code-font-size:
font-family:
code-font-family:
# 全局字体

blog_title_font:
font_link:
font-family:
# Blog 标题字体
# 左上角网站名字 主页居中网站名字



# hr水平分割线的图标设置
# --------------------------------------

hr_icon:
enable: true
icon:
# the unicode value of Font Awesome icon, such as '\3423'
icon-top:



# 网站副标题
# --------------------------------------

subtitle:
enable: true
effect: true
# 打字效果
loop: true
# 循环打字
source: false
# source 调用第三方服务
# source: false 关闭调用
# source: 1 调用一言网的一句话(简体) https://hitokoto.cn/
# source: 2 调用一句网(简体) http://yijuzhan.com/
# source: 3 调用今日诗词(简体) https://www.jinrishici.com/
# subtitle 会先显示 source , 再显示 sub 的内容
sub:
- 知其不可奈何而安之若命
- 出现在别人的生活里要像一份礼物
- 山高路远 看世界 也找自己
- 发泄后的自醒不能用来赎罪
- 正是因为那些暗淡浑浊的过去 才成就了此刻闪闪发光的自己
- 参天之木,必有其根;怀山之水必有其源
- 遗憾的是我们从来没有被坚定选择过
- 好景不会太长久,后来渐渐都明白了,遗憾也是
- 人的一生,总是在替代和被替代中进行
- 真的很喜欢说走就走,既浪漫又踏实
- It’s better to be alone than to be with someone you’re not happy to be with.
- I’ll think of you every step of the way.
- There are only the pursued, the pursuing, the busy and the tired.
- Moonlight city. You just couldn't see an end to it.



# 页面加载动画 preloader
# --------------------------------------

preloader:
enable: true
source: 1
# source;1. 开屏加载;2. 顶部进度
# pace theme (see https://codebyzach.github.io/pace/)
pace_css_url:



# 侧边排版
# 可自行决定哪个项目需要显示,可决定位置,也可以设置不显示侧边栏
# --------------------------------------

aside:
enable: true
hide: false
button: false
# 首页关闭侧边栏设置按钮
mobile: true
# 在手机上显示
position: right
# 侧边栏位置 left / right

display:
# 个人卡片 - 文章 / 标签 /分类
archive: true
tag: true
category: true

card_author:
# 侧边栏个人信息
enable: true
description: 足够优秀 再大方拥有.
# 个人卡片 - 座右铭
button:
enable: true
icon: fab fa-github
text: GitHub contact me
link: https://github.com/yife68

card_announcement:
# 公告卡片
enable: true
content: Hello, Welcome to iCat.</br>My sharing blog.</br></br><div><a href="https://www.foreverblog.cn/" target="_blank" rel="external nofollow noopener noreferrer"><img src="https://img.foreverblog.cn/logo_en_default.png" alt="foreverblog" style="width:auto;height:16px" data-ll-status="loading" class="entered loading"></a></div>

card_recent_post:
# 最新文章
enable: false
limit: 5
# 显示的数量;如果设置为0,将显示所有
sort: date
# 日期或更新时间
sort_order:
# 非必要不修改

card_categories:
# 分类
enable: true
limit: 6
# 显示的数量;如果设置为0,将显示所有
expand: none
# 放大;none - 随机 / true - 开 / false - 关
sort_order:
# 非必要不修改

card_tags:
# 标签
enable: true
limit: 15
# 显示的数量;如果设置为0,将显示所有
color: true
# 侧边栏标签彩色显示 true / false
orderby: random
# 排序;random - 随机 / name - 名称 / length - 长度
order: 1
# 升降排序;1 - 升序 / -1 - 降序
sort_order:
# 非必要不修改

card_archives:
# 归档
enable: true
type: monthly
# 类型按年或月 yearly / monthly
format: YYYY年 MM月
# 格式
order: -1
# 升降排序;1 - 升序 / -1 - 降序
limit: 6
# 显示的数量;如果设置为0,将显示所有
sort_order:
# 非必要不修改

card_webinfo:
# 网站信息
enable: true
post_count: true
last_push_date: true
sort_order:
# 非必要不修改



# 访问人数 busuanzi (UV 和 PV)
# --------------------------------------

busuanzi:
site_uv: true
# 侧边栏本站访客数
site_pv: true
# 侧边栏本站总访问量
page_pv: false
# 文章页阅读量



# 运行时间
# 格式: "月/日/年 时间" 也可以写成 "年/月/日 时间"
# --------------------------------------

runtimeshow:
enable: true
publish_date: 2021/10/15



# 最新评论
# 在侧边栏显示最新评论板块
# --------------------------------------

newest_comments:
enable: false
sort_order:
limit: 6
# 显示的数量
storage: 10
# 设置缓存时间,单位:分钟
avatar: true
# 是否显示头像



# 右下角按钮
# --------------------------------------

translate:
# 简繁转换
enable: true
default: 繁
# 默认按钮显示文字(网站是简体,应设置为'default: 繁')
defaultEncoding: 2
# 网站默认语言,1: 繁体中文, 2: 简体中文
translateDelay: 0
# 延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
msgToTraditionalChinese: '繁'
# 当文字是简体时,按钮显示的文字
msgToSimplifiedChinese: '簡'
# 当文字是繁体时,按钮显示的文字

readmode: true
# 阅读模式

darkmode:
# 夜间模式
enable: true
button: true
# dark mode和 light mode切换按钮
autoChangeMode: 2
# 1 跟随系统而变化,不支持的浏览器/系统将按照时间晚上6点到早上6点之间切换为 dark mode
# 2 只按照时间 晚上6点到早上6点之间切换为 dark mode,其余时间为light mode
# false 取消自动切换

rightside_scroll_percent: true
# 滚动状态百分比

rightside_item_order:
# 按钮排序,非必要請不要修改
enable: true
hide: readmode,translate,hideAside
show: toc,darkmode,chat,comment



# 图片大图查看模式
# 只能开启一个,或不开启
# --------------------------------------

medium_zoom: false
# https://github.com/francoischalifour/medium-zoom

fancybox: true
# http://fancyapps.com/fancybox/3/



# mermaid
# see https://github.com/mermaid-js/mermaid
# Mermaid 是一个基于 Javascript 的图表绘制工具,通过解析类 Markdown 的文本语法来实现图表的创建和动态修改
# --------------------------------------

mermaid:
enable: false
# built-in themes: default/forest/dark/neutral
theme:
light: default
dark: dark



# Not标签
# https://butterfly.js.org/posts/4aa8abbe/#Note-Bootstrap-Callout
# --------------------------------------

note:
style: flat
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat 带有背景的平面标注样式,如 Mozilla 或 StackOverflow
# - disabled 禁用注释标签的所有CSS样式导入
icons: true
border_radius: 3
# icons和light_bg_offset只对方法一生效
light_bg_offset: 0
# 对于现代和平面样式 (modern: -12 | 12; flat: -18 | 6)
# 偏移也应用于标签标记变量。此选项可用于禁用的注释标记



# Pjax
# https://github.com/MoOx/pjax
# 当用户点击链接,通过ajax更新页面需要变化的部分,然后使用HTML5的pushState修改浏览器的URL地址;这样可以不用重复加载相同的资源(css/js), 从而提升网页的加载速度
# 使用pjax后,一些自己DIY的js可能会无效,跳转页面时需要重新调用;使用pjax后,一些个别页面加载的js/css,将会改为所有页面都加载
# --------------------------------------
pjax:
enable: true
exclude:
# - xxxx
# - xxxx



# Inject the css and script (aplayer/meting)
# --------------------------------------

aplayerInject:
enable: false
per_page: true



# Snackbar 弹窗
# https://github.com/polonel/SnackBar
# --------------------------------------

snackbar:
enable: true
position: bottom-center
# 弹窗位置可选 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
bg_light: '#49b1f5'
# light mode时弹窗背景
bg_dark: '#1f1f1f'
# dark mode时弹窗背景



# 预加载
# 当鼠标悬停到链接上超过 65 毫秒时,Instantpage 会对该链接进行预加载,可以提升访问速度
# https://instant.page/
# --------------------------------------

instantpage: true



# Pangu
# https://github.com/vinta/pangu.js
# 自动在网页中所有的中文字和半形的英文、数字、符号之间插入空格
# --------------------------------------

pangu:
enable: false
field: site # site/post



# Lazyload (圖片懶加載)
# https://github.com/verlok/vanilla-lazyload

lazyload:
enable: false
field: site
# 整站或文章 site / post
placeholder:
blur: false



# PWA
# https://github.com/JLHwung/hexo-offline
# https://butterfly.js.org/posts/ceeb73f/#PWA
# --------------------------------------

# pwa:
# enable: false
# manifest: /pwa/manifest.json
# apple_touch_icon: /pwa/apple-touch-icon.png
# favicon_32_32: /pwa/32.png
# favicon_16_16: /pwa/16.png
# mask_icon: /pwa/safari-pinned-tab.svg



# Open Graph
# https://developers.facebook.com/docs/sharing/webmasters/
# 在 head 里增加一些 meta 资料,例如缩略图、标题、时间等等。当你分享网页到一些平台时,平台会读取 Open Graph 的内容,展示缩略图,标题等等信息
# --------------------------------------

Open_Graph_meta:
enable: true
option:
# twitter_card:
# twitter_image:
# twitter_id:
# twitter_site:
# google_plus:
# fb_admins:
# fb_app_id:



# CSS 前缀
# 有些 CSS 并不是所有浏览器都支持,需要增加对应的前缀才会生效
# 开启 css_prefix 后,会自动为一些 CSS 增加前缀。(会增加 20%的体积)
# --------------------------------------

css_prefix: true



# Inject
# 如想添加额外的 js / css / meta 等等东西,可以在Inject里添加,插入代码到头部 </head> 之前 和 底部 </body> 之前
# --------------------------------------

inject:
head:
- <link rel="stylesheet" href="/css/icat.css">
- <link rel="stylesheet" href="https://cdn3.codesign.qq.com/icons/XMx86jzlQw0brz3/latest/iconfont.css"> # 腾讯iconfont - 图标库
- <link rel="stylesheet" href="/css/essay_page/essay_page.css"> # 即刻短文样式
- <link rel="stylesheet" href="/css/rightmenu.css"> # 右键菜单样式
- <link rel="stylesheet" href="/css/photos.css"> # memos动态相册样式
- <script type="text/javascript" src ="/js/reward.js" ></script> # 关于页面 - 打赏充电JS
- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.6.16/dist/sweetalert2.all.min.js"></script> # 关于页面JS
- <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> # 51统计样式
- <script> LA.init({id:"# 自己的id",ck:"# 自己的ck"})</script> # 51统计 - id & ck
- <script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script> # 灵雀监控样式
- <script>new LingQue.Monitor().init({id:"# 自己的id",sendSuspicious:true});</script> # 灵雀监控 - id
bottom:
- <script async data-pjax src="/js/icat.js"></script>
- <script async data-pjax src="/js/custom.js"></script> # 即刻逻辑文件
- <script async data-pjax src="/js/waterfall/waterfall.js"></script> # 即刻依赖 - waterfall
- <script type="text/javascript" src="https://unpkg.zhimg.com/jquery@latest/dist/jquery.min.js"></script> # 腾讯地图定位 - 定制化JS
- <script async data-pjax src="/js/txmap.js"></script> # 腾讯地图定位 - API
- <script src="/icat/random.js"></script> # 随机网页跳转
- <script type="text/javascript" src="https://cdn1.tianli0.top/npm/jquery@latest/dist/jquery.min.js"></script> # 右键菜单
- <script type="text/javascript" src="/js/rightmenu.js"></script> # 右键菜单 - 多样式JS
- <script type="text/javascript" src="/js/memos/waterfall.min.js"></script> # memos动态相册 - waterfall
- <script type="text/javascript" src="/js/memos/imgStatus.min.js"></script> # memos动态相册 - imgStatus
- <script type="text/javascript" src="/js/memos/lately.min.js"></script> # memos动态相册 - lately
- <script type="text/javascript" src="/js/memos/photo.js"></script> # memos动态相册 - 格式链JS



# CDN
# 非必要请勿修改,配置后请确认链接是否能访问
# --------------------------------------

CDN:
internal_provider: local
# 主题内部 js 的 cdn 配置
# 可选 local(本地) / jsdelivr / unpkg / cdnjs / custom(自定义格式)
# dev版的主题只能设置为 local

third_party_provider: jsdelivr
# 第三方 js 的 cdn 配置
# 可选 local(本地) / jsdelivr / unpkg / cdnjs / custom(自定义格式)
# 当设置为本地(local)时,需要安装 install hexo-butterfly-extjs 插件

version: false
# true/false 为 cdn 加上指定版本号
# 如需修改版本号,可修改主题目录的 'plugins.yml' 中对应插件的 version
# 请确保你修改的版本号,你所使用的 cdn 有收录

custom_format:
# 自定义格式
# https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
# name - npm 上的包名 / file - npm 上的文件路径 / min_file - npm 上的文件路径(压缩过的文件) / cdnjs_name - cdnjs 上的包名 / cdnjs_file - cdnjs 上的文件路径 / min_cdnjs_file - cdnjs 上的文件路径(压缩过的文件) / version - 插件版本号
# Staticfile(七牛云):https://www.staticfile.org/ - https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file} - 同步 cdnjs
# BootCDN:https://www.bootcdn.cn/ - https://cdn.bootcdn.net/ajax/libs/${cdnjs_name}/${version}/${min_cdnjs_file} - 同步 cdnjs
# Baomitu(360):https://cdn.baomitu.com/ - 最新版本:https://lib.baomitu.com/${cdnjs_name}/latest/${min_cdnjs_file} / 指定版本: https://lib.baomitu.com/${cdnjs_name}/${version}/${min_cdnjs_file} - 同步 cdnjs
# Elemecdn - 最新版本: https://npm.elemecdn.com/${name}@latest/${file} / 指定版本: https://npm.elemecdn.com/${name}@${version}/${file} - 同步 npm

option:
# 可以在这里更换部分文件,会覆盖原有的配置
# main_css:
# main:
# utils:
# translate:
# local_search:
# algolia_js:
# algolia_search_v4:
# instantsearch_v4:
# docsearch_js:
# docsearch_css:
# pjax:
# gitalk:
# gitalk_css:
# blueimp_md5:
# valine:
# disqusjs:
# disqusjs_css:
# twikoo:
# waline_js:
# waline_css:
# sharejs:
# sharejs_css:
# mathjax:
# katex:
# katex_copytex:
# mermaid:
# canvas_ribbon:
# canvas_fluttering_ribbon:
# canvas_nest:
# lazyload:
# instantpage:
# typed:
# pangu:
# fancybox_css_v4:
# fancybox_v4:
# medium_zoom:
# snackbar_css:
# snackbar:
# activate_power_mode:
# fireworks:
# click_heart:
# ClickShowText:
# fontawesomeV6:
# flickr_justified_gallery_js:
# flickr_justified_gallery_css:
# aplayer_css:
# aplayer_js:
# meting_js:
# prismjs_js:
# prismjs_lineNumber_js:
# prismjs_autoloader:
# artalk_js:
# artalk_css:
# busuanzi:
countup_js: /js/countup.js

我的插件

必要的插件
插件名 版本号 用途
hexo @6.3.0 Hexo 博客框架
hexo-generator-archive @2.0.0 Hexo自带 - 归档
hexo-generator-category @2.0.0 Hexo自带 - 分类
hexo-generator-tag @2.0.0 Hexo自带 - 标签
hexo-generator-index @3.0.0 Hexo自带 - 生成index页面
hexo-renderer-ejs @2.0.0 Hexo自带 - ejs支持
hexo-renderer-marked @6.0.0 Hexo自带 - 对Markdown的渲染支持
hexo-renderer-pug @3.0.0 pug渲染器
hexo-renderer-stylus @2.1.0 stylus渲染器
hexo-server @3.0.0 Hexo服务器模块
hexo-deployer-git @4.0.0 Git部署功能
个人使用添加的插件
插件名 版本号 用途
hexo-generator-feed @3.0.0 生成站点地图XML
hexo-generator-sitemap @3.0.1 生成Sitemap
hexo-generator-baidu-sitemap @0.1.9 生成百度Sitemap
hexo-filter-nofollow @2.0.2 自动为站内链接加上nofollow
hexo-baidu-url-submit @0.0.6 主动推送新链接至百度搜索引擎
hexo-blog-encrypt @3.1.6 为你的隐私文章添加密码来查阅
hexo-butterfly-artitalk @1.0.4 添加动态说说功能
hexo-generator-search @2.4.3 Butterfly的本地搜索功能
hexo-wordcount @6.0.1 字数统计
sweetalert2 @11.7.3 打赏弹出框框架
1
2
3
4
5
6
7
8
9
10
11
$ npm ls -dept 0
# 当前目录已安装插件

$ npm install [插件名] --save
# 下载安装最新的插件包

$ npm install [插件名@版本号] --save
# 下载安装指定版本的插件包

$ npm uninstall [插件名] --save
# 卸载插件包

我的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
# 因魔改中有大量 css 颜色变量代码 如color: var(--icat-unify-white)等类似代码, 均为 css 颜色代码, 此处为目前所有的颜色变量定义 css

[data-theme="light"] {
--icat-unify-background: #f7f9fe
--icat-unify-white: #ffffff
--icat-unify-font-color-op: #3b70fc
--icat-unify-card-bg: #ffffff
--icat-unify-shadow-border: 0 8px 16px -4px #2c2d300c
--icat-unify-gray: #999999
--icat-unify-main: var(--icat-essay-theme)
--icat-unify-shadow-theme: 0 8px 12px -3px var(--icat-essay-theme-op)
--icat-loading-card-bg: #ffffff
--icat-essay-background: #f7f9fe
--icat-essay-fontcolor: #363636
--icat-style-border-always: 1px solid var(--icat-essay-card-border)
--icat-essay-card-border: #e3e8f7
--icat-essay-card-bg: #ffffff
--icat-essay-shadow-border: 0 8px 16px -4px #2c2d300c
--icat-essay-theme-op: var(--icat-essay-theme)
--icat-essay-theme: #3b70fc
--icat-essay-gray-op: #9999992b
--icat-style-border-hover: 1px solid var(--icat-essay-main)
--icat-essay-main: var(--icat-essay-theme)
--icat-essay-white: #ffffff
--icat-essay-secondbg: #f1f3f8
--icat-essay-gray: #999999
--icat-essay-font-color: #4c4948
--icat-essay-font-color-op: #3b70fc
--icat-essay-hr: rgba(66,89,239,0.137)
--icat-essay-secondtext: rgba(60, 60, 67, 0.6)
--icat-rightmenu-style-border: #0e83cd
--icat-rightmenu-theme-op: #4259ef23
--icat-about-background: #FFFFFF
--icat-about-maskbg: rgba(255, 255, 255, 0.6)
--icat-about-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, 0.15)
--icat-about-skill-background: #FFFFFF
--icat-about-style-border: 1px solid var(--icat-essay-card-border)
}

[data-theme="dark"] {
--icat-unify-background: #000000
--icat-unify-white: #ffffff
--icat-unify-card-bg: #1d1b26
--icat-unify-shadow-border: 0 8px 16px -4px #2c2d300c
--icat-unify-gray: #999999
--icat-unify-main: var(--icat-essay-theme)
--icat-unify-shadow-theme: 0 8px 12px -3px var(--icat-essay-theme-op)
--icat-loading-card-bg: #1d1b26
--icat-essay-background: #18171d
--icat-essay-fontcolor: #f7f7fa
--icat-style-border-always: 1px solid var(--icat-essay-card-border)
--icat-essay-card-border: #42444a
--icat-essay-card-bg: #1d1e22
--icat-essay-shadow-border: 0 8px 16px -4px #2c2d300c
--icat-essay-theme-op: var(--icat-essay-theme)
--icat-essay-theme: #0084ff
--icat-essay-gray-op: #9999992b
--icat-style-border-hover: 1px solid var(--icat-essay-main)
--icat-essay-main: var(--icat-essay-theme)
--icat-essay-white: #ffffff
--icat-essay-secondbg: #30343f
--icat-essay-gray: #999999
--icat-essay-font-color: rgba(255,255,255,0.7)
--icat-essay-secondtext: #a1a2b8
--icat-rightmenu-style-border: #3d3d3f
--icat-rightmenu-theme-op: #f2b94b23
--icat-about-maskbg: rgba(0, 0, 0, 0.6)
--icat-about-skill-background: #18171d
}

魔改美化

本节魔改教程基于 Hexo 6.3.0 & Butterfly 4.7.0

前置教程

引用CSS

  • 首先你需要在 [blogRoot]/source/css 里面添加一个css 名字随意
    (需要注意的是不能放在 [blogRoot]/themes/butterfly/source/css 里面 否则可能出现bug)

  • 列如:[blogRoot]/source/css/icat.css

  • 再修改主题配置文件,按照下面引入 (一定是head,否则可能出现短暂无CSS)

1
2
3
4
5
6
inject:
head:
- ...
- <link rel="stylesheet" href="/css/icat.css">
bottom:
- ...

引用JS

  • 首先你需要在 [blogRoot]/source/js 里面添加一个js 名字随意
    (需要注意的是不能放在 [blogRoot]/themes/butterfly/source/js 里面 否则可能出现bug)

  • 列如:[blogRoot]/source/css/icat.js

  • 再修改主题配置文件,按照下面引入 (一定是bottom 否则可能出现dom不完全导致js报错)

1
2
3
4
5
6
inject:
head:
- ...
bottom:
- ...
- <script async data-pjax src="/js/icat.js"></script>

友联头像效果

  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
    .flink-item-icon {
    margin-right: 0 !important;
    transition: .5s !important;
    }

    .flink-item-name,
    .flink-item-desc {
    padding-left: 10px !important;
    }
    /* 头像微调 */

    #article-container .flink .flink-list>.flink-list-item::before {
    content: none;
    }
    /* 去掉原来自带的before */

    #article-container .flink .flink-list>.flink-list-item:hover {
    background-color: #49B1F5;
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    }
    /* 鼠标经过改变背景 */

    #article-container .flink .flink-list>.flink-list-item:hover a {
    color: white !important;
    }
    /* 鼠标经过改变文字颜色 */

    #article-container .flink .flink-list>.flink-list-item:hover .flink-item-icon {
    width: 60px;
    margin-left: -70px;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    }
    /* 鼠标经过头像滚动 */

    /* 友链样式调整 */
  • 效果预览:iCat-友联传送门

导航栏美化

分离菜单栏

  • 要让搜索栏在最右侧,而其它元素居中,这时我们需要修改一下pug文件

  • 修改 [blogRoot]\themes\Butterfly\layout\includes\header\nav.pug :
    + 号直接删除 即是正常缩进)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    nav#nav
    span#blog_name
    a#site-name(href=url_for('/')) #[=config.title]

    #menus
    - if (theme.algolia_search.enable || theme.local_search.enable)
    - #search-button
    - a.site-page.social-icon.search
    - i.fas.fa-search.fa-fw
    - span=' '+_p('search.title')
    !=partial('includes/header/menu_item', {}, {cache: true})
    #nav-right
    + if (theme.algolia_search.enable || theme.local_search.enable)
    + #search-button
    + a.site-page.social-icon.search
    + i.fas.fa-search.fa-fw
    - #toggle-menu
    - a.site-page
    - i.fas.fa-bars.fa-fw
    + #toggle-menu
    + a.site-page
    + i.fas.fa-bars.fa-fw
    个人魔改的样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    nav#nav
    span#blog-info
    a(href=url_for('/') title=config.title)
    if theme.nav.logo
    img.site-icon(src=url_for(theme.nav.logo))
    if theme.nav.display_title
    span.site-name=config.title

    #menus
    !=partial('includes/header/menu_item', {}, {cache: true})
    #nav-right
    if (theme.algolia_search.enable || theme.local_search.enable)
    #travellings
    a.site-page(href=url_for('https://travellings.cn/go.html') title="随机前往一个开往项目网站")
    i.iconfont.icat-subway
    #random
    a.site-page(href=url_for('javascript:toRandomPost()') title="随机前往一个文章")
    i.iconfont.icat-random
    #search-button
    a.site-page.social-icon.search
    i.iconfont.icat-search
    #toggle-menu
    a.site-page(href="javascript:void(0);")
    i.iconfont.icat-bars

顶部菜单居中

  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增
    1
    2
    3
    4
    5
    6
    7
    8
    9
    #nav-right{
    flex:1 1 auto;
    justify-content: flex-end;
    margin-left: auto;
    display: flex;
    flex-wrap:nowrap;
    }

    /* 导航栏居中 */

PE端菜单栏美化

  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
    #sidebar #sidebar-menus .menus_items .menus_item {
    margin: 10px 0;
    }

    #sidebar #sidebar-menus .menus_items a.site-page {
    padding-left: 0;
    }

    #sidebar #sidebar-menus .menus_items .site-page {
    position: relative;
    display: block;
    padding: 6px 30px 6px 22px;
    color: var(--font-color);
    font-size: 1.15em;
    border: var(--icat-style-border-always);
    background: var(--icat-essay-card-bg);
    font-size: 14px;
    border-radius: 12px;
    }

    #sidebar #sidebar-menus .menus_items .site-page i:first-child {
    text-align: left;
    padding-left: 10px;
    }
  • 修改 [blogRoot]/themes/butterfly/layout/includes/header/menu_item.pug
    + 号直接删除 即是正常缩进)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    if theme.menu
    .menus_items
    each value, label in theme.menu
    if typeof value !== 'object'
    - .icat_menus_item
    + .icat_menus_item
    - const valueArray = value.split('||')
    a.site-page(href=url_for(trim(valueArray[0])))
    ···
  • 修改 [blogRoot]/themes/butterfly/source/css/_layout/head.styl
    + 号直接删除 即是正常缩进)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
      ···
    .menus_items
    display: inline

    .menus_item
    + .icat_menus_item
    position: relative
    display: inline-block
    padding: 0 0 0 14px
    ···
  • [blogRoot]/themes/butterfly/source/css/_layout/sidebar.styl 全选替换为下方内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    #sidebar
    #menu-mask
    position: fixed
    z-index: 102
    display: none
    width: 100%
    height: 100%
    background: alpha($dark-black, .8)

    #sidebar-menus
    position: fixed
    top: 0
    right: -($sidebar-width)
    z-index: 103
    overflow-x: hidden
    overflow-y: auto
    width: $sidebar-width
    height: 100%
    background: var(--sidebar-bg)
    transition: all .5s

    &.open
    transform: translate3d(-100%, 0, 0)

    & > .avatar-img
    margin: 20px auto

    .sidebar-site-data
    padding: 0 10px

    hr
    margin: 20px auto

    .menus_items
    padding: 0 10px 40px

    .menus_item
    margin: 10px 0

    .site-page
    @extend .limit-one-line
    position: relative
    display: block
    padding: 6px 30px 6px 22px
    color: var(--font-color)
    font-size: 1.15em
    border: var(--icat-style-border-always)
    background: var(--icat-essay-card-bg)
    font-size: 14px
    border-radius: 12px

    &:hover
    background: var(--text-bg-hover)

    i:first-child
    width: 15%
    text-align: left
    padding-left: 10px

    &.group
    & > i:last-child
    position: absolute
    top: .78em
    right: 18px
    transition: transform .3s

    &.hide
    & > i:last-child
    transform: rotate(90deg)

    & + .menus_item_child
    display: none

    .menus_item_child
    margin: 0
    list-style: none
    padding-top: 6px

    #sidebar
    #sidebar-menus
    .icat_menus_item
    display: inline-block
    width: 50%

    .site-page
    text-align: center
    margin: 4px
    display: flex
    flex-direction: column
    align-items: center
    padding: 8px 0
    border-radius: 12px
    font-size: 14px

    i:first-child
    padding-left: 0

    & > .icat-essay
    font-weight: 500

    span
    margin-top: -8px

loading动画

本小节仅适用 Butterfly 4.5 以上版本

  • 修改 [blogRoot]/themes/butterfly/layout/includes/loading/fullpage-loading.pug

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    #loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
    .loading-bg
    div.loading-img
    .loading-image-dot

    script.
    const preloader = {
    endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

    }
    }
    window.addEventListener('load',()=> { preloader.endLoading() })

    if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
    }
  • 修改 [blogRoot]/themes/butterfly/layout/includes/loading/index.pug

    1
    2
    3
    4
    5
    6
    7
    if theme.preloader.source === 1
    include ./fullpage-loading.pug
    else if theme.preloader.source === 2
    include ./pace.pug
    else
    include ./fullpage-loading.pug
    include ./pace.pug
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
    .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%;
    }
    }
  • 修改 [blogRoot]/themes/butterfly/source/css/_layout/loading.styl
    (注意其中颜色代码–icat-unify-card-bg等需自行替换为自己的色值)

    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
    if hexo-config('preloader')
    .loading-bg
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    background: var(--icat-unify-card-bg);
    z-index: 1001;
    opacity: 1;
    transition: .3s;

    #loading-box
    .loading-img
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: auto;
    border: 4px solid #f0f0f2;
    animation-duration: .3s;
    animation-name: loadingAction;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    .loading-image-dot
    width: 30px;
    height: 30px;
    background: #6bdf8f;
    position: absolute;
    border-radius: 50%;
    border: 6px solid #fff;
    top: 50%;
    left: 50%;
    transform: translate(18px, 24px);
    &.loaded
    .loading-bg
    opacity: 0;
    z-index: -1000;

    @keyframes loadingAction
    0% {
    opacity: 1;
    }

    100% {
    opacity: .4;
    }
  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增

    1
    2
    3
    4
    5
    6
    .loading-img {
    background: url(https://meuicat.com/media/avatar.jpg) no-repeat center center;
    background-size: cover;
    }

    /* loading动画 */
  • 最后修改 _config.butterfly.ymlpreloader 选项, 改完以后 source: 1 为满屏加载 无pace胶囊, source: 2pace胶囊 无满屏动画, source: 3 是两者都启用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 页面加载动画 preloader
    # --------------------------------------

    preloader:
    enable: true
    source: 1
    # source;1. 开屏加载;2. 顶部进度
    # pace theme (see https://codebyzach.github.io/pace/)
    pace_css_url:

即刻短文

Butterfly 即刻短文 部署方案 参考 - Heo

todolist 支持度
图片灯箱
多图片多行显示
外部链接
瀑布流
首页滚动
快速评论
本地修改 yml 发布
插件版本

效果预览

创建数据

  • 创建 [blogRoot]/source/_data/essay.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
    - class_name: 即刻短文
    essay_list:
    - content: 继续出发!全程 1346公里 剩余1019公里 ~
    date: 2023/03/13 18:21:48
    from: iPhone XR
    image:
    - https://s1.ax1x.com/2023/03/19/ppYFcbn.jpg

    - content: 三不政策 不主动 不拒绝 不负责
    date: 2023/03/08 14:48:23
    from: iPhone XR

    - content: 绝不再错过每一场!😍
    date: 2023/03/06 18:20:42
    from: iPhone XR
    image:
    - https://s1.ax1x.com/2023/03/18/ppJbZm4.jpg

    - content: 18岁时见到山川美景会很新鲜 很激动 但是28岁的自己看到山川美景时 却只会安静等待看着 没有快乐 也没有分享的欲望 如果让我给个建议的话 就是能玩就早点玩 越早越好 因为人并不能同时拥有青春和对青春的感受 就像在年少时有一本很喜欢的漫画 但是那个时候自己钱不够 买不起 所以呢 一直都记得这件事 而现在的我买得起当初那本漫画了 但是30岁的我已经不爱看了 正所谓 欲买桂花同载酒 终不似 少年游
    date: 2023/03/02 13:26:28

    - content: 周一就应该用来摸鱼~
    date: 2023/02/27 13:02:56
    from: Windows
    image:
    - https://s1.ax1x.com/2023/03/18/ppJbklT.jpg

    - content: 我亦小封!永远爱自由!
    date: 2023/02/27 01:27:13
    from: iPhone XR
    image:
    - https://s1.ax1x.com/2023/03/18/ppJb9kn.jpg

    - content: 听说人们将心上不可及之人称为月亮
    date: 2023/02/25 22:33:38
    from: Macbook Pro

    - content: 各种观影史集于一体!人生足迹页诞生咯~
    date: 2023/02/19 14:50:17
    link: /collect/

    - content: 七点四十五起床 下楼到公司 开电脑上厕所 车间转两圈 再去吃个早餐 报报价 冲冲浪回家吃午饭 一点半到公司 三点溜到奶茶店摸个鱼 打打游戏 四点半偷偷摸摸溜回公司 时不时被老爸训到五点下班 洗澡吃饭 开始单身夜生活!住家里唯一的好处就是周边都是狐朋狗友的各种局!枯燥的生活真的可以有所期待!
    date: 2023/02/17 16:49:05
    from: iPhone XR

    - content: 八分钟!下班下班 让我睡死过去吧 真的好困
    date: 2023/02/15 16:52:37
    image:
    - https://s1.ax1x.com/2023/03/18/ppJbSTs.jpg

    - content: 一个人十三四岁的夏天,在路上捡到一支真枪。因为年少无知,天不怕地不怕,他扣下扳机。没有人死,也没有人受伤。他认为自己开了空枪。后来他三十岁或者更老,走在路上 听到背后有隐隐约约的风声。他停下来,回过身去,子弹正中眉心。很多事情,其实很早就有了结果
    date: 2023/02/14 11:15:59

    - content: iCatMusic 我的音乐歌单上线啦~
    date: 2023/02/14 0:51:26
    link: https://music.meuicat.com/
    数据参数释义
    参数 备选值/类型 释义
    class_name String 【可选】标识符,无实际意义,选填
    essay_list Array 【必选】即刻短文数据列表
    essay_list.content String 【必选】短文 文字内容
    essay_list.date Time 【必选】短文发布时间 格式建议为 2022/10/26 08:00:00
    essay_list.image Array 【可选】短文图片内容, 可填写多张图片
    essay_list.from String 【可选】短文 来自何处, 当然也可以填任何你想填写的标识
    essay_list.link String 【可选】外部链接
    essay_list.aplayer Array 【可选】aplayer 播放器的单曲音乐, 需 aplayer 支持
    essay_list.aplayer.server String 【essay_list.aplayer 后必选】aplayer 服务商
    essay_list.aplayer.id String 【essay_list.aplayer 后必选】单曲 id
  • 创建 [blogRoot]/source/essay/index.md 来生成页面 page

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 即刻短文
    date: 2023-01-17 13:38:17
    type: essay
    top_img: false
    aside: false
    ---
  • 创建 [blogRoot]/themes/butterfly/layout/includes/page/essay.pug 页面内容
    (注意该页面中可能存在部分 fontawesome 图标 需要自行替换)

    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
    #essay_page
    .author-content.author-content-item.essayPage.single
    .card-content
    .author-content-item-tips 即刻短文
    span.author-content-item-title 封の碎碎念
    .content-bottom
    .tips 使用 即刻短文静态部署版 构建
    .banner-button-group
    a.banner-button(onclick='pjax.loadUrl("/daily/")', data-pjax-state)
    i.iconfont.icat-essay(style='font-size: 1rem')
    span.banner-button-text 关于说说
    #bber
    section.timeline.page-1
    ul#waterfall.list
    each i in site.data.essay
    each item, index in i.essay_list
    if index < 200
    li.bber-item
    .bber-content
    p.datacont= item.content
    if item.image
    .bber-container-img
    each iten, indey in item.image
    a.bber-content-img(href=item.image[indey], target="_blank", data-fancybox="gallery", data-caption="")
    img(src=item.image[indey])
    .bber-content-noimg
    .bber-content-noimg
    .bber-content-noimg
    if item.aplayer
    .bber-music
    .aplayer.no-destroy(data-id=item.aplayer.id data-server=item.aplayer.server data-type="song" data-order="list" data-preload="none" data-autoplay="false" data-mutex="true" data-theme='var(--icat-essay-main)')
    hr
    .bber-bottom
    .bber-info
    .bber-info-time
    - var datedata = new Date(item.date).toISOString()
    i.iconfont.icat-time-fill
    time.datatime(datetime= item.date)= datedata
    if item.link
    a.bber-content-link(target="_blank", title="跳转到短文指引的链接", href=item.link, rel="external nofollow")
    i.fas.fa-link
    | 链接
    if item.from
    .bber-info-from
    i.far.fa-popsicle
    span=item.from
    .bber-reply(onclick="icat.commentText(" + `'${item.content}'` + ")")
    i.iconfont.icat-message
    #bber-tips(style='color: var(--icat-essay-secondtext);')
    | - 已展开所有短文 -
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面内容匹配
    + 号直接删除 即是正常缩进)

    1
    2
    3
    4
    5
    6
    7
    8
    9
        ···
    case page.type
    + when 'essay'
    + include includes/page/essay.pug
    when 'photo'
    include includes/page/photo.pug
    when 'tags'
    include includes/page/tags.pug
    ···

CSS样式

  • 创建 [blogRoot]/source/css/essay_page/essay_page.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
    #page:has(#essay_page) {
    border: 0;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    }
    #page:has(#essay_page) .page-title {
    display: none;
    }
    #web_bg ~ .page:has(#essay_page) {
    background: var(--icat-essay-background);
    }
    #bber .bber-container-img {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
    }
    #bber .bber-container-img .bber-content-noimg {
    width: calc(100% / 4 - 5px);
    }

    #bber .bber-content-img img {
    object-fit: cover;
    max-height: 100%;
    border-radius: 12px;
    }

    #bber .bber-content-img {
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    position: relative;
    margin-bottom: 10px;
    }

    #bber .bber-content .datacont {
    order: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--icat-essay-fontcolor);
    width: 100%;
    line-height: 1.38;
    border-radius: 12px;
    margin-bottom: 0.8rem;
    display: flex;
    flex-direction: column;
    text-align: justify;
    padding: 0px 8px;
    }
    #bber p {
    margin: 0px;
    }
    #bber div.bber-content {
    display: flex;
    flex-flow: wrap;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    }
    #bber .timeline ul li.bber-item {
    position: relative;
    width: 32%;
    border: var(--icat-style-border-always);
    border-radius: 12px;
    padding: 1rem 1rem 0.5rem;
    transition: all 0.3s ease 0s;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--icat-essay-card-bg);
    box-shadow: var(--icat-essay-shadow-border);
    margin-right: 2%;
    }
    #bber .timeline #waterfall.show {
    opacity: 1;
    }
    #bber .timeline #waterfall {
    opacity: 0;
    transition: all 0.3s ease 0s;
    }
    #bber ul.list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    }
    #bber {
    margin-top: 1rem;
    width: 100%;
    }
    #bber > section > ul > li.bber-item {
    margin-bottom: 1rem;
    }

    #bber-tips {
    font-size: 14px;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    }

    #bber .timeline ul li.bber-item hr {
    display: flex;
    position: relative;
    margin: 8px 0px;
    border: 1px dashed var(--icat-essay-hr);
    width: 100%;
    }

    #bber .bber-info {
    display: flex;
    align-items: center;
    }

    #bber > section > ul > li > div .bber-info-time,
    #bber > section > ul > li > div .bber-info-from {
    color: var(--icat-essay-fontcolor);
    font-size: 0.7rem;
    background-color: var(--icat-essay-gray-op);
    padding: 0px 8px;
    border-radius: 20px;
    cursor: default;
    display: flex;
    align-items: center;
    padding-right: 10px;
    }

    #bber > section > ul > li > div .bber-info-time > i {
    padding-right: 2px;
    }

    #bber .bber-info .far.fa-clock {
    margin-right: 4px;
    }
    #bber > section > ul > li > div .bber-info-from span,
    #bber > section > ul > li > div .bber-info-from {
    margin-left: 4px;
    }

    #bber .bber-bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
    }

    #bber .timeline ul li.bber-item:hover {
    border: var(--icat-style-border-hover);
    }

    #bber .bber-content-link {
    display: flex;
    margin-left: 0.5rem;
    font-size: 0.7rem;
    align-items: center;
    background-color: rgba(245, 108, 108, 0.13);
    color: rgb(245, 108, 108);
    padding: 0px 8px;
    border-radius: 20px;
    padding-right: 10px;
    }
    #bber .bber-content-link i {
    margin-right: 3px;
    }
    #bber .bber-content-link:hover {
    background-color: var(--icat-essay-main);
    color: var(--icat-essay-white);
    }
    #bber .bber-music {
    width: 100%;
    height: 90px;
    margin: 0.5rem 0;
    border-radius: 8px;
    overflow: hidden;
    border: var(--icat-style-border-always);
    background: var(--icat-essay-secondbg);
    }
    #bber .aplayer {
    margin: 0;
    }

    #bber .aplayer.aplayer-withlrc .aplayer-pic {
    height: 82px;
    width: 82px;
    margin: 4px;
    border-radius: 4px;
    }
    .bber-music .aplayer.aplayer-withlrc .aplayer-info {
    padding: 5px 7px 0;
    }
    #bber .aplayer .aplayer-info .aplayer-music {
    height: 23px;
    }
    #bber .aplayer .aplayer-info .aplayer-music .aplayer-title {
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
    color: var(--icat-essay-fontcolor);
    }

    #bber .aplayer .aplayer-info .aplayer-controller {
    align-items: center;
    }
    #bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
    padding: 0;
    }
    #bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
    position: initial;
    }
    #bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
    background: var(--icat-essay-gray);
    height: 8px;
    border-radius: 12px;
    transition: 0.3s;
    overflow: hidden;
    }
    #bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
    height: 100%;
    border-radius: 12px;
    }
    #bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
    height: 100%;
    border-radius: 12px;
    }
    #bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
    display: none;
    }
    #bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
    position: initial;
    }

    /* 顶部样式 */
    .author-content.author-content-item.essayPage {
    height: 19rem;
    background: url(https://s1.ax1x.com/2023/03/17/ppG0Aje.jpg) left 28% / cover no-repeat;
    color: var(--icat-essay-white);
    overflow: hidden;
    margin-top: 0px;
    border-radius: 8px;
    }
    #page:has(#essay_page) .author-content-item .card-content .banner-button-group .banner-button:hover {
    color: var(--icat-essay-font-color-op);
    border-radius: 20px !important;
    }

    .author-content-item .card-content {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
    }
    .author-content-item .author-content-item-tips {
    opacity: .8;
    font-size: .6rem;
    margin-bottom: 0.5rem;
    }
    .author-content-item .card-content .author-content-item-title {
    margin-bottom: 0.5rem;
    }
    .author-content-item .author-content-item-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    }
    .author-content-item .content-bottom {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    .author-content-item .card-content .banner-button-group .banner-button {
    height: 40px;
    width: 124px;
    border-radius: 20px;
    justify-content: center;
    background: var(--icat-essay-card-bg);
    color: var(--icat-essay-font-color);
    display: flex;
    align-items: center;
    z-index: 1;
    transition: .3s;
    cursor: pointer;
    border-bottom: 0!important;
    }
    .author-content-item .card-content .banner-button-group .banner-button i {
    margin-right: 4px;
    font-size: 1rem;
    }
    .banner-button-text {
    padding-right: 5px;
    }
    .banner-button-group {
    margin-top: 10px;
    }

    /* 响应式 */
    @media screen and (max-width: 1300px) {
    #bber .timeline ul li.bber-item {
    width: 49%;
    margin-right: 1%;
    }
    }
    @media screen and (max-width: 768px) {
    #bber .timeline ul li.bber-item {
    width: 100%;
    margin-right: 0px;
    }
    }
    [data-theme="dark"] #bber .bber-music .aplayer,
    [data-theme="dark"] #bber .aplayer .aplayer-lrc:before,
    [data-theme="dark"] #bber .aplayer .aplayer-lrc:after {
    background: var(--icat-essay-card-bg);
    color: var(--icat-essay-fontcolor);
    }
    #bber .aplayer .aplayer-lrc p {
    color: var(--icat-essay-fontcolor);
    }
  • _config.butterfly.yml 中的 inject 下的 head 引入

    1
    2
    3
    4
    5
    inject:
    head:
    - <link rel="stylesheet" href="/css/essay_page/essay_page.css"> # 即刻短文样式
    bottom:
    - ···

JS文件

  • _config.butterfly.yml 中开启站点的 pjax

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # Pjax
    # https://github.com/MoOx/pjax
    # 当用户点击链接,通过ajax更新页面需要变化的部分,然后使用HTML5的pushState修改浏览器的URL地址;这样可以不用重复加载相同的资源(css/js), 从而提升网页的加载速度
    # 使用pjax后,一些自己DIY的js可能会无效,跳转页面时需要重新调用;使用pjax后,一些个别页面加载的js/css,将会改为所有页面都加载
    # --------------------------------------
    pjax:
    enable: true
    exclude:
    # - xxxx
    # - xxxx
  • 创建 [blogRoot]/source/js/custom.js 用来处理即刻短文的逻辑
    (或写在公共 js 中也可以)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    var percentFlag = false; // 节流阀
    function essayScroll() {
    let a = document.documentElement.scrollTop || window.pageYOffset; // 卷去高度
    const waterfallResult = a % document.documentElement.clientHeight; // 卷去一个视口
    result <= 99 || (result = 99);

    if (
    !percentFlag &&
    waterfallResult + 100 >= document.documentElement.clientHeight &&
    document.querySelector("#waterfall")
    ) {
    // console.info(waterfallResult, document.documentElement.clientHeight);
    setTimeout(() => {
    waterfall("#waterfall");
    }, 500);
    } else {
    setTimeout(() => {
    document.querySelector("#waterfall") && waterfall("#waterfall");
    }, 500);
    }

    const r = window.scrollY + document.documentElement.clientHeight;

    let p = document.getElementById("post-comment") || document.getElementById("footer");

    (p.offsetTop + p.offsetHeight / 2 < r || 90 < result) && (percentFlag = true);
    }
    function replaceAll(e, n, t) {
    return e.split(n).join(t);
    }
    var anzhiyu = {
    diffDate: function (d, more = false) {
    const dateNow = new Date();
    const datePost = new Date(d);
    const dateDiff = dateNow.getTime() - datePost.getTime();
    const minute = 1000 * 60;
    const hour = minute * 60;
    const day = hour * 24;
    const month = day * 30;

    let result;
    if (more) {
    const monthCount = dateDiff / month;
    const dayCount = dateDiff / day;
    const hourCount = dateDiff / hour;
    const minuteCount = dateDiff / minute;

    if (monthCount >= 1) {
    result = datePost.toLocaleDateString().replace(/\//g, "-");
    } else if (dayCount >= 1) {
    result = parseInt(dayCount) + " " + GLOBAL_CONFIG.date_suffix.day;
    } else if (hourCount >= 1) {
    result = parseInt(hourCount) + " " + GLOBAL_CONFIG.date_suffix.hour;
    } else if (minuteCount >= 1) {
    result = parseInt(minuteCount) + " " + GLOBAL_CONFIG.date_suffix.min;
    } else {
    result = GLOBAL_CONFIG.date_suffix.just;
    }
    } else {
    result = parseInt(dateDiff / day);
    }
    return result;
    },
    changeTimeInEssay: function () {
    document.querySelector("#bber") &&
    document.querySelectorAll("#bber time").forEach(function (e) {
    var t = e,
    datetime = t.getAttribute("datetime");
    (t.innerText = anzhiyu.diffDate(datetime, true)), (t.style.display = "inline");
    });
    },
    reflashEssayWaterFall: function () {
    document.querySelector("#waterfall") &&
    setTimeout(function () {
    waterfall("#waterfall");
    document.getElementById("waterfall").classList.add("show");
    }, 500);
    },
    commentText: function (e) {
    if (e == "undefined" || e == "null") e = "好棒!";
    var n = document.getElementsByClassName("el-textarea__inner")[0],
    t = document.createEvent("HTMLEvents");
    if (!n) return;
    t.initEvent("input", !0, !0);
    var o = replaceAll(e, "\n", "\n> ");
    (n.value = "> " + o + "\n\n"), n.dispatchEvent(t);
    var i = document.querySelector("#post-comment").offsetTop;
    window.scrollTo(0, i - 80),
    n.focus(),
    n.setSelectionRange(-1, -1),
    document.getElementById("comment-tips") && document.getElementById("comment-tips").classList.add("show");
    },
    };

    anzhiyu.changeTimeInEssay();
    anzhiyu.reflashEssayWaterFall();
  • 新建 创建 [blogRoot]/source/js/waterfall/waterfall.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
    function waterfall(a) {
    function b(a, b) {
    var c = window.getComputedStyle(b);
    return parseFloat(c["margin" + a]) || 0;
    }
    function c(a) {
    return a + "px";
    }
    function d(a) {
    return parseFloat(a.style.top);
    }
    function e(a) {
    return parseFloat(a.style.left);
    }
    function f(a) {
    return a.clientWidth;
    }
    function g(a) {
    return a.clientHeight;
    }
    function h(a) {
    return d(a) + g(a) + b("Bottom", a);
    }
    function i(a) {
    return e(a) + f(a) + b("Right", a);
    }
    function j(a) {
    a = a.sort(function (a, b) {
    return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a);
    });
    }
    function k(b) {
    f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a));
    }
    "string" == typeof a && (a = document.querySelector(a));
    var l = [].map.call(a.children, function (a) {
    return (a.style.position = "absolute"), a;
    });
    a.style.position = "relative";
    var m = [];
    l.length && ((l[0].style.top = "0px"), (l[0].style.left = c(b("Left", l[0]))), m.push(l[0]));
    for (var n = 1; n < l.length; n++) {
    var o = l[n - 1],
    p = l[n],
    q = i(o) + f(p) <= f(a);
    if (!q) break;
    (p.style.top = o.style.top), (p.style.left = c(i(o) + b("Left", p))), m.push(p);
    }
    for (; n < l.length; n++) {
    j(m);
    var p = l[n],
    r = m.pop();
    (p.style.top = c(h(r) + b("Top", p))), (p.style.left = c(e(r))), m.push(p);
    }
    j(m);
    var s = m[0];
    a.style.height = c(h(s) + b("Bottom", s));
    var t = f(a);
    window.addEventListener ? window.addEventListener("resize", k) : (document.body.onresize = k);
    }
  • _config.butterfly.yml 中的 inject 下的 bottom 引入 custom.jswaterfall.js

    1
    2
    3
    4
    5
    6
    inject:
    head:
    - ···
    bottom:
    - <script async data-pjax src="/js/custom.js"></script> # 即刻逻辑文件
    - <script async data-pjax src="/js/waterfall/waterfall.js"></script> # 即刻瀑布流JS

标签增加上下标

  • 修改 [blogRoot]/themes/butterfly/scripts/helpers/page.js
    (上标:${tag.length} 或 下标:${tag.length}+ 号直接删除 即是正常缩进)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
      ···
    source.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文件 [blogRoot]/source/css/icat.css 里新增
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    [data-theme="light"] #aside-content > .card-widget.card-info {
    background-image: url(https://s1.ax1x.com/2023/03/17/ppGwTkq.jpg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%;
    }
    [data-theme="dark"] #aside-content > .card-widget.card-info {
    background-image: url(https://s1.ax1x.com/2023/03/17/ppGwI7n.jpg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%;
    }

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

足迹页

效果预览

创建数据

  • 修改 [blogRoot]/themes/butterfly/layout/page.pug

    1
    2
    3
    4
    5
    6
          when 'categories'
    include includes/page/categories.pug
    + when 'collect'
    + include includes/page/collect.pug
    default
    include includes/page/default-page.pug
  • 新建 [blogRoot]/themes/butterfly/layout/includes/page/collect.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
    #article-container-collect
    .collect
    - let collectPageContent = page.content
    if site.data.collect
    - let result = ""
    each i in site.data.collect
    - let className = i.class_name ? `<h2 ${i.class_desc?'':'style="margin-bottom:12px"'}>${i.class_name} (${i.link_list.length})</h2>` : ""
    - let classDesc = i.class_desc ? `<div class="collect-desc">${i.class_desc}</div>` : ""
    - let listResult = ""
    each j in i.link_list
    -
    listResult += `
    <div title="${j.name}" referrerPolicy="no-referrer" class="collect_box" style="${j.img?`background-image: url(${j.img})`:'background-color: #333;'}">
    <div class="collect_top">
    <i class="${j.icon?j.icon:'fa-solid fa-film'}"></i>
    <span>${j.premiere?j.premiere:'看过?'}</span>
    </div>
    <div class="collect_content">
    <span>${j.name?j.name:'未知'}</span>
    <div>${j.score?toStar(j.score):toStar(0)}</div>
    <p>${j.time?j.time:'时间'}</p>
    </div>
    <div class="collect-div"><a class="collect-a" href="${j.link?j.link:'链接'}"></a></div>
    </div>
    `
    -
    - result += `${className}${classDesc} <div class="collect-list">${listResult}</div>`
    - collectPageContent = collectPageContent + result
    != collectPageContent
  • 新建 [blogRoot]/themes/butterfly/source/css/_page/collect.styl

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    .collect
    h2
    margin-bottom: 0
    .collect-desc
    margin-bottom: 10px
    .collect-list
    display: flex
    gap: 18px
    flex-wrap: wrap
    .collect_box
    --w: calc(100% / 6 - 15px)
    width: var(--w)
    display: flex
    justify-content: space-between
    flex-direction: column
    background-position: center
    background-size: cover
    border-radius: 12px
    position: relative
    overflow: hidden
    padding: 10px
    color: #fff
    transition: .5s
    &::after
    content: ''
    position: absolute
    height: 100%
    width: 100%
    left: 0
    top: 0
    background: rgba(0,0,0,0.3)
    z-index: 0
    transition: .5s
    &:hover
    transform: translateY(-10px)
    &::after
    background: rgba(0,0,0,0.1)
    .collect_top
    display: flex
    z-index: 1
    align-items: center
    justify-content: space-between
    .collect_content
    z-index: 1
    margin-top: 53%
    span
    display: block
    font-size: 18px
    font-weight: bold
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    p
    font-size: 12px
    margin-top: -6px
    margin-bottom: 2px
    --font-color: rgba(0,0,0,0.3)

    [data-theme='dark']
    .collect .collect-list .collect_box
    color: #ddd !important
    &:hover
    transform: translateY(-10px)
    &::after
    background: rgba(0,0,0,0.2)
    &::after
    background: rgba(0,0,0,0.5)
    .collect .collect-list
    @media screen and (max-width: 1100px)
    gap: 15px
    .collect_box
    --w: calc(20% - 12px)
    @media screen and (max-width: 900px)
    gap: 16px
    .collect_box
    --w: calc(25% - 12px)
    @media screen and (max-width: 768px)
    gap: 15px
    .collect_box
    --w: calc(100% / 3 - 10px)
    @media screen and (max-width: 500px)
    gap: 16px
    .collect_box
    --w: calc(50% - 8px)

    .collect-div
    position: absolute
    z-index: 1
    width: 85%
    height: 90%

    .collect-a
    height: 100%
    display: flex
  • 修改 [blogRoot]/themes/butterfly/scripts/helpers/page.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
    ···
    hexo.extend.helper.register('page_description', function () {
    const { config, page } = this
    let description = page.description || page.content || page.title || config.description

    if (description) {
    description = escapeHTML(stripHTML(description).substring(0, 150)
    .trim()
    ).replace(/\n/g, ' ')
    return description
    }
    })

    +hexo.extend.helper.register('toStar', function(num) {
    + let tmp = ''
    + for (let i = 0; i < Math.floor(num); i++) { tmp += '<i class="fa-solid fa-star"></i>' } // 整数部分加 实心星星
    + if (num - Math.floor(num) != 0) tmp += '<i class="fa-solid fa-star-half-alt"></i>' // 小数部分转成 半星
    + for (let i = 0; i < 5 - Math.ceil(num); i++) { tmp += '<i class="fa-regular fa-star"></i>' } // 不够5个补 空心星星
    + return tmp
    +})
    +// 藏宝阁星星

    hexo.extend.helper.register('cloudTags', function (options = {}) {
    const env = this
    let { source, minfontsize, maxfontsize, limit, unit, orderby, order } = options
    unit = unit || 'px'
    ···
  • 新建 [blogRoot]/source/_data/collect.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
    - class_name: 📽️ 荧幕电影 # fa-solid fa-film 电影图标
    class_desc: # 分类描述
    link_list:
    - name: 流浪地球2 # 片名
    score: 5 # 1-5星
    premiere: 三刷 # N刷
    icon: fa-solid fa-film # 左上角图标
    time: 2023/02/13 # 观影时间
    img: https://yife68.gitee.io/icat-pic-2023/collect/film/1.jpg #图片链接
    link: https://movie.douban.com/subject/35267208/ # 影片地址

    - name: 动物世界
    score: 5
    premiere: N刷
    icon: fa-solid fa-film
    time: 未知时间
    img: https://yife68.gitee.io/icat-pic-2023/collect/film/24.jpg
    link: https://movie.douban.com/subject/26925317/?_dtcc=1

    - name: 盛夏未来
    score: 5
    premiere: 已看
    icon: fa-solid fa-film
    time: 2021/08/22
    img: https://yife68.gitee.io/icat-pic-2023/collect/film/39.jpg
    link: https://movie.douban.com/subject/35158124/



    - class_name: 💻 小屏电影 # fa-solid fa-film 电影图标
    class_desc: # 分类描述
    link_list:
    - name: 素媛 # 片名
    score: 5 # 1-5星
    premiere: 已看 # N刷
    icon: fa-solid fa-film # 左上角图标
    time: 2021/01/01 # 观影时间
    img: https://yife68.gitee.io/icat-pic-2023/collect/film/6.jpg #图片链接
    link: https://movie.douban.com/subject/21937452/ # 影片地址

    - name: 艺伎回忆录
    score: 3
    premiere: 已看
    icon: fa-solid fa-film
    time: 未知时间
    img: https://yife68.gitee.io/icat-pic-2023/collect/film/21.jpg
    link: https://movie.douban.com/subject/1309059/



    - class_name: 📺 电视剧 # far fa-play-circle 电视剧图标
    class_desc: # 分类描述
    link_list:
    - name: 狂飙 # 片名
    score: 5 # 1-5星
    premiere: 已追完 # N刷
    icon: far fa-play-circle # 左上角图标
    time: 2023/01/30 # 观影时间
    img: https://yife68.gitee.io/icat-pic-2023/collect/TV-Play/1.jpg #图片链接
    link: https://movie.douban.com/subject/35465232/ # 影片地址

    - name: 林深见鹿
    score: 5
    premiere: 正在追
    icon: far fa-play-circle
    time: 2023/02/20
    img: https://yife68.gitee.io/icat-pic-2023/collect/TV-Play/2.jpg
    link: https://movie.douban.com/subject/35479983/



    - class_name: 🍀 动漫 # far fa-play-circle 动漫图标
    class_desc: # 分类描述
    link_list:
    - name: 名侦探柯南 # 片名
    score: 5 # 1-5星
    premiere: 未追完 # N刷
    icon: far fa-play-circle # 左上角图标
    time: 2016/06/01 # 在追时间
    img: https://yife68.gitee.io/icat-pic-2023/collect/cartoon/1.jpg #图片链接
    link: https://movie.douban.com/subject/1463371/ # 影片地址

    - name: 武庚纪
    score: 5
    premiere: 未追完
    icon: far fa-play-circle
    time: 2016/06/24
    img: https://yife68.gitee.io/icat-pic-2023/collect/cartoon/3.jpg
    link: https://movie.douban.com/subject/26564735/



    - class_name: 📚 书籍 # fas fa-book 书籍图标
    class_desc: # 分类描述
    link_list:
    - name: 三体 # 书名
    score: 5 # 1-5星
    premiere: 已读完 # N刷
    icon: fas fa-book # 左上角图标
    time: 未知时间 # 阅读时间
    img: https://yife68.gitee.io/icat-pic-2023/collect/book/1.jpg #图片链接
    link: https://book.douban.com/subject/2567698/ # 书籍地址

    - name: 三体Ⅱ
    score: 5
    premiere: 已读完
    icon: fas fa-book
    time: 未知时间
    img: https://yife68.gitee.io/icat-pic-2023/collect/book/2.jpg
    link: https://book.douban.com/subject/3066477/
  • 创建 [blogRoot]/source/collect/index.md 来生成页面 page

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 人生足迹
    date: 2023-02-20 00:28:12
    type: collect
    top_img: https://s1.ax1x.com/2023/03/17/ppG0ZBd.jpg
    aside: false
    ---

随机网页跳转(Heo无缝版)

  • 创建 [blogRoot]/themes/butterfly/scripts/helpers/random.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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 || 'icat/random.js',
    data: `var posts=${JSON.stringify(posts)};function toRandomPost(){pjax.loadUrl('/'+posts[Math.floor(Math.random() * posts.length)]);};`
    }
    })
    若没有开启 pjax 用这个js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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 || 'icat/random.js',
    data: `var posts=${JSON.stringify(posts)};function toRandomPost(){window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self");};`
    }
    })
  • _config.butterfly.yml 中的 inject 下的 bottom 引入 random.js

    1
    2
    3
    4
    5
    inject:
    head:
    - ···
    bottom:
    - <script src="/icat/random.js"></script> # 随机网页跳转

最新文章标志

原理:通过 hexo 的 api 获取所有文章,然后比较时间得到最新文章的名字,返回给pug文件比较并添加元素。

  • 修改 [blogRoot]/themes/butterfly/scripts/helpers/page.js
    + 号直接删除 即是正常缩进)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
      ···
    return loop(menu) || defaultTitle
    })

    hexo.extend.helper.register('isImgOrUrl', function (path) {
    const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
    if (path.indexOf('//') !== -1 || imgTestReg.test(path)) {
    return true
    }
    return false
    })

    +hexo.extend.helper.register('newPost', function() {
    + let name, time;
    + hexo.locals.get('posts').map((item, index) => {
    + if (index == 0) name = item.title, time = item.date
    + else if (item.date > time) { name = item.title, time = item.date }
    + });
    + return name
    +})
    +// 最新文章
  • 修改 [blogRoot]/themes/butterfly/layout/includes/mixins/post-ui.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
    mixin postUI(posts)
    + - let newTitle= newPost()
    each article , index in page.posts.data
    .recent-post-item
    -
    let link = article.link || article.path
    let title = article.title || _p('no_title')
    const position = theme.cover.position
    let leftOrRight = position === 'both'
    ? index%2 == 0 ? 'left' : 'right'
    : position === 'left' ? 'left' : 'right'
    let post_cover = article.cover
    let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
    -
    if post_cover && theme.cover.index_enable
    .post_cover(class=leftOrRight)
    a(href=url_for(link) title=title)
    if article.cover_type === 'img'
    img.post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
    else
    div.post-bg(style=`background: ${post_cover}`)
    .recent-post-info(class=no_cover)
    + if newTitle == title
    + span(class=`newPost-${leftOrRight=='left'?'right':'left'}`) 最新文章
    p(class=`p-icat-${leftOrRight=='left'?'right':'left'}`)
    a.article-title(href=url_for(link) title=title)= title
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
    #recent-posts>.recent-post-item {
    position: relative;
    }

    .newPost-left,
    .newPost-right {
    color: white;
    padding: 4px 10px;
    background-color: #E60012;
    border-radius: 9px 9px 9px 9px;
    letter-spacing: 2px;
    padding-left: 13px;
    }

    .newPost-left {
    left: 15px;
    }

    .newPost-right {
    right: 15px;
    }

    .p-icat-left,
    .p-icat-right {
    margin: 8px;
    }

    /* 最新文章图标 */

51la & 灵雀监控

  • 在上方两个平台注册好账号 并添加网站

  • _config.butterfly.yml 中的 inject 下的 head 引入文件

    1
    2
    3
    4
    5
    6
    7
    8
    inject:
    head:
    - <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> # 51统计样式
    - <script> LA.init({id:"51la统计的16位id",ck:"51la统计的16位ck"})</script> # 51统计 - id & ck
    - <script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script> # 灵雀监控样式
    - <script>new LingQue.Monitor().init({id:"灵雀监控的16位id",sendSuspicious:true});</script> # 灵雀监控 - id
    bottom:
    - ···

右键菜单

  • 创建 [blogRoot]/themes/butterfly/layout/includes/rightmenu.pug
    (注意该页面中 fontawesome 图标 需要自行替换)

    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
    #rightMenu.js-pjax
    .rightMenu-group.rightMenu-small
    a.rightMenu-item(href="javascript:window.history.back();")
    i.iconfont.icat-angle-left
    a.rightMenu-item(href="javascript:window.history.forward();")
    i.iconfont.icat-angle-right
    a.rightMenu-item(href="javascript:window.location.reload();")
    i.iconfont.icat-refresh
    a.rightMenu-item(href="javascript:rmf.switchDarkMode();")
    i.iconfont.icat-changing-over
    .rightMenu-group.rightMenu-line.hide#menu-text
    a.rightMenu-item(href="javascript:rmf.copySelect();")
    i.iconfont.icat-copy-paste
    span='复制'
    a.rightMenu-item(href="javascript:window.open(\"https://www.baidu.com/s?wd=\"+window.getSelection().toString());window.location.reload();")
    i.iconfont.icat-baidu
    span='百度搜索'
    .rightMenu-group.rightMenu-line.hide#menu-too
    a.rightMenu-item(href="javascript:window.open(window.getSelection().toString());window.location.reload();")
    i.iconfont.icat-jump-link
    span='转到链接'
    .rightMenu-group.rightMenu-line.hide#menu-paste
    a.rightMenu-item(href='javascript:rmf.paste()')
    i.iconfont.icat-copy-paste
    span='粘贴'
    .rightMenu-group.rightMenu-line.hide#menu-post
    if is_post()||is_page()
    a.rightMenu-item(href="javascript:rmf.switchReadMode();")
    i.iconfont.icat-read
    span='阅读模式'
    a.rightMenu-item(href="javascript:rmf.copyWordsLink()")
    i.iconfont.icat-copy-paste
    span='复制本文地址'
    .rightMenu-group.rightMenu-line.hide#menu-to
    a.rightMenu-item(href="javascript:rmf.openWithNewTab()")
    i.iconfont.icat-new-window
    span='新窗口打开'
    a.rightMenu-item#menu-too(href="javascript:rmf.open()")
    i.iconfont.icat-jump-link
    span='转到链接'
    a.rightMenu-item(href="javascript:rmf.copyLink()")
    i.iconfont.icat-copy-paste
    span='复制链接'
    .rightMenu-group.rightMenu-line.hide#menu-img
    a.rightMenu-item(href="javascript:rmf.saveAs()")
    i.iconfont.icat-download-save
    span='保存图片'
    a.rightMenu-item(href="javascript:rmf.openWithNewTab()")
    i.iconfont.icat-new-window
    span='在新窗口打开'
    a.rightMenu-item(href="javascript:rmf.click()")
    i.iconfont.icat-full-screen
    span='全屏显示'
    a.rightMenu-item(href="javascript:rmf.copyLink()")
    i.iconfont.icat-copy-paste
    span='复制图片链接'
    .rightMenu-group.rightMenu-line
    a.rightMenu-item(href="javascript:toRandomPost()")
    i.iconfont.icat-random
    span='随便逛逛'
    a.rightMenu-item(href="javascript:rmf.translate();")
    i.iconfont.icat-simple-complex
    span='繁简转换'
    .rightMenu-group.rightMenu-line
    a.rightMenu-item(href="javascript:pjax.loadUrl(\"/privacy/\");")
    i.iconfont.icat-conceal
    span='隐私协议'
    a.rightMenu-item(href="javascript:pjax.loadUrl(\"/cc/\");")
    i.iconfont.icat-cc
    span='版权协议'
  • 修改 [blogRoot]/themes/butterfly/layout/includes/layout.pug
    + 号直接删除 即是正常缩进)

    1
    2
    3
    4
    5
    6
    7
    8
        ···
    else
    include ./404.pug

    include ./rightside.pug
    include ./additional-js.pug
    !=partial('includes/third-party/search/index', {}, {cache: true})
    + !=partial('includes/rightmenu',{}, {cache:true})
  • 新建 [blogRoot]/themes/butterfly/source/css/rightmenu.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
    #rightMenu{
    display: none;
    position: fixed;
    width: 160px;
    height: fit-content;
    top: 10%;
    left: 10%;
    background-color: var(--card-bg);
    border: 1px solid var(--icat-rightmenu-style-border);
    border-radius: 8px;
    z-index: 100;
    }
    #rightMenu .rightMenu-group{
    padding: 7px 6px;
    }
    #rightMenu .rightMenu-group:not(:nth-last-child(1)){
    border-bottom: 1px solid var(--icat-rightmenu-theme-op);
    }
    #rightMenu .rightMenu-group.rightMenu-small{
    display: flex;
    justify-content: space-between;
    }
    #rightMenu .rightMenu-group .rightMenu-item{
    height: 30px;
    line-height: 30px;
    border-radius: 8px;
    transition: 0.3s;
    color: var(--font-color);
    }
    #rightMenu .rightMenu-group.rightMenu-line .rightMenu-item{
    display: flex;
    height: 40px;
    line-height: 40px;
    padding: 0 4px;
    }
    #rightMenu .rightMenu-group .rightMenu-item:hover{
    background-color: var(--text-bg-hover);
    }
    #rightMenu .rightMenu-group .rightMenu-item i{
    display: inline-block;
    text-align: center;
    line-height: 30px;
    width: 30px;
    height: 30px;
    padding: 0 5px;
    }
    #rightMenu .rightMenu-group .rightMenu-item span{
    line-height: 30px;
    }

    #rightMenu .rightMenu-group.rightMenu-line .rightMenu-item *{
    height: 40px;
    line-height: 40px;
    }
    .rightMenu-group.hide{
    display: none;
    }

    #rightMenu .rightMenu-group .rightMenu-item .icat-refresh,
    #rightMenu .rightMenu-group .rightMenu-item .icat-changing-over,
    #rightMenu .rightMenu-group .rightMenu-item .icat-simple-complex {
    font-weight: 900;
    }

    .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
  • _config.butterfly.yml 中的 inject 下的 head 引入 rightmenu.css

    1
    2
    3
    4
    5
    inject:
    head:
    - <link rel="stylesheet" href="/css/rightmenu.css"> # 右键菜单样式
    bottom:
    - ···
  • 创建 [blogRoot]/themes/butterfly/source/js/rightmenu.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    function setMask(){//设置遮罩层
    if(document.getElementsByClassName("rmMask")[0]!=undefined){
    return document.getElementsByClassName("rmMask")[0];
    }
    mask = document.createElement('div');
    mask.className = "rmMask";
    mask.style.width = window.innerWidth + 'px';
    mask.style.height = window.innerHeight + 'px';
    mask.style.background = '#fff';
    mask.style.opacity = '.0';
    mask.style.position = 'fixed';
    mask.style.top = '0';
    mask.style.left = '0';
    mask.style.zIndex = 998;
    document.body.appendChild(mask);
    document.getElementById("rightMenu").style.zIndex=19198;
    return mask;
    }

    function insertAtCursor(myField, myValue) {

    //IE 浏览器
    if (document.selection) {
    myField.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
    sel.select();
    }

    //FireFox、Chrome等
    else if (myField.selectionStart || myField.selectionStart == '0') {
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;

    // 保存滚动条
    var restoreTop = myField.scrollTop;
    myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);

    if (restoreTop > 0) {
    myField.scrollTop = restoreTop;
    }

    myField.focus();
    myField.selectionStart = startPos + myValue.length;
    myField.selectionEnd = startPos + myValue.length;
    } else {
    myField.value += myValue;
    myField.focus();
    }
    }
    let rmf = {};
    rmf.showRightMenu = function (isTrue, x = 0, y = 0) {
    let $rightMenu = $('#rightMenu');
    $rightMenu.css('top', x + 'px').css('left', y + 'px');

    if (isTrue) {
    $rightMenu.show();
    } else {
    $rightMenu.hide();
    }
    }
    rmf.switchDarkMode = function () {
    const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
    if (nowMode === 'light') {
    activateDarkMode()
    saveToLocal.set('theme', 'dark', 2)
    GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
    } else {
    activateLightMode()
    saveToLocal.set('theme', 'light', 2)
    GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
    }
    typeof utterancesTheme === 'function' && utterancesTheme()
    typeof FB === 'object' && window.loadFBComment()
    window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
    };
    // 日夜模式切换
    rmf.copyWordsLink = function () {
    let url = window.location.href
    let txa = document.createElement("textarea");
    txa.value = url;
    document.body.appendChild(txa)
    txa.select();
    document.execCommand("Copy");
    document.body.removeChild(txa);
    Snackbar.show({
    text: '链接复制成功!快去分享吧!',
    pos: 'bottom-center',
    showAction: false
    });
    }
    // 复制链接
    rmf.switchReadMode = function () {
    const $body = document.body
    $body.classList.add('read-mode')
    const newEle = document.createElement('button')
    newEle.type = 'button'
    newEle.className = 'fas fa-sign-out-alt exit-readmode'
    $body.appendChild(newEle)

    function clickFn() {
    $body.classList.remove('read-mode')
    newEle.remove()
    newEle.removeEventListener('click', clickFn)
    }

    newEle.addEventListener('click', clickFn)
    }
    // 阅读模式

    rmf.copySelect = function () {
    document.execCommand('Copy', false, null);
    //这里可以写点东西提示一下 已复制
    Snackbar.show({
    text: '复制成功!快去分享吧!',
    pos: 'bottom-center',
    showAction: false
    });
    }
    //复制选中文字

    rmf.translate = function () {
    document.getElementById("translateLink").click();
    }
    // 繁简转换
    rmf.searchinThisPage=()=>{
    document.body.removeChild(mask);
    document.getElementsByClassName("local-search-box--input")[0].value=window.getSelection().toString()
    document.getElementsByClassName("search")[0].click()
    var evt = document.createEvent("HTMLEvents");evt.initEvent("input", false, false);document.getElementsByClassName("local-search-box--input")[0].dispatchEvent(evt);
    }
    document.body.addEventListener('touchmove', function(e){

    }, { passive: false });
    function popupMenu() {
    //window.oncontextmenu=function(){return false;}
    window.oncontextmenu = function (event) {
    if(event.ctrlKey||document.body.clientWidth<900) return true;
    $('.rightMenu-group.hide').hide();
    if (document.getSelection().toString()) {
    $('#menu-text').show();
    }
    if (document.getElementById('post')) {
    $('#menu-post').show();
    } else {
    if (document.getElementById('page')) {
    $('#menu-post').show();
    }
    }
    var el = window.document.body;
    el = event.target;
    var a=/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/
    if (a.test(window.getSelection().toString())&&el.tagName!="A"){
    $('#menu-too').show()
    }
    if (el.tagName == 'A') {
    $('#menu-to').show()
    rmf.open = function () {
    if(el.href.indexOf("http://")==-1&&el.href.indexOf("https://")==-1||el.href.indexOf("yisous.xyz")!=-1){
    pjax.loadUrl(el.href)
    }
    else{
    location.href = el.href
    }
    }
    rmf.openWithNewTab = function () {
    window.open(el.href);
    // window.location.reload();
    }
    rmf.copyLink = function () {
    let url = el.href
    let txa = document.createElement("textarea");
    txa.value = url;
    document.body.appendChild(txa)
    txa.select();
    document.execCommand("Copy");
    document.body.removeChild(txa);
    }
    }
    if (el.tagName == 'IMG') {
    $('#menu-img').show()
    rmf.openWithNewTab = function () {
    window.open(el.src);
    // window.location.reload();
    }
    rmf.click = function () {
    el.click()
    }
    rmf.copyLink = function () {
    let url = el.src
    let txa = document.createElement("textarea");
    txa.value = url;
    document.body.appendChild(txa)
    txa.select();
    document.execCommand("Copy");
    document.body.removeChild(txa);
    }
    rmf.saveAs=function(){
    var a = document.createElement('a');
    var url = el.src;
    var filename = url.split("/")[-1];
    a.href = url;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(url);
    }
    } else if (el.tagName == "TEXTAREA" || el.tagName == "INPUT") {
    $('#menu-paste').show();
    // rmf.paste=function(){
    // input.addEventListener('paste', async event => {
    // event.preventDefault();
    // const text = await navigator.clipboard.readText();
    // el.value+=text;
    // });
    // }
    rmf.paste = function () {
    navigator.permissions
    .query({
    name: 'clipboard-read'
    })
    .then(result => {
    if (result.state == 'granted' || result.state == 'prompt') {
    //读取剪贴板
    navigator.clipboard.readText().then(text => {
    console.log(text)
    insertAtCursor(el, text)
    })
    } else {
    Snackbar.show({
    text: '请允许读取剪贴板!',
    pos: 'top-center',
    showAction: false,
    })
    }
    })
    }
    }
    let pageX = event.clientX + 10;
    let pageY = event.clientY;
    let rmWidth = $('#rightMenu').width();
    let rmHeight = $('#rightMenu').height();
    if (pageX + rmWidth > window.innerWidth) {
    pageX -= rmWidth + 10;
    }
    if (pageY + rmHeight > window.innerHeight) {
    pageY -= pageY + rmHeight - window.innerHeight;
    }
    mask=setMask();
    window.onscroll=()=>{
    rmf.showRightMenu(false);
    window.onscroll=()=>{}
    document.body.removeChild(mask);
    }
    $(".rightMenu-item").click(()=>{
    document.body.removeChild(mask);
    })
    $(window).resize(()=>{
    rmf.showRightMenu(false);
    document.body.removeChild(mask);
    })
    mask.onclick=()=>{
    document.body.removeChild(mask);
    }
    rmf.showRightMenu(true, pageY, pageX);
    return false;
    };

    window.addEventListener('click', function () {
    rmf.showRightMenu(false);
    });
    }
    if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    popupMenu()
    }
    const box = document.documentElement

    function addLongtabListener(target, callback) {
    let timer = 0 // 初始化timer

    target.ontouchstart = () => {
    timer = 0 // 重置timer
    timer = setTimeout(() => {
    callback();
    timer = 0
    }, 380) // 超时器能成功执行,说明是长按
    }

    target.ontouchmove = () => {
    clearTimeout(timer) // 如果来到这里,说明是滑动
    timer = 0
    }

    target.ontouchend = () => { // 到这里如果timer有值,说明此触摸时间不足380ms,是点击
    if (timer) {
    clearTimeout(timer)
    }
    }
    }

    addLongtabListener(box, popupMenu)
  • _config.butterfly.yml 中的 inject 下的 bottom 引入 rightmenu.js

    1
    2
    3
    4
    5
    inject:
    head:
    - ···
    bottom:
    - <script type="text/javascript" src="/js/rightmenu.js"></script> # 右键菜单 - 多样式JS

动态相册

如果没有服务器可以搭建memos,可以使用小N和杜老师维护的公益服务:memos纯公益代部署服务

效果预览

创建数据

  • 创建 [blogRoot]/source/photos/index.md 来生成页面 page

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 生活相册
    date: 2023-03-14 21:47:47
    type: photo
    top_img: false
    aside: false
    ---
  • 创建 [blogRoot]/source/js/memos/photo.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
    // 适配pjax
    function whenDOMReady() {
    if (location.pathname == '/photos/') photos();
    }
    whenDOMReady()
    document.addEventListener("pjax:complete", whenDOMReady)

    // 自适应
    window.onresize = () => {
    if (location.pathname == '/photos/') waterfall('.gallery-photos');
    };

    // 函数
    function photos() {
    fetch('你的memos地址/api/memo?creatorId=32&tag=相册').then(res => res.json()).then(data => { // 记得修改memos地址
    let html='', imgs = [];
    data.data.forEach(item => { imgs = imgs.concat(item.content.match(/\!\[.*?\]\(.*?\)/g)) });
    imgs.forEach(item => {
    let img = item.replace(/!\[.*?\]\((.*?)\)/g, '$1'),
    time, title, tat = item.replace(/!\[(.*?)\]\(.*?\)/g, '$1');
    if (tat.indexOf(' ') != -1) {
    time = tat.split(' ')[0];
    title = tat.split(' ')[1];
    } else title = tat

    html += `<div class="gallery-photo"><a href="${img}" data-fancybox="gallery" class="fancybox" data-thumb="${img}"><img class="photo-img" loading='lazy' decoding="async" src="${img}"></a>`;
    title ? html += `<span class="photo-title">${title}</span>` : '';
    time ? html += `<span class="photo-time">${time}</span>` : '';
    html += `</div>`;
    });

    document.querySelector('.gallery-photos.page').innerHTML = html
    imgStatus.watch('.photo-img', () => { waterfall('.gallery-photos'); });
    window.Lately && Lately.init({ target: '.photo-time' });
    }).catch()
    }

获取api地址
memos地址就是首页地址,如:memos.meuicat.com

  • 发送一条 公共 memos

  • 点击 探索 接着点击用户名

  • 查看URL获取ID

如url是:https://memos.meuicat.com/u/1
则creatorId就是1
最后完整链接如下:
https://memos.meuicat.com//api/memo?creatorId=32&tag=相册
能看到数据则为正确链接

  • 创建 [blogRoot]/source/js/memos/imgStatus.min.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    ! function() {
    this.loaded = 0, this.failed = 0, this.total = 0, this.watch = function(a, b) {
    var c = document.querySelectorAll(a);
    if (!c.length) return console.log("[imgStatus]: There aren't any images associated with this selector (" + a + ")!");
    this.total = c.length;
    for (var d = 0; d < this.total; d++) isCached(c[d].src) ? this._setLoaded(b) : c[d].addEventListener ? (c[d].addEventListener("load", this._setLoaded.bind(this, b)), c[d].addEventListener("error", this._setFailed.bind(this, b))) : (c[d].attachEvent("onload", this._setLoaded.bind(this, b)), c[d].attachEvent("onerror", this._setFailed.bind(this, b)))
    }, this.isCached = function(a) {
    var b = new Image;
    return b.src = a, b.complete
    }, this._setFailed = function(a, b) {
    ++this.failed, "function" == typeof a && a(this)
    }, this._setLoaded = function(a, b) {
    ++this.loaded, "function" == typeof a && a(this)
    }, this.isDone = function() {
    return this.loaded + this.failed === this.total ? !0 : !1
    }, "object" == typeof window && (window.imgStatus = this)
    }();
  • 创建 [blogRoot]/source/js/memos/lately.min.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
    /**
    * Lately.min.js 2.5.2
    * MIT License - http://www.opensource.org/licenses/mit-license.php
    * https://tokinx.github.io/lately/
    */
    ! function() {
    window.Lately = new function() {
    var t = this;
    this.lang = {
    second: "秒",
    minute: "分钟",
    hour: "小时",
    day: "天",
    month: "个月",
    year: "年",
    ago: "前",
    error: "NaN"
    };
    var e = function(e) {
    e = new Date(n(e));
    var r = new function() {
    this.second = (Date.now() - e.getTime()) / 1e3, this.minute = this.second / 60, this.hour = this.minute / 60, this.day = this.hour / 24, this.month = this.day / 30, this.year = this.month / 12
    }, i = Object.keys(r).reverse().find(function(t) {
    return r[t] >= 1
    });
    return (i ? function(t, e) {
    return Math.floor(t) + e
    }(r[i], t.lang[i]) : t.lang.error) + t.lang.ago
    }, n = function(t) {
    return t = new Date(t && ("number" == typeof t ? t : t.replace(/-/g, "/").replace("T", " "))), !isNaN(t.getTime()) && t.getTime()
    };
    return {
    init: function() {
    var r = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, i = r.target,
    a = void 0 === i ? "time" : i,
    o = r.lang;
    o && (t.lang = o);
    var u = !0,
    h = !1,
    l = void 0;
    try {
    for (var s, c = document.querySelectorAll(a)[Symbol.iterator](); !(u = (s = c.next()).done); u = !0) {
    var f = s.value,
    g = n(f.dateTime) || n(f.title) || n(f.innerHTML) || 0;
    if (!g) return;
    f.title = new Date(g).toLocaleString(), f.innerHTML = e(g)
    }
    } catch (t) {
    h = !0, l = t
    } finally {
    try {
    !u && c.
    return &&c.
    return ()
    } finally {
    if (h) throw l
    }
    }
    },
    format: e
    }
    }
    }();
  • 创建 [blogRoot]/source/js/memos/waterfall.min.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
    function waterfall(a) {
    function b(a, b) {
    var c = window.getComputedStyle(b);
    return parseFloat(c["margin" + a]) || 0
    }

    function c(a) {
    return a + "px"
    }

    function d(a) {
    return parseFloat(a.style.top)
    }

    function e(a) {
    return parseFloat(a.style.left)
    }

    function f(a) {
    return a.clientWidth
    }

    function g(a) {
    return a.clientHeight
    }

    function h(a) {
    return d(a) + g(a) + b("Bottom", a)
    }

    function i(a) {
    return e(a) + f(a) + b("Right", a)
    }

    function j(a) {
    a = a.sort(function(a, b) {
    return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a)
    })
    }

    function k(b) {
    f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a))
    }
    "string" == typeof a && (a = document.querySelector(a));
    var l = [].map.call(a.children, function(a) {
    return a.style.position = "absolute", a
    });
    a.style.position = "relative";
    var m = [];
    l.length && (l[0].style.top = "0px", l[0].style.left = c(b("Left", l[0])), m.push(l[0]));
    for (var n = 1; n < l.length; n++) {
    var o = l[n - 1],
    p = l[n],
    q = i(o) + f(p) <= f(a);
    if (!q) break;
    p.style.top = o.style.top, p.style.left = c(i(o) + b("Left", p)), m.push(p)
    }
    for (; n < l.length; n++) {
    j(m);
    var p = l[n],
    r = m.pop();
    p.style.top = c(h(r) + b("Top", p)), p.style.left = c(e(r)), m.push(p)
    }
    j(m);
    var s = m[0];
    a.style.height = c(h(s) + b("Bottom", s));
    var t = f(a);
    window.addEventListener ? window.addEventListener("resize", k) : document.body.onresize = k
    }
  • _config.butterfly.yml 中的 inject 下的 bottom 引入 waterfall.min.js lately.min.js imgStatus.min.js photo.js

    1
    2
    3
    4
    5
    6
    7
    8
    inject:
    head:
    - ···
    bottom:
    - <script type="text/javascript" src="/js/memos/waterfall.min.js"></script> # memos动态相册 - waterfall
    - <script type="text/javascript" src="/js/memos/imgStatus.min.js"></script> # memos动态相册 - imgStatus
    - <script type="text/javascript" src="/js/memos/lately.min.js"></script> # memos动态相册 - lately
    - <script type="text/javascript" src="/js/memos/photo.js"></script> # memos动态相册 - 格式链JS

使用

1
2
3
4
5
6
7
8
9
#相册
<!-- 写法就是markdown的写法,中括号里先写时间再写标题,中间使用空格隔开 -->
![2023-01-29 我是标题](图片链接)
<!-- 若不想要时间只写标题即可 -->
![我是标题](图片链接)
<!-- 若不想要标题只写时间即可,只不过后面需要添加空格 -->
![2023-01-29 ](图片链接)
<!-- 也可以只填写图片链接 -->
![](图片链接)

示例

1
2
3
4
5
#相册
![2023-02-09 ](https://s1.ax1x.com/2023/03/16/pp3jQ3V.jpg)
![ 犹豫没要微信](https://s1.ax1x.com/2023/03/17/ppGlZid.jpg)
![2022-10-12 可可爱爱没有脑袋](https://s1.ax1x.com/2023/03/16/pp34dpj.jpg)
![](https://s1.ax1x.com/2023/03/15/pp39iRI.jpg)

文章meta显示位置

给文章添加一个位置显示

创建数据

  • 修改 [blogRoot]/themes/butterfly/layout/includes/header/post-info.pug
    + 号直接删除 即是正常缩进)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
              ···
    else
    - let data_type_update = theme.post_meta.post.date_type === 'updated'
    - let date_type = data_type_update ? 'updated' : 'date'
    - let date_icon = data_type_update ? 'fas fa-history' :'far fa-calendar-alt'
    - let date_title = data_type_update ? _p('post.updated') : _p('post.created')
    i.fa-fw.post-meta-icon(class=date_icon)
    span.post-meta-label= date_title
    time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))=date(page[date_type], config.date_format)
    + span.post-meta-Publish-Location
    + span.post-meta-separator |
    + i.iconfont.icat-publish-location
    + span= page.publish_location || _p('未知')
    if (theme.post_meta.post.categories && page.categories.data.length > 0)
    span.post-meta-categories
    if (theme.post_meta.post.date_type)
    ···

使用方式

  • Post Front-matter 内加 publish_location
    1
    2
    3
    ---
    publish_location: 上海
    ---

文章meta显示调整

PE端顶部文章meta居中显示,并调整添加位置后meta重新排序

  • 修改 [blogRoot]/themes/butterfly/layout/includes/header/post-info.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
            ···
    span.post-meta-Publish-Location
    span.post-meta-separator |
    i.iconfont.icat-publish-location
    span= page.publish_location || _p('未知')
    - if (theme.post_meta.post.categories && page.categories.data.length > 0)
    - span.post-meta-categories
    - if (theme.post_meta.post.date_type)
    - span.post-meta-separator |
    -
    - each item, index in page.categories.data
    - i.fas.fa-inbox.fa-fw.post-meta-icon
    - a(href=url_for(item.path)).post-meta-categories #[=item.name]
    - if (index < page.categories.data.length - 1)
    - i.fas.fa-angle-right.post-meta-separator

    .meta-secondline
    + if (theme.post_meta.post.categories && page.categories.data.length > 0)
    + span.post-meta-categories
    + if (theme.post_meta.post.date_type)
    +
    + each item, index in page.categories.data
    + i.fas.fa-inbox.fa-fw.post-meta-icon
    + a(href=url_for(item.path)).post-meta-categories #[=item.name]
    + if (index < page.categories.data.length - 1)
    + i.fas.fa-angle-right.post-meta-separator
    - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read)
    if (postWordcount)
    span.post-meta-separator |
    span.post-meta-wordcount
    if theme.wordcount.post_wordcount
    ···
  • 修改 [blogRoot]/themes/butterfly/source/css/_layout/head.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
      ···
    #post-info
    position: absolute
    bottom: 100px
    padding: 0 8%
    width: 100%
    text-align: center

    +maxWidth900()
    bottom: 30px
    - text-align: left
    + text-align: center

    ···

    #post-meta
    color: var(--light-grey)
    font-size: 95%

    - +minWidth768()
    - > .meta-secondline
    - > span:first-child
    - display: none

    +maxWidth768()
    font-size: 90%

    > .meta-firstline,
    > .meta-secondline
    - display: inline
    + display: -webkit-inline-box

    .post-meta
    &-separator
    - margin: 0 5px
    + margin: 0 3px
    + padding-left: 5px
    ···

语雀同款链接卡片

效果预览

创建数据

  • 创建 [blogRoot]/themes/butterfly/scripts/tag/link.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    /**
    * link
    * {% link url,title,favicon,desc %}
    * {% link 链接,标题,图标,介绍 %}
    */

    'use strict'

    let defaultIcon = '<svg t="1670307855063" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19066" width="200" height="200"><path d="M504.064 516.608m-384.256 0a384.256 384.256 0 1 0 768.512 0 384.256 384.256 0 1 0-768.512 0Z" fill="#009CF5" p-id="19068"></path><path d="M746.112 270.464L472.448 485.12l63.104 63.104L750.08 274.56c2.304-2.688-1.28-6.144-3.968-4.096z" fill="#FF4C3A" p-id="19069"></path><path d="M262.016 762.752l273.664-214.528-63.104-63.104-214.656 273.536c-2.176 2.688 1.28 6.144 4.096 4.096z" fill="#FFFFFF" p-id="19070"></path><path d="M505.216 155.136c-3.2 0-5.888 2.56-5.888 5.888v53.504c0 3.2 2.56 5.888 5.888 5.888s5.888-2.56 5.888-5.888v-53.504c-0.128-3.2-2.688-5.888-5.888-5.888zM442.368 160.512c-3.2 0.512-5.376 3.584-4.736 6.784l9.344 52.736c0.512 3.2 3.584 5.376 6.784 4.736 3.2-0.512 5.376-3.584 4.736-6.784l-9.344-52.736c-0.512-3.2-3.584-5.376-6.784-4.736zM396.288 234.368c1.152 3.072 4.48 4.608 7.552 3.456 3.072-1.152 4.608-4.48 3.456-7.552l-18.304-50.304c-1.152-3.072-4.48-4.608-7.552-3.456-3.072 1.152-4.608 4.48-3.456 7.552l18.304 50.304zM348.928 257.408c1.664 2.816 5.248 3.712 7.936 2.176s3.712-5.248 2.176-7.936l-26.752-46.336c-1.664-2.816-5.248-3.712-7.936-2.176-2.816 1.664-3.712 5.248-2.176 7.936l26.752 46.336zM306.304 288.256c2.048 2.432 5.76 2.816 8.192 0.768 2.432-2.048 2.816-5.76 0.768-8.192l-34.432-40.96c-2.048-2.432-5.76-2.816-8.192-0.768-2.432 2.048-2.816 5.76-0.768 8.192l34.432 40.96zM269.696 326.144c2.432 2.048 6.144 1.792 8.192-0.768 2.048-2.432 1.792-6.144-0.768-8.192l-40.96-34.432c-2.432-2.048-6.144-1.792-8.192 0.768-2.048 2.432-1.792 6.144 0.768 8.192l40.96 34.432zM193.792 342.912l46.336 26.752c2.816 1.664 6.4 0.64 7.936-2.176 1.664-2.816 0.64-6.4-2.176-8.064L199.552 332.8c-2.816-1.664-6.4-0.64-7.936 2.176-1.664 2.688-0.64 6.272 2.176 7.936zM168.32 399.488l50.304 18.304c3.072 1.152 6.4-0.512 7.552-3.456 1.152-3.072-0.512-6.4-3.456-7.552l-50.304-18.304c-3.072-1.152-6.4 0.512-7.552 3.456-1.152 3.072 0.384 6.4 3.456 7.552zM207.872 457.344l-52.736-9.344c-3.2-0.512-6.272 1.536-6.784 4.736-0.512 3.2 1.536 6.272 4.736 6.784l52.736 9.344c3.2 0.512 6.272-1.536 6.784-4.736 0.512-3.2-1.536-6.272-4.736-6.784zM201.984 509.568H148.48c-3.2 0-5.888 2.56-5.888 5.888 0 3.2 2.56 5.888 5.888 5.888h53.504c3.2 0 5.888-2.56 5.888-5.888 0-3.2-2.56-5.888-5.888-5.888zM205.44 562.176l-52.736 9.344c-3.2 0.512-5.376 3.584-4.736 6.784 0.512 3.2 3.584 5.376 6.784 4.736l52.736-9.344c3.2-0.512 5.376-3.584 4.736-6.784s-3.584-5.248-6.784-4.736zM217.856 613.376l-50.304 18.304c-3.072 1.152-4.608 4.48-3.456 7.552 1.152 3.072 4.48 4.608 7.552 3.456l50.304-18.304c3.072-1.152 4.608-4.48 3.456-7.552-1.152-3.072-4.48-4.608-7.552-3.456zM238.976 661.504l-46.336 26.752c-2.816 1.664-3.712 5.248-2.176 8.064 1.664 2.816 5.248 3.712 8.064 2.176l46.336-26.752c2.816-1.664 3.712-5.248 2.176-8.064-1.664-2.816-5.248-3.712-8.064-2.176zM268.16 705.408l-40.96 34.432c-2.432 2.048-2.816 5.76-0.768 8.192 2.048 2.432 5.76 2.816 8.192 0.768l40.96-34.432c2.432-2.048 2.816-5.76 0.768-8.192-1.92-2.56-5.632-2.816-8.192-0.768zM304.512 743.424l-34.432 40.96c-2.048 2.432-1.792 6.144 0.768 8.192 2.432 2.048 6.144 1.792 8.192-0.768l34.432-40.96c2.048-2.432 1.792-6.144-0.768-8.192-2.304-1.92-6.016-1.664-8.192 0.768zM347.008 774.656l-26.752 46.336c-1.664 2.816-0.64 6.4 2.176 7.936 2.816 1.664 6.4 0.64 8.064-2.176l26.752-46.336c1.664-2.816 0.64-6.4-2.176-7.936-2.816-1.536-6.4-0.64-8.064 2.176zM394.24 798.08l-18.304 50.304c-1.152 3.072 0.512 6.4 3.456 7.552 3.072 1.152 6.4-0.512 7.552-3.456l18.304-50.304c1.152-3.072-0.512-6.4-3.456-7.552-3.072-1.152-6.528 0.384-7.552 3.456zM440.192 872.32c3.2 0.512 6.272-1.536 6.784-4.736l9.344-52.736c0.512-3.2-1.536-6.272-4.736-6.784-3.2-0.512-6.272 1.536-6.784 4.736l-9.344 52.736c-0.64 3.2 1.536 6.272 4.736 6.784zM502.912 878.08c3.2 0 5.888-2.56 5.888-5.888v-53.504c0-3.2-2.56-5.888-5.888-5.888-3.2 0-5.888 2.56-5.888 5.888v53.504c0 3.2 2.688 5.888 5.888 5.888zM549.632 815.232l9.344 52.736c0.512 3.2 3.584 5.376 6.784 4.736 3.2-0.512 5.376-3.584 4.736-6.784l-9.344-52.736c-0.512-3.2-3.584-5.376-6.784-4.736-3.2 0.512-5.248 3.584-4.736 6.784zM600.832 802.816l18.304 50.304c1.152 3.072 4.48 4.608 7.552 3.456 3.072-1.152 4.608-4.48 3.456-7.552L611.84 798.72c-1.152-3.072-4.48-4.608-7.552-3.456-3.072 1.152-4.608 4.48-3.456 7.552zM649.088 781.696l26.752 46.336c1.664 2.816 5.248 3.712 8.064 2.176 2.816-1.664 3.712-5.248 2.176-8.064l-26.88-46.336c-1.664-2.816-5.248-3.712-8.064-2.176-2.816 1.664-3.712 5.248-2.048 8.064zM692.864 752.384l34.432 40.96c2.048 2.432 5.76 2.816 8.192 0.768 2.432-2.048 2.816-5.76 0.768-8.192l-34.432-40.96c-2.048-2.432-5.76-2.816-8.192-0.768-2.56 2.048-2.816 5.76-0.768 8.192zM730.88 716.032l40.96 34.432c2.432 2.048 6.144 1.792 8.192-0.768 2.048-2.432 1.792-6.144-0.768-8.192l-40.96-34.432c-2.432-2.048-6.144-1.792-8.192 0.768-1.92 2.432-1.664 6.144 0.768 8.192zM762.112 673.664l46.336 26.752c2.816 1.664 6.4 0.64 8.064-2.176 1.664-2.816 0.64-6.4-2.176-7.936L768 663.552c-2.816-1.664-6.4-0.64-8.064 2.176-1.536 2.688-0.64 6.272 2.176 7.936zM785.536 626.432l50.304 18.304c3.072 1.152 6.4-0.512 7.552-3.456 1.152-3.072-0.512-6.4-3.456-7.552l-50.304-18.304c-3.072-1.152-6.4 0.512-7.552 3.456-1.152 3.072 0.384 6.4 3.456 7.552zM800.256 575.872l52.736 9.344c3.2 0.512 6.272-1.536 6.784-4.736 0.512-3.2-1.536-6.272-4.736-6.784l-52.736-9.344c-3.2-0.512-6.272 1.536-6.784 4.736-0.512 3.2 1.536 6.272 4.736 6.784zM800.256 517.76c0 3.2 2.56 5.888 5.888 5.888h53.504c3.2 0 5.888-2.56 5.888-5.888 0-3.2-2.56-5.888-5.888-5.888h-53.504c-3.328 0-5.888 2.56-5.888 5.888zM802.688 471.04l52.736-9.344c3.2-0.512 5.376-3.584 4.736-6.784-0.512-3.2-3.584-5.376-6.784-4.736l-52.736 9.344c-3.2 0.512-5.376 3.584-4.736 6.784 0.512 3.2 3.584 5.248 6.784 4.736zM790.272 419.84l50.304-18.304c3.072-1.152 4.608-4.48 3.456-7.552-1.152-3.072-4.48-4.608-7.552-3.456l-50.304 18.304c-3.072 1.152-4.608 4.48-3.456 7.552 1.152 2.944 4.48 4.608 7.552 3.456zM769.152 371.584l46.336-26.752c2.816-1.664 3.712-5.248 2.176-7.936-1.664-2.816-5.248-3.712-8.064-2.176l-46.336 26.752c-2.816 1.664-3.712 5.248-2.176 8.064 1.664 2.688 5.248 3.712 8.064 2.048zM739.84 327.808l40.96-34.432c2.432-2.048 2.816-5.76 0.768-8.192-2.048-2.432-5.76-2.816-8.192-0.768l-40.96 34.432c-2.432 2.048-2.816 5.76-0.768 8.192 2.048 2.56 5.76 2.816 8.192 0.768zM703.488 289.664l34.432-40.96c2.048-2.432 1.792-6.144-0.768-8.192-2.432-2.048-6.144-1.792-8.192 0.768l-34.432 40.96c-2.048 2.432-1.792 6.144 0.768 8.192 2.432 2.048 6.144 1.792 8.192-0.768zM661.12 258.56l26.752-46.336c1.664-2.816 0.64-6.4-2.176-7.936-2.816-1.664-6.4-0.64-8.064 2.176l-26.752 46.336c-1.664 2.816-0.64 6.4 2.176 7.936 2.816 1.536 6.4 0.64 8.064-2.176zM613.888 235.136l18.304-50.304c1.152-3.072-0.512-6.4-3.456-7.552-3.072-1.152-6.4 0.512-7.552 3.456L602.88 231.168c-1.152 3.072 0.512 6.4 3.456 7.552 3.072 1.024 6.4-0.512 7.552-3.584zM556.544 225.152c3.2 0.512 6.272-1.536 6.784-4.736l9.344-52.736c0.512-3.2-1.536-6.272-4.736-6.784-3.2-0.512-6.272 1.536-6.784 4.736l-9.344 52.736c-0.512 3.2 1.536 6.144 4.736 6.784zM273.536 290.432c2.432 2.432 6.528 2.432 8.96 0 2.432-2.432 2.432-6.528 0-8.96l-21.12-21.12c-2.432-2.432-6.528-2.432-8.96 0-2.432 2.432-2.432 6.528 0 8.96l21.12 21.12zM237.824 333.824c2.944 2.048 6.912 1.28 8.832-1.536 2.048-2.944 1.28-6.912-1.536-8.832l-24.448-17.152c-2.944-2.048-6.912-1.28-8.832 1.536s-1.28 6.912 1.536 8.832l24.448 17.152zM183.04 370.176l27.136 12.672c3.2 1.536 7.04 0.128 8.448-3.072 1.536-3.2 0.128-7.04-3.072-8.448l-27.136-12.672c-3.2-1.536-7.04-0.128-8.448 3.072-1.536 3.2-0.128 7.04 3.072 8.448zM194.688 423.68l-28.928-7.68c-3.456-0.896-6.912 1.152-7.808 4.48-0.896 3.456 1.152 6.912 4.48 7.808l28.928 7.68c3.456 0.896 6.912-1.152 7.808-4.48 0.896-3.456-1.152-6.912-4.48-7.808zM183.168 478.72l-29.824-2.56c-3.456-0.256-6.656 2.304-6.912 5.76-0.256 3.456 2.304 6.656 5.76 6.912l29.824 2.56c3.456 0.256 6.656-2.304 6.912-5.76 0.384-3.456-2.176-6.528-5.76-6.912zM181.504 535.04l-29.824 2.56c-3.456 0.256-6.144 3.456-5.76 6.912 0.256 3.456 3.456 6.144 6.912 5.76l29.824-2.56c3.456-0.256 6.144-3.456 5.76-6.912-0.256-3.456-3.328-6.016-6.912-5.76zM191.36 590.72l-28.928 7.68c-3.456 0.896-5.376 4.352-4.48 7.808 0.896 3.456 4.352 5.376 7.808 4.48l28.928-7.68c3.456-0.896 5.376-4.352 4.48-7.808-0.896-3.328-4.352-5.376-7.808-4.48zM207.232 644.224l-27.136 12.672c-3.2 1.536-4.608 5.248-3.072 8.448 1.536 3.2 5.248 4.608 8.448 3.072l27.136-12.672c3.2-1.536 4.608-5.248 3.072-8.448-1.408-3.2-5.248-4.48-8.448-3.072zM233.984 693.888l-24.448 17.152c-2.944 2.048-3.584 6.016-1.536 8.832 2.048 2.944 6.016 3.584 8.832 1.536l24.448-17.152c2.944-2.048 3.584-6.016 1.536-8.832-2.048-2.944-6.016-3.584-8.832-1.536zM310.912 775.552L293.76 800c-2.048 2.944-1.28 6.912 1.536 8.832 2.944 2.048 6.912 1.28 8.832-1.536l17.152-24.448c2.048-2.944 1.28-6.912-1.536-8.832-2.816-2.048-6.912-1.408-8.832 1.536zM349.184 840.704c3.2 1.536 7.04 0.128 8.448-3.072l12.672-27.136c1.536-3.2 0.128-7.04-3.072-8.448-3.2-1.536-7.04-0.128-8.448 3.072l-12.672 27.136c-1.408 3.2-0.128 6.912 3.072 8.448zM407.808 862.72c3.456 0.896 6.912-1.152 7.808-4.48l7.68-28.928c0.896-3.456-1.152-6.912-4.48-7.808-3.456-0.896-6.912 1.152-7.808 4.48l-7.68 28.928c-0.896 3.328 1.152 6.912 4.48 7.808zM469.376 874.112c3.456 0.256 6.656-2.304 6.912-5.76l2.56-29.824c0.256-3.456-2.304-6.656-5.76-6.912-3.456-0.256-6.656 2.304-6.912 5.76l-2.56 29.824c-0.256 3.584 2.304 6.656 5.76 6.912zM522.496 839.168l2.56 29.824c0.256 3.456 3.456 6.144 6.912 5.76 3.456-0.256 6.144-3.456 5.76-6.912l-2.56-29.824c-0.256-3.456-3.456-6.144-6.912-5.76-3.456 0.256-6.016 3.328-5.76 6.912zM578.176 830.976l7.68 28.928c0.896 3.456 4.352 5.376 7.808 4.48 3.456-0.896 5.376-4.352 4.48-7.808l-7.68-28.928c-0.896-3.456-4.352-5.376-7.808-4.48-3.328 0.896-5.376 4.48-4.48 7.808zM631.68 813.312l12.672 27.136c1.536 3.2 5.248 4.608 8.448 3.072 3.2-1.536 4.608-5.248 3.072-8.448l-12.672-27.136c-1.536-3.2-5.248-4.608-8.448-3.072-3.2 1.536-4.48 5.248-3.072 8.448zM681.344 786.688l17.152 24.448c2.048 2.944 6.016 3.584 8.832 1.536 2.944-2.048 3.584-6.016 1.536-8.832l-17.152-24.448c-2.048-2.944-6.016-3.584-8.832-1.536-2.944 1.92-3.584 5.888-1.536 8.832zM725.504 751.744l21.12 21.12c2.432 2.432 6.528 2.432 8.96 0 2.432-2.432 2.432-6.528 0-8.96l-21.12-21.12c-2.432-2.432-6.528-2.432-8.96 0-2.432 2.432-2.432 6.528 0 8.96zM763.008 709.76l24.448 17.152c2.944 2.048 6.912 1.28 8.832-1.536 2.048-2.944 1.28-6.912-1.536-8.832l-24.448-17.152c-2.944-2.048-6.912-1.28-8.832 1.536-2.048 2.816-1.408 6.784 1.536 8.832zM792.576 661.888l27.136 12.672c3.2 1.536 7.04 0.128 8.448-3.072 1.536-3.2 0.128-7.04-3.072-8.448l-27.136-12.672c-3.2-1.536-7.04-0.128-8.448 3.072-1.536 3.2-0.128 6.912 3.072 8.448zM813.44 609.536l28.928 7.68c3.456 0.896 6.912-1.152 7.808-4.48 0.896-3.456-1.152-6.912-4.48-7.808l-28.928-7.68c-3.456-0.896-6.912 1.152-7.808 4.48-0.896 3.456 1.024 6.912 4.48 7.808zM824.832 554.368l29.824 2.56c3.456 0.256 6.656-2.304 6.912-5.76 0.256-3.456-2.304-6.656-5.76-6.912l-29.824-2.56c-3.456-0.256-6.656 2.304-6.912 5.76-0.256 3.584 2.304 6.656 5.76 6.912zM826.624 498.176l29.824-2.56c3.456-0.256 6.144-3.456 5.76-6.912-0.256-3.456-3.456-6.144-6.912-5.76l-29.824 2.56c-3.456 0.256-6.144 3.456-5.76 6.912 0.256 3.456 3.328 6.016 6.912 5.76zM818.432 442.368l28.928-7.68c3.456-0.896 5.376-4.352 4.48-7.808-0.896-3.456-4.352-5.376-7.808-4.48l-28.928 7.68c-3.456 0.896-5.376 4.352-4.48 7.808 0.896 3.456 4.48 5.376 7.808 4.48zM800.768 388.992l27.136-12.672c3.2-1.536 4.608-5.248 3.072-8.448-1.536-3.2-5.248-4.608-8.448-3.072l-27.136 12.672c-3.2 1.536-4.608 5.248-3.072 8.448 1.536 3.072 5.248 4.48 8.448 3.072zM774.144 339.328l24.448-17.152c2.944-2.048 3.584-6.016 1.536-8.832-2.048-2.944-6.016-3.584-8.832-1.536L766.848 328.96c-2.944 2.048-3.584 6.016-1.536 8.832 1.92 2.816 5.888 3.584 8.832 1.536zM697.216 257.664l17.152-24.448c2.048-2.944 1.28-6.912-1.536-8.832-2.944-2.048-6.912-1.28-8.832 1.536l-17.152 24.448c-2.048 2.944-1.28 6.912 1.536 8.832 2.816 2.048 6.784 1.408 8.832-1.536zM658.944 192.512c-3.2-1.536-7.04-0.128-8.448 3.072l-12.672 27.136c-1.536 3.2-0.128 7.04 3.072 8.448 3.2 1.536 7.04 0.128 8.448-3.072l12.672-27.136c1.408-3.2 0-7.04-3.072-8.448zM600.192 170.496c-3.456-0.896-6.912 1.152-7.808 4.48l-7.68 28.928c-0.896 3.456 1.152 6.912 4.48 7.808 3.456 0.896 6.912-1.152 7.808-4.48l7.68-28.928c1.024-3.328-1.024-6.912-4.48-7.808zM534.912 201.6c3.456 0.256 6.656-2.304 6.912-5.76l2.56-29.824c0.256-3.456-2.304-6.656-5.76-6.912-3.456-0.256-6.656 2.304-6.912 5.76l-2.56 29.824c-0.256 3.456 2.304 6.528 5.76 6.912zM476.032 158.464c-3.456 0.256-6.144 3.456-5.76 6.912l2.56 29.824c0.256 3.456 3.456 6.144 6.912 5.76 3.456-0.256 6.144-3.456 5.76-6.912l-2.56-29.824c-0.256-3.456-3.328-6.016-6.912-5.76zM422.144 173.312c-0.896-3.456-4.352-5.376-7.808-4.48-3.456 0.896-5.376 4.352-4.48 7.808l7.68 28.928c0.896 3.456 4.352 5.376 7.808 4.48 3.456-0.896 5.376-4.352 4.48-7.808l-7.68-28.928zM376.448 219.776l-12.672-27.136c-1.536-3.2-5.248-4.608-8.448-3.072-3.2 1.536-4.608 5.248-3.072 8.448L364.8 225.28c1.536 3.2 5.248 4.608 8.448 3.072 3.2-1.536 4.608-5.376 3.2-8.576zM316.416 253.824c2.048 2.944 6.016 3.584 8.832 1.536 2.944-2.048 3.584-6.016 1.536-8.832l-17.152-24.448c-2.048-2.944-6.016-3.584-8.832-1.536-2.944 2.048-3.584 6.016-1.536 8.832l17.152 24.448z" fill="#FFFFFF" p-id="19071"></path></svg>'

    function link(args) {
    args = args.join(' ').split(',');
    // 获取参数
    let url = (args[0] || '').trim(),
    title = (args[1] || '点击直达链接').trim(),
    favicon = (args[2] ? `<img src="${args[2]}" class="no-lightbox">` : defaultIcon).trim(),
    desc = (args[3] || '').trim()

    return `<a href="${url}" ${url.includes('http')?'target="_blank"':''} title="${title}" referrerPolicy="no-referrer" class="link_card"><div class="link_icon">${favicon}</div><div class="link_content"><div class="link_title">${title}</div>${desc?`<div class="link_desc">${desc}</div>`:''}</div></a>`
    }

    hexo.extend.tag.register('link', link, { ends: false })
  • 创建 [blogRoot]/themes/butterfly/source/css/_tags/link.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
    .link_card
    display: flex
    margin: 10px 0
    color: var(--font-color) !important
    text-decoration: none !important
    background: var(--reward-pop)
    border-radius: 10px
    padding: 12px
    &:hover
    background: #4976f5
    color: white !important
    .link_icon,.link_content
    height: 4rem
    .link_icon
    img,svg
    height: 4rem
    width: 4rem
    .link_content
    margin-left: 1rem
    width: calc(100% - 6rem)
    overflow: hidden
    line-height: 1.5
    display: flex
    flex-direction: column
    justify-content: center
    .link_title
    font-weight: bold
    font-size: 1.2rem
    .link_title,.link_desc
    word-break: break-all
    overflow:hidden
    text-overflow: ellipsis
    &:not(:has(.link_desc)) .link_title
    display:-webkit-box
    -webkit-box-orient:vertical
    -webkit-line-clamp:2
    .link_desc
    opacity: .6
    .link_desc,&:has(.link_desc) .link_title
    white-space: nowrap

使用参数

1
2
3
4
5
6
7
8
9
10
11
<!-- 使用html是为了高亮代码,不必在意 -->
<!-- 参数如下: -->
{% link 链接,标题,图标,介绍 %}
<!-- 示例如下: -->
{% link https://meuicat.com/,Leonus,https://meuicat.com/media/favicon.ico,有肉有猫有生活. %}
<!-- 你也可以什么都不填,将会全部使用默认值,如下: -->
{% card %}
<!-- 你也可以省略部分内容,如下: -->
{% link https://meuicat.com/ %}
<!-- 位置在后面的参数不填的话可以直接省略,但是如果中间的不想填必须留空,如下: -->
{% link https://meuicat.com/,,,有肉有猫有生活. %}
参数 描述 默认值
链接 如果连接中包含http则新标签打开,否则本标签页打开
标题 网站的标题 点击直达链接
图标 网站favicon链接
介绍 网站的description

页脚透明

  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    #footer {
    background: rgb(255 255 255 / 0%);
    color: #000;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    backdrop-filter: saturate(100%) blur(5px)
    }

    #footer::before {
    background: rgba(255,255,255,.15)
    }

    #footer #footer-wrap {
    color: var(--font-color)
    }

    #footer #footer-wrap a {
    color: var(--font-color)
    }

    /* 页脚透明 */

网站自动变灰

  • 在自建的JS文件 [blogRoot]/source/js/icat.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
    if(PublicSacrificeDay()){
    document.getElementsByTagName("html")[0].setAttribute("style","filter:gray !important;filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);");
    }

    function PublicSacrificeDay(){
    var PSFarr=new Array("0707","0909","0918","1109","1213");
    var currentdate = new Date();
    var str = "";
    var mm = currentdate.getMonth()+1;
    if(currentdate.getMonth()>9){
    str += mm;
    }else{
    str += "0" + mm;
    }
    if(currentdate.getDate()>9){
    str += currentdate.getDate();
    }else{
    str += "0" + currentdate.getDate();
    }
    if(PSFarr.indexOf(str)>-1){
    return 1;
    }else{
    return 0;
    }
    }

    // 自动网站变灰
    // 0707 - 七七事变
    // 0909 - 毛主席忌辰
    // 0918 - 九一八事变
    // 1109 - 娣外公忌辰
    // 1213 - 南京公祭日

个性定位欢迎语

  • 进入 腾讯位置服务 应用管理界面

  • 点击 创建应用 ,应用名称和类型随便填

  • 在新创建的应用中点击添加 key ,产品选择 WebServiceAPI ,域名白名单填自己的域名或不填

  • 把得到的 key 记下; 如果开启白名单记得把localhost也加上

  • _config.butterfly.yml 中的 inject 下的 head 引入文件

    1
    2
    3
    4
    5
    inject:
    head:
    - <script type="text/javascript" src="https://unpkg.zhimg.com/jquery@latest/dist/jquery.min.js"></script>
    bottom:
    - ···
  • 创建 [blogRoot]/source/js/txmap.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    //get请求
    $.ajax({
    type: 'get',
    url: 'https://apis.map.qq.com/ws/location/v1/ip',
    data: {
    key: '你获取的key',
    output: 'jsonp',
    },
    dataType: 'jsonp',
    success: function (res) {
    ipLoacation = res;
    }
    })
    function getDistance(e1, n1, e2, n2) {
    const R = 6371
    const { sin, cos, asin, PI, hypot } = Math
    let getPoint = (e, n) => {
    e *= PI / 180
    n *= PI / 180
    return { x: cos(n) * cos(e), y: cos(n) * sin(e), z: sin(n) }
    }

    let a = getPoint(e1, n1)
    let b = getPoint(e2, n2)
    let c = hypot(a.x - b.x, a.y - b.y, a.z - b.z)
    let r = asin(c / 2) * 2 * R
    return Math.round(r);
    }

    function showWelcome() {

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

    //根据本地时间切换欢迎语
    let timeChange;
    let date = new Date();
    if (date.getHours() >= 5 && date.getHours() < 11) timeChange = "<span>🌤️ 早上好,一日之计在于晨</span>";
    else if (date.getHours() >= 11 && date.getHours() < 13) timeChange = "<span>☀️ 中午好,记得午休喔~</span>";
    else if (date.getHours() >= 13 && date.getHours() < 17) timeChange = "<span>🕞 下午好,饮茶先啦!</span>";
    else if (date.getHours() >= 17 && date.getHours() < 19) timeChange = "<span>🚶‍♂️ 即将下班,记得按时吃饭~</span>";
    else if (date.getHours() >= 19 && date.getHours() < 24) timeChange = "<span>🌙 晚上好,夜生活嗨起来!</span>";
    else timeChange = "夜深了,早点休息,少熬夜";

    try {
    //自定义文本和需要放的位置
    document.getElementById("welcome-info").innerHTML =
    `&emsp;&emsp;${timeChange} <br>欢迎来自 <b><span style="color: var(--icat-ip-color);font-size: var(--icat-gl-size)">${pos}</span></b> 的喵友,当前位置距博主约 <b><span style="color: var(--icat-ip-color)">${dist}</span></b> 公里!<br>&emsp;&emsp;您IP地址为:<b><span>${ip}</span></b><br>&emsp;&emsp;${posdesc} <br><br>`;
    } catch (err) {
    // console.log("Pjax无法获取#welcome-info元素🙄🙄🙄")
    }
    }
    window.onload = showWelcome;
    // 如果使用了pjax在加上下面这行代码
    document.addEventListener('pjax:complete', showWelcome);
  • _config.butterfly.yml 中的 inject 下的 bottom 引入 txmap.js

    1
    2
    3
    4
    5
    inject:
    head:
    - ···
    bottom:
    - <script async data-pjax src="/js/txmap.js"></script> # 腾讯地图定位 - API
  • 修改 [blogRoot]/theme/butterfly/latout/includes/widget/card_announcement.pug
    + 号直接删除 即是正常缩进)

    1
    2
    3
    4
    5
    6
    7
    if theme.aside.card_announcement.enable
    .card-widget.card-announcement
    + #welcome-info
    .item-headline
    i.fas.fa-bullhorn.fa-shake
    span= _p('aside.card_announcement')
    .announcement_content!= theme.aside.card_announcement.content
  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增

    1
    2
    3
    4
    5
    6
    7
    #welcome-info {
    border-radius: 14px;
    --icat-ip-color: #49B1F5;
    --icat-gl-size: 16px!important;
    }

    /* 公告顶部欢迎信息 */

关于页美化

效果预览

创建数据

  • 创建 [blogRoot]/source/about/index.md 来生成页面 page

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 关于本站
    date: 2021-10-16 13:42:00
    type: about
    top_img: false
    aside: false
    ---
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug
    + 号直接删除 即是正常缩进)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
        case page.type
    when 'essay'
    include includes/page/essay.pug
    when 'photo'
    include includes/page/photo.pug
    when 'tags'
    include includes/page/tags.pug
    when 'link'
    include includes/page/flink.pug
    + when 'about'
    + include includes/page/about.pug
    when 'categories'
    include includes/page/categories.pug
  • 创建 [blogroot]/themes/butterfly/layout/includes/page/about.pug

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    #about-page
    .author-box
    .author-img
    img.no-lightbox(src='/media/avatar.jpg')
    .image-dot
    .author-content
    .author-content-item.myInfoAndSayHello
    .title1 Hey,很高兴认识你👋
    .title2
    | 我是
    span.inline-word 亦封
    .title1
    | 是一名 自媒体iCat博主 &
    span.inline-word 数控项目师
    .aboutsiteTips.author-content-item
    .author-content-item-tips 追求
    h2
    | 源于
    br
    | 热爱而去
    span.inline-word 体验
    .mask
    span.first-tips 旅行
    |
    span 生活
    |
    span(data-up) 设计
    |
    span(data-show) 感受

    .hello-about
    .cursor(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
    .shapes
    .shape.shape-1(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
    .shape.shape-2(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
    .shape.shape-3(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
    .content
    h1 MeuiCat

    .author-content
    .author-content-item.skills
    .card-content
    .author-content-item-tips 技能
    span.author-content-item-title 极致创造
    .skills-style-group
    .tags-group-all
    .tags-group-wrapper
    each i in site.data.creativity
    - const evenNum = i.creativity_list.filter((x, index) => index % 2 === 0);
    - const oddNum = i.creativity_list.filter((x, index) => index % 2 === 1);
    each item, index in i.creativity_list
    if ((index+1 <= evenNum.length) && (index+1 <= oddNum.length))
    .tags-group-icon-pair
    .tags-group-icon(style=`background: ${evenNum[index].color}`)
    img.no-lightbox(title=evenNum[index].name, src=evenNum[index].icon)
    .tags-group-icon(style=`background: ${oddNum[index].color}`)
    img.no-lightbox(title=oddNum[index].name, src=oddNum[index].icon)
    .skills-list
    each i in site.data.creativity
    each item, index in i.creativity_list
    .skill-info
    .skill-icon(style=`background: ${item.color}`)
    img.no-lightbox(title=item.name, src=item.icon)
    .skill-name
    span=item.name
    .etc ...
    .author-content-item.careers
    .card-content
    .author-content-item-tips 生涯
    span.author-content-item-title 無限進步
    .careers-group
    .careers-item
    .circle(style='background:#357ef5')
    .name EC/DC | 电商设计师
    .careers-item
    .circle(style='background:#937df7')
    .name EC/TP | 运营规划师
    .careers-item
    .circle(style='background:#00d0e1')
    .name UGC | 自媒体IP
    .careers-item
    .circle(style='background:#ff0000')
    .name CNC/PE | 数控项目师
    img.author-content-img.no-lightbox(alt='生涯', src='https://yife68.gitee.io/icat-pic-2023/blog/2.png')

    .author-content
    .about-statistic.author-content-item
    .card-content
    .author-content-item-tips 数据
    span.author-content-item-title 访问统计
    #statistic
    .post-tips
    | 统计信息来自
    a(href='https://invite.51.la/1NzKqTeb?target=V6', target='_blank', rel='noopener nofollow') 51la网站统计
    .banner-button-group
    a.banner-button(onclick='pjax.loadUrl("/archives/")', data-pjax-state)
    i.iconfont.icat-51la
    |
    span.banner-button-text 文章隧道
    .author-content-item-group.column.mapAndInfo
    .author-content-item.map.single
    span.map-title
    | 现在住在
    b 上海 虹口
    .author-content-item.selfInfo.single
    div
    span.selfInfo-title 生于
    |
    span.selfInfo-content(style='color:#43a6c6') 2002
    div
    span.selfInfo-title 星座
    |
    span.selfInfo-content(style='color:#c69043') 狮子座
    div
    span.selfInfo-title 现在职业
    |
    span.selfInfo-content(style='color:#b04fe6') 数控工程/项目师

    .author-content
    .author-content-item.personalities
    .author-content-item-tips 性格
    span.author-content-item-title 活动家
    .title2(style='color:#56a178') ENFP-T
    .post-tips
    | 在
    a(href='https://www.16personalities.com/', target='_blank', rel='noopener nofollow') 16Personalities
    | 了解关于
    a(target='_blank', rel='noopener external nofollow', href='https://www.16personalities.com/enfp-personality?utm_source=welcome-turbulent-campaigner&utm_medium=email&utm_campaign=results&utm_content=type-personality-0') 活动家
    | 的更多信息
    .image
    img.no-lightbox(src='https://www.16personalities.com/static/images/personality-types/avatars/email/large/ENFP_male.png?v=1')
    .author-content-item.myphoto
    img.author-content-img.no-lightbox(alt='img', src='https://yife68.gitee.io/icat-pic-2023/blog/6.png')

    .author-content
    .author-content-item.maxim
    .author-content-item-tips 座右铭
    span.maxim-title
    span(style='opacity:.6;margin-bottom:8px') 足够优秀
    |
    span 再大方拥有
    .author-content-item.buff
    .card-content
    .author-content-item-tips 特长
    span.buff-title
    span(style='opacity:.6;margin-bottom:8px')
    | 说走就走的
    span.inline-word 追风狂魔
    |
    span
    | 各项学习能力
    span.inline-word MAX
    .card-background-icon
    i.fa-solid.fa-dice-d20

    .author-content
    .author-content-item.game-yuanshen
    .card-content
    .author-content-item-tips 爱好游戏
    span.author-content-item-title Minecraft
    .content-bottom
    .tips.game-yuanshen-uid ID: Beam_Sealed
    .author-content-item.comic-content
    .card-content
    .author-content-item-tips 爱好电影
    span.author-content-item-title 动物世界
    .content-bottom
    .banner-button-group
    a.banner-button(onclick='window.open("https://movie.douban.com/subject/26925317/")', data-pjax-state)
    i.iconfont.icat-play
    |
    span.banner-button-text 豆瓣详情

    .author-content
    .author-content-item.like-technology
    .card-content
    .author-content-item-tips 关注偏好
    span.author-content-item-title 数码科技
    .content-bottom
    .tips 手机、电脑软硬件
    .author-content-item.like-music
    .card-content
    .author-content-item-tips 音乐偏好
    span.author-content-item-title 电子乐、Beat
    |
    span.author-content-item-title 纯音乐、名谣
    .content-bottom
    .tips 跟 亦小封 一起欣赏更多音乐
    .banner-button-group
    a.banner-button(onclick='window.open("https://music.163.com/#/user/home?id=542585674")', data-pjax-state)
    i.iconfont.icat-music
    |
    span.banner-button-text 更多推荐

    .author-content
    .create-site-post.author-content-item.single
    .author-content-item-tips 心路历程
    h1 关于本站
    h3 首先,对每一位来到这里的iCat喵友们说声 "有幸遇见 很高兴认识你" 👋
    strong 创立iCat的初衷也是想着每一个人都可以像猫咪那样过的有仪式感;傲娇性随时放射;有位猫主子宠着
    br
    strong 也是想能够有一个让自己积累知识、积累兴趣的地方;是属于自己的温暖小窝;也是偌大的社会里的属于自己的内心避风港
    br
    strong 和他人分享,会让这些成为积累和沉淀。如果能够帮助到更多的人,帮助更多人解决问题,那一定是非常棒的事情
    br
    br
    strong 与大多数垂直类的技术博客不同,这里的种类会非常的繁杂,有技能的教程干货、有生活上的吐槽和想法;所以一般我研究什么、发现了什么都会分享在这里
    br
    strong 这些就是创造 <b>MueiCat</b> 的本意,也是我分享生活的方式。有幸能和你相遇在这里,相信我们能共同留下一段美好记忆
    br
    br
    h2 博客类型
    strong 本站建立于 2021年10月16日
    br
    strong
    emp
    a(target="_blank" href="https://hexo.io/zh-cn/") Hexo
    | 强力驱动 | Theme by
    a(target="_blank" href="https://github.com/jerryc127/hexo-theme-butterfly/") Butterfly
    br
    strong 备案: <font color="red">粤ICP备2022035648号</font> | 萌备: <font color="red">萌ICP备20227060号</font>
    br
    strong 留言等信息回复请联系 个人微信(<b>y59851</b>)、TG,或者 邮箱留言
    br
    strong
    emp
    a(target="_blank" color="red" href="/Website-History/") 查看关于更多 iCat 发展历程
    br
    br
    h2 更多主页平台
    strong
    ul
    li 抖音号:y59851
    li 微信公众号:爱吃肉的猫 (Meu-iCat)、卡布是只猫、小王爱吃糖
    li Telegram:
    emp
    a(target="_blank" rel="noopener" href="https://t.me/yife68") 亦封
    li GitHub:
    emp
    a(target="_blank" rel="noopener" href="https://github.com/yife68") 亦封
    li Gitee:
    emp
    a(target="_blank" rel="noopener" href="https://gitee.com/yife68") 亦封
    h3 如果遇到问题可以去上方频道私信我!

    .author-content
    .author-content-item.single.reward
    .author-content-item-tips 致谢
    span.author-content-item-title 赞赏名单
    .author-content-item-description 非必要无需赞助!同时也感谢赞赏的喵友,让我感受到写博客这件事情能够给你们创造了价值
    each i in site.data.reward
    - let rawData = [...i.reward_list]
    .reward-list-all
    - let reward_list_amount = i.reward_list.sort((a,b)=>b.amount - a.amount)
    each item, index in reward_list_amount
    .reward-list-item
    .reward-list-item-name=item.name
    .reward-list-bottom-group
    if item.amount >= 50
    .reward-list-item-money(style='background:#ffc93e')=`¥${item.amount}`
    else
    .reward-list-item-money=`¥${item.amount + (item.suffix ? item.suffix : "")}`
    .datatime.reward-list-item-time(datatime=item.datatime)=new Date(item.datatime).toISOString().slice(0, -14)
    .reward-list-updateDate
    | 更新时间:
    time.datatime.reward-list-updateDate-time(datatime=rawData[0].datatime)=new Date(rawData[0].datatime).toISOString().slice(0, -14)
    .post-reward
    #con
    #TA-con(type='button', onclick='reward()')
    #text-con
    #linght
    #TA 为TA充电
    #tube-con
    svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
    path(d='M1 77H234.226L307.006 24H790', stroke='#e5e9ef', stroke-width='20')
    path(d='M0 140H233.035L329.72 71H1028', stroke='#e5e9ef', stroke-width='20')
    path(d='M1 255H234.226L307.006 307H790', stroke='#e5e9ef', stroke-width='20')
    path(d='M0 305H233.035L329.72 375H1028', stroke='#e5e9ef', stroke-width='20')
    rect(y='186', width='236', height='24', fill='#e5e9ef')
    ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#e5e9ef')
    circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
    ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#e5e9ef')
    circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
    #mask
    svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
    path(d='M1 77H234.226L307.006 24H790', stroke='#f25d8e', stroke-width='20')
    path(d='M0 140H233.035L329.72 71H1028', stroke='#f25d8e', stroke-width='20')
    path(d='M1 255H234.226L307.006 307H790', stroke='#f25d8e', stroke-width='20')
    path(d='M0 305H233.035L329.72 375H1028', stroke='#f25d8e', stroke-width='20')
    rect(y='186', width='236', height='24', fill='#f25d8e')
    ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#f25d8e')
    circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
    ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#f25d8e')
    circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
    #orange-mask
    svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
    path(d='M1 77H234.226L307.006 24H790', stroke='#ffd52b', stroke-width='20')
    path(d='M0 140H233.035L329.72 71H1028', stroke='#ffd52b', stroke-width='20')
    path(d='M1 255H234.226L307.006 307H790', stroke='#ffd52b', stroke-width='20')
    path(d='M0 305H233.035L329.72 375H1028', stroke='#ffd52b', stroke-width='20')
    rect(y='186', width='236', height='24', fill='#ffd52b')
    ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#ffd52b')
    circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
    ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#ffd52b')
    circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
    p#people
    | <a href="https://afdian.net/a/yife68">爱发电</a>
    b :
    | 小喵爪
    script(src=url_for(theme.CDN.option.countup_js))
    script(src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js")
    script.
    (() => {
    function isInViewPortOfOne(el) {
    if (!el) return;
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    const offsetTop = el.offsetTop;
    const scrollTop = document.documentElement.scrollTop;
    const top = offsetTop - scrollTop;
    return top <= viewPortHeight;
    }
    fetch('https://v6-widget.51.la/v6/{掩码ID}/quote.js').then(res => res.text()).then((data) => {
    let title = ['最近活跃', '今日人数', '今日访问', '昨日人数', '昨日访问', '本月访问', '总访问量']
    let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g)

    num = num.map((el) => {
    let val = el.replace(/(<\/span><span>)/g, '')
    let str = val.replace(/(<\/span><\/p>)/g, '')
    return str
    })

    let statisticEl = document.getElementById('statistic')

    // 自定义不显示哪个或者显示哪个,如下为不显示 最近活跃访客 和 总访问量
    let statistic = []
    for (let i = 0; i < num.length; i++) {
    if (!statisticEl) return
    if (i == 0 || i == num.length - 1) continue;
    statisticEl.innerHTML += '<div><span>' + title[i] + '</span><span id='+ title[i] + '>' + num[i] + '</span></div>'
    queueMicrotask(()=> {
    statistic.push(new CountUp(title[i], 0, num[i], 0, 2, {
    useEasing: true,
    useGrouping: true,
    separator: ',',
    decimal: '.',
    prefix: '',
    suffix: ''
    }))
    })
    }

    function statisticUP () {
    let statisticElment = document.querySelector('.about-statistic.author-content-item');
    if(isInViewPortOfOne(statisticElment)) {
    for (let i = 0; i < num.length; i++) {
    if (i == 0 || i == num.length - 1) continue;
    statistic[i-1].start();
    }
    document.removeEventListener('scroll', throttleStatisticUP);
    }
    }

    const selfInfoContentYear = new CountUp('selfInfo-content-year', 0, 2002, 0, 2, {
    useEasing: true,
    useGrouping: false,
    separator: ',',
    decimal: '.',
    prefix: '',
    suffix: ''
    })

    function scrollSelfInfoContentYear() {
    let selfInfoContentYearElment = document.querySelector('.author-content-item.selfInfo.single');
    if (selfInfoContentYearElment && isInViewPortOfOne(selfInfoContentYearElment)) {
    selfInfoContentYear.start()
    document.removeEventListener('scroll', throttleScrollSelfInfoContentYear);
    }
    }
    const throttleStatisticUP = btf.throttle(statisticUP, 200)
    document.addEventListener('scroll', throttleStatisticUP, {passive: true})

    const throttleScrollSelfInfoContentYear = btf.throttle(scrollSelfInfoContentYear, 200)
    document.addEventListener('scroll', throttleScrollSelfInfoContentYear, {passive: true})
    });

    var pursuitInterval = null;
    pursuitInterval = setInterval(function () {
    const show = document.querySelector('span[data-show]')
    const next = show.nextElementSibling || document.querySelector('.first-tips')
    const up = document.querySelector('span[data-up]')

    if (up) {
    up.removeAttribute('data-up')
    }

    show.removeAttribute('data-show')
    show.setAttribute('data-up', '')

    next.setAttribute('data-show', '')
    }, 2000)

    document.addEventListener('pjax:send', function(){
    clearInterval(pursuitInterval);
    });

    var helloAboutEl = document.querySelector('.hello-about')
    helloAboutEl.addEventListener("mousemove", evt => {
    const mouseX = evt.offsetX;
    const mouseY = evt.offsetY;
    gsap.set(".cursor", {
    x: mouseX,
    y: mouseY,
    })

    gsap.to(".shape", {
    x: mouseX,
    y: mouseY,
    stagger: -0.1
    })
    })
    })()
  • 创建 [blogroot]/source/_data/reward.yml 添加赞赏数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    - class_name: 赞赏
    reward_list:
    - name: 罐装旺仔
    amount: 5
    datatime: 2022-12-11
    suffix: 小喵爪
    - name: 魏安安
    amount: 9.99
    datatime: 2022-11-07
    suffix: 喵粮
    - name: 热心
    amount: 6.66
    datatime: 2021-10-29
    suffix: 喵粮
    - name: 指南针先生
    amount: 10
    datatime: 2021-11-09
    suffix: 喵粮
  • 创建 [blogroot]/source/_data/creativity.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
    - class_name: 开启创造力
    creativity_list:
    - name: Vue
    color: "#b8f0ae"
    icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633001374747b.png
    - name: React
    color: "#222"
    icon: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K
    - name: Docker
    color: "#57b6e6"
    icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/63300647df7fa.png
    - name: Photoshop
    color: "#4082c3"
    icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/63300647e1f10.png
    - name: Node
    color: "#333"
    icon: https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/svg/node-logo.svg
    - name: Webpack
    color: "#2e3a41"
    icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/26/6330ff27e5c9b.png
    - name: Pinia
    color: "#fff"
    icon: https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/pinia-logo.svg
    - name: Python
    color: "#fff"
    icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/63300647dea51.png
    - name: Vite
    color: "#937df7"
    icon: https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/vite-logo.svg
    - name: Flutter
    color: "#4499e4"
    icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633004063ff15.png
    - name: Java
    color: "#fff"
    icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633005bf0fd1e.jpg
    - name: CSS3
    color: "#2c51db"
    icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633006cc55e07.png
    - name: JS
    color: "#f7cb4f"
    icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633006eee047b.png
    - name: HTML
    color: "#e9572b"
    icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633006f9ab27d.png
    - name: Git
    color: "#df5b40"
    icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633006e37c7fd.webp
    - name: Apifox
    color: "#e65164"
    icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633007087a4dc.webp

引入CSS

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

    #page:has(#about-page) {
    border: 0;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    }

    #page:has(#about-page) .page-title {
    display: none;
    }

    .page:has(#about-page) #footer-wrap {
    opacity: 1;
    overflow: visible;
    height: auto !important;
    min-height: 16px;
    color: #666;
    }

    #web_bg ~ .page:has(#about-page) {
    background: transparent;
    }

    #about-page .author-box {
    position: relative;
    margin-bottom: 46px;
    }
    #about-page .author-box .author-img {
    margin: auto;
    border-radius: 50%;
    overflow: hidden;
    width: 180px;
    height: 180px;
    }
    #about-page .author-box .author-img img {
    border-radius: 50%;
    overflow: hidden;
    width: 180px;
    height: 180px;
    border: 6px solid var(--icat-about-background);
    }

    #about-page .author-box .image-dot {
    width: 45px;
    height: 45px;
    background: #6bdf8f;
    position: absolute;
    border-radius: 50%;
    border: 6px solid var(--icat-about-background);
    top: 50%;
    left: 50%;
    transform: translate(35px, 45px);
    }

    .author-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-top: 1rem;
    }

    #about-page .myInfoAndSayHello {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--icat-unify-white);
    background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%);
    background-size: 200%;
    animation: gradient 15s ease infinite;
    width: 59%;
    }

    .author-content-item {
    width: 49%;
    border-radius: 24px;
    background: var(--icat-unify-card-bg);
    border: var(--icat-style-border-always);
    box-shadow: var(--icat-unify-shadow-border);
    position: relative;
    padding: 1rem 2rem;
    overflow: hidden;
    }

    #about-page .myInfoAndSayHello .title1 {
    opacity: 0.8;
    line-height: 1.3;
    }

    #about-page .myInfoAndSayHello .title2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0.5rem 0;
    }
    .inline-word {
    word-break: keep-all;
    white-space: nowrap;
    }

    #about-page .myInfoAndSayHello .title1 {
    opacity: 0.8;
    line-height: 1.3;
    }

    .author-content-item.aboutsiteTips {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 39%;
    }

    .aboutsiteTips h2 {
    margin-right: auto;
    font-size: 36px;
    font-family: Helvetica;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--font-color);
    margin-top: 0;
    }

    .aboutsiteTips .mask {
    height: 36px;
    position: relative;
    overflow: hidden;
    margin-top: 4px;
    }
    .aboutsiteTips .mask span {
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 36px;
    padding-bottom: var(--offset);
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    }
    .aboutsiteTips .mask span[data-show] {
    transform: translateY(-100%);
    transition: 0.5s transform ease-in-out;
    }
    .aboutsiteTips .mask span[data-up] {
    transform: translateY(-200%);
    transition: 0.5s transform ease-in-out;
    }
    .aboutsiteTips .mask span:nth-child(1) {
    background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1);
    }
    .aboutsiteTips .mask span:nth-child(2) {
    background-image: linear-gradient(45deg, #18e198 50%, #0ec15d);
    }
    .aboutsiteTips .mask span:nth-child(3) {
    background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c);
    }
    .aboutsiteTips .mask span:nth-child(4) {
    background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f);
    }
    @media screen and (max-width: 768px) {
    .author-content-item.map {
    margin-bottom: 0;
    }
    }
    #about-page .about-statistic {
    min-height: 380px;
    width: 39%;
    background: url(https://yife68.gitee.io/icat-pic-2023/blog/3.webp) no-repeat top;
    background-size: cover;
    color: var(--icat-unify-white);
    overflow: hidden;
    }
    #about-page .about-statistic::after {
    box-shadow: 0 -159px 173px 71px #0c1c2c inset;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    }
    .author-content-item .card-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
    }

    .author-content-item .card-content .author-content-item-title {
    margin-bottom: 0.5rem;
    }
    .author-content-item .author-content-item-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    }
    #statistic {
    font-size: 16px;
    border-radius: 15px;
    width: 100%;
    color: var(--icat-unify-white);
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 1rem;
    margin-bottom: 2rem;
    }
    #statistic div span:first-child {
    opacity: 0.8;
    font-size: 0.6rem;
    }
    #statistic div span:last-child {
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    white-space: nowrap;
    }
    #statistic div {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 50%;
    margin-bottom: 0.5rem;
    }

    .post-tips {
    color: var(--icat-unify-gray);
    font-size: 14px;
    position: absolute;
    bottom: 1rem;
    left: 2rem;
    }
    .post-tips a {
    color: var(--icat-unify-gray) !important;
    border: none !important;
    }
    .author-content-item .card-content .banner-button-group {
    position: absolute;
    bottom: 1.5rem;
    right: 2rem;
    }
    .author-content-item .card-content .banner-button-group .banner-button {
    height: 40px;
    width: 124px;
    border-radius: 20px;
    justify-content: center;
    background: var(--icat-unify-card-bg);
    color: var(--font-color);
    display: flex;
    align-items: center;
    z-index: 1;
    transition: 0.3s;
    cursor: pointer;
    border-bottom: 0 !important;
    }
    .author-content-item .card-content .banner-button-group .banner-button i {
    margin-right: 8px;
    font-size: 1rem;
    }
    #about-page .author-content-item .card-content .banner-button-group .banner-button i {
    font-size: 1.15rem;
    }

    .author-content-item .card-content .banner-button-group .banner-button:hover {
    background: var(--icat-unify-main);
    color: var(--icat-unify-white);
    border-radius: 20px !important;
    }
    .author-content-item.personalities {
    position: relative;
    width: 59%;
    }

    .author-content-item.personalities .image {
    position: absolute;
    right: 30px;
    top: 10px;
    width: 220px;
    transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02);
    }
    .author-content-item.personalities .image img {
    display: block;
    margin: 0 auto 20px;
    max-width: 100%;
    transition: filter 375ms ease-in 0.2s;
    }
    .author-content-item.personalities:hover .image {
    transform: rotate(-10deg);
    }
    .author-content-item.myphoto {
    height: 60%;
    min-height: 240px;
    position: relative;
    overflow: hidden;
    width: 39%;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .author-content-item.myphoto img {
    position: absolute;
    min-width: 100%;
    object-fit: cover;
    transition: 0.6s;
    animation: coverIn 2s ease-out forwards;
    transition: transform 2s ease-out !important;
    }
    .author-content-item.myphoto:hover img {
    transform: scale(1.1);
    }
    .author-content-item:hover .card-background-icon {
    transform: rotate(20deg);
    }
    .author-content-item.personalities .title2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    }

    .author-content-item.map {
    background: url(https://yife68.gitee.io/icat-pic-2023/blog/4.png) no-repeat center;
    min-height: 160px;
    max-height: 400px;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.5rem;
    height: 60%;
    background-size: 100%;
    transition: 1s ease-in-out;
    }
    [data-theme="dark"] .author-content-item.map {
    background: url(https://yife68.gitee.io/icat-pic-2023/blog/5.png) no-repeat center;
    background-size: 100%;
    }

    .author-content-item.single {
    width: 100%;
    }

    .author-content-item.map .map-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--icat-about-maskbg);
    padding: 0.5rem 2rem;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: 1s ease-in-out;
    font-size: 20px;
    }
    .author-content-item.map .map-title b {
    color: var(--font-color);
    }
    .author-content-item.selfInfo {
    display: flex;
    min-height: 100px;
    max-height: 400px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    height: -webkit-fill-available;
    height: 40%;
    }
    .author-content-item.selfInfo div {
    display: flex;
    flex-direction: column;
    margin: 0.5rem 2rem 0.5rem 0;
    }
    .author-content-item.selfInfo .selfInfo-title {
    opacity: 0.8;
    font-size: 0.6rem;
    line-height: 1;
    margin-bottom: 8px;
    }
    .author-content-item.selfInfo .selfInfo-content {
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    }
    .author-content-item-group.column.mapAndInfo {
    width: 59%;
    }
    .author-content-item.map:hover {
    background-size: 120%;
    transition: 4s ease-in-out;
    background-position-x: 0;
    background-position-y: 36%;
    }
    .author-content-item.map:hover .map-title {
    bottom: -100%;
    }
    .author-content-item-group.column {
    display: flex;
    flex-direction: column;
    width: 49%;
    justify-content: space-between;
    }

    .post-tips a:hover {
    color: var(--icat-unify-main) !important;
    background: none !important;
    }

    .author-content-item.single.reward .reward-list-updateDate {
    color: var(--icat-unify-gray);
    font-size: 14px;
    }

    .author-content-item.single.reward .post-reward {
    position: absolute;
    margin-top: 0px;
    width: auto;
    text-align: none;
    pointer-events: none;
    right: 2rem;
    top: 2rem;
    }
    .tip-button {
    border: 0;
    border-radius: 2.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;
    }
    .coin::before,
    .coin__back,
    .coin__back::after,
    .coin__front,
    .coin__front::after,
    .coin__middle {
    border-radius: 50%;
    box-sizing: border-box;
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 3;
    }
    .coin-wrapper {
    background: 0 0;
    bottom: 0;
    height: 18rem;
    left: 0;
    opacity: 1;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    transform: none;
    transform-origin: 50% 100%;
    transition: opacity 0.2s linear 0.1s, transform 0.3s ease-out;
    width: 100%;
    }
    .coin__front::after {
    background: rgba(0, 0, 0, 0.2);
    content: "";
    opacity: var(--front-y-multiplier);
    }
    .coin__back::after {
    background: rgba(0, 0, 0, 0.2);
    content: "";
    opacity: var(--back-y-multiplier);
    }
    .coin__middle {
    background: #737c99;
    transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--middle-scale-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 {
    --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 0.1s linear 0.2s;
    width: 3.5rem;
    z-index: 3;
    }

    .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__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));
    }
    .tip-button__text {
    color: #fff;
    margin-right: 1.8rem;
    opacity: 1;
    position: relative;
    transition: opacity 0.1s linear 0.5s;
    z-index: 3;
    }
    .author-content .post-reward .reward-main {
    bottom: 0;
    top: 50px;
    left: auto;
    right: 0;
    }
    .author-content .post-reward .reward-main .reward-all:before {
    top: -11px;
    bottom: auto;
    }
    #about-page .post-reward .reward-item a:hover {
    background: transparent !important;
    }
    #about-page .post-reward .reward-item a {
    border-bottom: none !important;
    }
    #about-page .post-reward .reward-item a img {
    margin-bottom: 0 !important;
    }
    #about-page .post-reward .reward-main .reward-all {
    border-radius: 10px;
    padding: 20px 10px !important;
    }
    .post-reward .reward-main .reward-all .reward-item {
    padding: 0 8px !important;
    }
    .post-reward .reward-main .reward-all li.reward-item::before {
    content: none !important;
    }
    .post-reward .reward-main .reward-all:after {
    content: none !important;
    }
    .author-content-item.maxim {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    width: 39%;
    }
    .author-content-item .author-content-item-tips {
    opacity: 0.8;
    font-size: 0.6rem;
    margin-bottom: 0.5rem;
    }
    .author-content-item.maxim .maxim-title {
    display: flex;
    flex-direction: column;
    }
    .author-content-item.buff {
    height: 200px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(120deg, #ff27e8 0, #ff8000 100%);
    color: var(--icat-unify-white);
    background-size: 200%;
    animation: gradient 15s ease infinite;
    min-height: 200px;
    height: fit-content;
    width: 59%;
    }
    .author-content-item.buff .card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    .author-content-item.buff .buff-title {
    display: flex;
    flex-direction: column;
    }
    .card-background-icon {
    font-size: 12rem;
    opacity: 0.2;
    position: absolute;
    right: 0;
    bottom: -40%;
    transform: rotate(30deg);
    transition: 2s ease-in-out;
    }
    .author-content-item.game-yuanshen {
    background: url(https://yife68.gitee.io/icat-pic-2023/blog/7.webp) no-repeat top;
    background-size: cover;
    min-height: 300px;
    overflow: hidden;
    color: var(--icat-unify-white);
    width: 59%;
    }
    .author-content-item .content-bottom {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    .author-content-item .content-bottom .icon-group {
    display: flex;
    position: relative;
    }
    .author-content-item .content-bottom .icon-group i {
    display: inline-block;
    width: 143px;
    height: 18px;
    margin-right: 0.5rem;
    }
    .icon-pos-mid {
    background: url(https://img02.anzhiy.cn/adminuploads/1/2022/09/25/632fb9cecfc8c.png);
    }
    .author-content-item.game-yuanshen::after {
    box-shadow: 0 -69px 203px 11px #575d8b inset;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    }

    .author-content-item.comic-content {
    width: 39%;
    background: url(https://yife68.gitee.io/icat-pic-2023/blog/8.jpg) no-repeat top;
    background-size: cover;
    min-height: 300px;
    overflow: hidden;
    color: var(--icat-unify-white);
    }
    .author-content-item.comic-content::after {
    box-shadow: 0 -48px 203px 11px #505050 inset;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    }

    .author-content-item.like-technology {
    background: url(https://yife68.gitee.io/icat-pic-2023/blog/9.png) no-repeat;
    background-size: cover;
    min-height: 230px;
    color: var(--icat-unify-white);
    }

    .author-content-item.like-music {
    background: url(https://yife68.gitee.io/icat-pic-2023/blog/10.jpg) no-repeat top;
    background-size: cover;
    min-height: 400px;
    color: var(--icat-unify-white);
    overflow: hidden;
    }

    .author-content-item .card-content .banner-button-group {
    position: absolute;
    bottom: 1.5rem;
    right: 2rem;
    }

    .author-content-item.like-music::after {
    box-shadow: 0 -69px 203px 11px #453e38 inset;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    }

    @media screen and (max-width: 768px) {
    #gitcalendar {
    display: none;
    }
    [data-theme="dark"] .author-content-item .card-content .banner-button-group .banner-button {
    color: #000 !important;
    display: contents;
    }
    .author-content-item .card-content .banner-button-group .banner-button:hover {
    background: none !important;
    }
    .author-content-item.game-yuanshen .content-bottom {
    padding-bottom: 10px;
    }
    .author-content-item.game-yuanshen .game-yuanshen-uid {
    display: none;
    }
    .author-content {
    margin-top: 0;
    }
    .author-content-item {
    width: 100% !important;
    margin-top: 1rem;
    padding: 1rem;
    }
    .author-content-item.map {
    margin-bottom: 0;
    }
    .author-content-item-group.column {
    width: 100% !important;
    }
    .author-content-item.selfInfo {
    height: 95%;
    }
    .author-content-item.personalities {
    height: 170px;
    }
    .post-tips {
    left: auto;
    }
    .author-content-item.personalities .image {
    width: 90px;
    }
    .site-card-group > a {
    width: 100% !important;
    }
    .post-reward {
    display: none;
    }
    .reward-list-item {
    width: 100% !important;
    }
    .layout > div:first-child:not(.recent-posts) {
    /* border-radius: 0; */
    padding: 0 1rem !important;
    box-shadow: none !important;
    }
    .author-content-item .card-content .banner-button-group .banner-button-text {
    display: none;
    }
    .author-content-item .card-content .banner-button-group {
    right: 1rem;
    bottom: 1rem;
    }
    .author-content-item .card-content .banner-button-group .banner-button {
    background: 0 0;
    padding: 0;
    }
    .author-content-item .card-content .banner-button-group .banner-button i {
    margin-right: 0;
    font-size: 1.5rem;
    background: white;
    border-radius: 50%;
    padding: 6px;
    margin-left: 80px;
    }
    .author-content-item .card-content .banner-button-group .banner-button:hover i {
    background: var(--icat-about-background) !important;
    color: var(--icat-essay-theme);
    }
    #selfInfo-content-year {
    width: 90px;
    }
    }

    @media screen and (min-width: 768px) and (max-width: 896px) {
    .author-content-item.like-music .content-bottom .tips {
    display: none;
    }
    }

    /* 赞赏的css */

    .reward-list-all {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    }

    .reward-list-item {
    padding: 1rem;
    border-radius: 12px;
    border: var(--icat-style-border-always);
    width: calc((100% / 3) - 0.5rem);
    margin: 0 0.25rem 0.5rem 0.25rem;
    box-shadow: var(--icat-unify-shadow-border);
    }

    .reward-list-item .reward-list-item-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
    }

    .reward-list-item .reward-list-bottom-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    }

    .reward-list-item .reward-list-item-money {
    padding: 4px;
    background: var(--font-color);
    color: var(--card-bg);
    font-size: 12px;
    line-height: 1;
    border-radius: 4px;
    margin-right: 4px;
    white-space: nowrap;
    }

    .reward-list-item .reward-list-item-time {
    font-size: 12px;
    color: var(--icat-essay-secondtext);
    white-space: nowrap;
    }

    /*充电按钮的全部CSS*/

    .reward-main {
    -webkit-animation: donate_effcet .3s .1s ease both;
    -moz-animation: donate_effcet .3s .1s ease both;
    -o-animation: donate_effcet .3s .1s ease both;
    -ms-animation: donate_effcet .3s .1s ease both;
    animation: donate_effcet .3s .1s ease both;
    }

    .post-reward {
    position: relative;
    margin-top: 80px;
    width: 100%;
    text-align: center;
    pointer-events: none;
    }

    .post-reward>* {
    pointer-events: auto;
    }

    .post-reward .reward-button {
    display: inline-block;
    padding: 4px 24px;
    background: var(--btn-bg);
    color: var(--btn-color);
    cursor: pointer;
    }

    .post-reward:hover .reward-button {
    background: var(--btn-hover-color);
    }

    .post-reward:hover .reward-button>.reward-main {
    display: block;
    }

    .post-reward .reward-main {
    position: absolute;
    bottom: 40px;
    left: -23%;
    z-index: 100;
    display: none;
    padding: 0 0 15px;
    }

    .post-reward .reward-main .reward-all {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    margin: 0;
    padding: 20px 10px;
    border-radius: 4px;
    background: var(--reward-pop);
    }

    .post-reward .reward-main .reward-all:before {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 20px;
    content: '';
    }

    .post-reward .reward-main .reward-all: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: '';
    }

    .post-reward .reward-main .reward-all .reward-item {
    display: inline-block;
    padding: 0 8px;
    list-style-type: none;
    vertical-align: top;
    }

    .post-reward .reward-main .reward-all .reward-item img {
    width: 130px;
    height: 130px;
    }

    .post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
    width: 130px;
    color: #858585;
    }

    .author-content-item.single.reward .reward-list-updateDate {
    color: var(--icat-unify-gray);
    font-size: 14px;
    }

    @media screen and (max-width:768px) {
    #gitcalendar {
    display: none;
    }[ data-theme=dark] .author-content-item .card-content .banner-button-group .banner-button {
    color: #000!important;
    }

    .author-content-item .card-content .banner-button-group .banner-button:hover {
    background: 0 0!important;
    }

    #page:has(#about-page) .page-title {
    display: none;
    }

    .author-content-item.game-yuanshen .content-bottom {
    padding-bottom: 10px;
    }

    .author-content-item.game-yuanshen .game-yuanshen-uid {
    display: none;
    }

    .author-content {
    margin-top: 0;
    }

    .author-content-item {
    margin-top: 1rem;
    padding: 1rem;
    width: 100%!important;
    }

    .author-content-item.map {
    margin-bottom: 0;
    }

    .author-content-item-group.column {
    width: 100%!important;
    }

    .author-content-item.selfInfo {
    height: 95%;
    }

    .author-content-item.personalities {
    height: 170px;
    }

    .post-tips {
    left: auto;
    }

    .author-content-item.personalities .image {
    width: 90px;
    }

    .site-card-group>a {
    width: 100%!important;
    }

    .post-reward {
    display: none;
    }

    .layout>div:first-child:not(.recent-posts) {
    padding: 1rem 1rem!important;
    box-shadow: none!important;
    }

    .author-content-item .card-content .banner-button-group .banner-button-text {
    display: none;
    }

    .author-content-item .card-content .banner-button-group {
    right: 1rem;
    bottom: 1rem;
    }

    .author-content-item .card-content .banner-button-group .banner-button {
    padding: 0;
    background: 0 0;
    }

    .author-content-item .card-content .banner-button-group .banner-button i {
    margin-right: 0;
    margin-left: 80px;
    padding: 6px;
    border-radius: 50%;
    background: #fff;
    font-size: 1.15rem;
    }

    .author-content-item .card-content .banner-button-group .banner-button:hover i {
    background: var(--icat-about-background)!important;
    color: var(--icat-essay-theme);
    }

    #selfInfo-content-year {
    width: 90px;
    }
    }

    @media screen and (min-width:768px) and (max-width:896px) {
    .author-content-item.like-music .content-bottom .tips {
    display: none;
    }
    }

    #console.reward-show,#console.show {
    opacity: 1;
    pointer-events: all;
    }

    #console.reward-show .console-mask,#console.show .console-mask {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: blur(20px);
    }

    .console-card-group-reward {
    display: none;
    opacity: 0;
    }

    .reward-show .console-card-group-reward {
    position: absolute;
    display: block;
    opacity: 1;
    }

    .console-card-group-reward .reward-all {
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .console-card-group-reward .reward-all .reward-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    }

    .console-card-group-reward .reward-all .reward-item img {
    width: 230px;
    height: 230px;
    }

    @media screen and (max-width:768px) {
    .console-card-group-reward .reward-all .reward-item img {
    width: 130px;
    height: 130px;
    }
    }

    .about-reward {
    position: absolute;
    top: 1rem;
    right: 2rem;
    }

    @media screen and (max-width:768px) {
    .reward .about-reward #con {
    width: 170px;
    }

    .reward #tube-con {
    display: none;
    }
    }

    .reward #con {
    position: relative;
    width: 350px;
    height: 85px;
    border-radius: 4px;
    }

    .reward #TA-con {
    position: absolute;
    top: 50%;
    left: 10%;
    width: 157px;
    height: 50px;
    border-radius: 4px;
    background-color: #f25d8e;
    box-shadow: 0 4px 4px rgba(255,112,159,.3);
    cursor: pointer;
    transform: translateY(-50%);
    }

    .reward #text-con {
    position: relative;
    margin: 0 auto;
    width: 100px;
    height: 100%;
    }

    .reward #linght {
    position: absolute;
    top: 36%;
    left: 4px;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 10px;
    border-top: 10px solid #fff;
    border-radius: 4px;
    transform: rotate(-55deg);
    }

    .reward #linght::after {
    position: absolute;
    top: -13px;
    left: -11px;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 10px;
    border-top: 10px solid #fff;
    border-radius: 4px;
    content: "";
    transform: rotate(180deg);
    }

    .reward #TA {
    float: right;
    color: #fff;
    font-size: 15px;
    line-height: 50px;
    }

    .reward #TA-con:hover {
    background-color: #ff6b9a;
    }

    .reward #tube-con {
    position: absolute;
    top: 15px;
    right: -5px;
    width: 157px;
    height: 55px;
    }

    .reward svg {
    width: 100%;
    height: 100%;
    }

    .reward #mask {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 0;
    height: 100%;
    transition: all .5s;
    }

    .reward #mask svg {
    width: 157px;
    height: 55px;
    }

    .reward #TA-con:hover+#tube-con>#mask {
    width: 157px;
    }

    .reward #TA-con:hover+#tube-con>#orange-mask {
    animation: move1 .5s linear .2s infinite;
    }

    .reward #TA-con:hover+#tube-con>#orange-mask svg {
    animation: movetwo .5s linear .2s infinite;
    }

    .reward #orange-mask {
    position: absolute;
    top: 0;
    left: -15px;
    overflow: hidden;
    width: 18px;
    height: 100%;
    }

    .reward #orange-mask svg {
    position: absolute;
    top: 0;
    left: 15px;
    width: 157px;
    height: 55px;
    }

    @keyframes move1 {
    0% {
    left: -15px;
    }

    100% {
    left: 140px;
    }
    }

    @keyframes movetwo {
    0% {
    left: 15px;
    }

    100% {
    left: -140px;
    }
    }

    .reward #people {
    position: absolute;
    top: 4px;
    right: 10px;
    color: #aaa;
    font-size: 12px;
    font-family: "雅黑";
    }

    .reward #people>b {
    color: #777;
    }
  • 新建 [blogroot]/themes/butterfly/source/css/_custom/about/careers.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
    .author-content-item.careers {
    min-height: 400px;
    }
    .author-content-item.careers .careers-group {
    margin-top: 12px;
    }
    .author-content-item.careers .careers-item {
    display: flex;
    align-items: center;
    }
    .author-content-item.careers .careers-item .circle {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 16px;
    }
    .author-content-item.careers .careers-item .name {
    color: var(--icat-essay-secondtext);
    }
    .author-content-item.careers .careers-item {
    display: flex;
    align-items: center;
    }
    .author-content-item.careers .careers-item .circle {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 16px;
    }
    .author-content-item.careers .careers-item .name {
    color: var(--icat-essay-secondtext);
    }
    .author-content-item.careers img {
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    transition: 0.6s;
    }
  • 新建 [blogroot]/themes/butterfly/source/css/_custom/about/genshinimpact.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
    :root {
    --loadingbar-background-color: #2c2b30;
    --loadingbar-prospect-color: #ece5d8;
    }

    /* html.dark body {
    background-color: #161d22;
    } */

    .loading-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 62.5px;
    transform: translate(-25%, -50%) scale(0.5);
    transition: all 0.5s;
    user-select: none;
    overflow: hidden;
    }

    .loading-bar img {
    position: absolute;
    top: 500px;
    left: 0;
    filter: drop-shadow(0 -500px 0 var(--loadingbar-background-color));
    }

    .loading-bar::after {
    content: "";
    position: absolute;
    top: 500px;
    left: 0;
    filter: drop-shadow(0 -500px 0 var(--loadingbar-prospect-color));
    width: 500px;
    height: 62.5px;
    background: url("https://yuanshen.site/imgs/loading-bar.png") no-repeat left 100%;
    background-size: 500px 62.5px;
    background-position-x: 0;
    }
    .author-content-item.game-yuanshen:hover .loading-bar::after {
    animation: loading-bar 3.5s cubic-bezier(0.28, 0.11, 0.32, 1) infinite forwards;
    }

    @media screen and (max-width: 719px) {
    .loading-bar .loading-bar {
    display: none;
    }
    }

    @media screen and (max-width: 719px) and (orientation: landscape) {
    .loading-bar .loading-bar {
    display: block !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
    }
    }

    @supports not (filter: drop-shadow(0 0 0 #fff)) {
    .loading-bar:before {
    content: "Your browser does not support the animation";
    }
    }

    @keyframes loading-bar {
    0% {
    width: 0;
    background-size: 500px 62.5px;
    }
    16.6% {
    }
    33.2% {
    }
    49.8% {
    }
    66.4% {
    }
    83% {
    width: 475px;
    }
    83.1% {
    width: 475px;
    }
    83.2% {
    width: 475px;
    }
    83.3% {
    width: 475px;
    }
    83.4% {
    width: 475px;
    }
    83.5% {
    width: 475px;
    }
    83.6% {
    width: 475px;
    }
    83.7% {
    width: 475px;
    }
    83.8% {
    width: 475px;
    }
    83.9% {
    width: 475px;
    }
    84% {
    width: 475px;
    }
    85% {
    width: 475px;
    }
    86% {
    width: 475px;
    }
    87% {
    width: 475px;
    }
    100% {
    width: 500px;
    }
    }
  • 新建 [blogroot]/themes/butterfly/source/css/_custom/about/hello-about.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
    .hello-about {
    margin: 20px auto;
    border-radius: 24px;
    background: var(--icat-unify-card-bg);
    border: var(--icat-style-border-always);
    box-shadow: var(--icat-unify-shadow-border);
    position: relative;
    overflow: hidden;
    user-select: none;
    }

    .shapes {
    position: relative;
    height: 315px;
    width: 100%;
    background: #2128bd;
    overflow: hidden;
    }

    .shape {
    will-change: transform;
    position: absolute;
    border-radius: 50%;
    }

    .shape.shape-1 {
    background: #005ffe;
    width: 650px;
    height: 650px;
    margin: -325px 0 0 -325px;
    }

    .shape.shape-2 {
    background: #ffe5e3;
    width: 440px;
    height: 440px;
    margin: -220px 0 0 -220px;
    }

    .shape.shape-3 {
    background: #ffcc57;
    width: 270px;
    height: 270px;
    margin: -135px 0 0 -135px;
    }

    .hello-about .content {
    top: 0;
    left: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 315px;
    width: 100%;
    background: #fff;
    mix-blend-mode: screen;
    }
    [data-theme="dark"] .hello-about .content {
    background: transparent;
    }
    [data-theme="dark"] .hello-about h1 {
    color: var(--icat-unify-white);
    }

    .hello-about h1 {
    font-size: 200px;
    color: #000;
    margin: 0;
    text-align: center;
    font: inherit;
    vertical-align: baseline;
    line-height: 1;
    font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    @media (min-width: 419px) {
    .hello-about h1 {
    font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));
    }
    }

    .cursor {
    position: absolute;
    background: #2128bd;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    will-change: transform;
    user-select: none;
    pointer-events: none;
    z-index: 3;
    }

    ::selection {
    color: #fff;
    background: #2128bd;
    }
  • 新建 [blogroot]/themes/butterfly/source/css/_custom/about/skills.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
    .author-content-item.skills {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 50%;
    min-height: 450px;
    }

    .author-content-item.skills .skills-style-group {
    position: relative;
    }

    .author-content-item.skills .tags-group-all {
    display: flex;
    transform: rotate(0);
    transition: 0.3s;
    }
    .author-content-item.skills .tags-group-wrapper {
    margin-top: 40px;
    display: flex;
    flex-wrap: nowrap;
    animation: rowup 60s linear infinite;
    }
    .tags-group-icon-pair {
    margin-left: 1rem;
    }
    .tags-group-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 66px;
    font-weight: 700;
    box-shadow: var(--icat-about-shadow-blackdeep);
    width: 120px;
    height: 120px;
    border-radius: 30px;
    }
    .tags-group-icon img {
    width: 60%;
    margin: 0 auto !important;
    }
    .tags-group-icon-pair .tags-group-icon:nth-child(even) {
    margin-top: 1rem;
    transform: translate(-60px);
    }
    .author-content-item.skills .skills-list {
    display: flex;
    opacity: 0;
    transition: 0.3s;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 10px;
    }
    .author-content-item.skills .skill-info {
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-top: 10px;
    background: var(--icat-about-skill-background);
    border-radius: 40px;
    padding: 4px 12px 4px 5px;
    border: var(--icat-about-style-border);
    box-shadow: var(--icat-unify-shadow-border);
    }
    .author-content-item.skills .skill-icon {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    }
    .author-content-item.skills .skill-icon img {
    width: 18px;
    height: 18px;
    margin: 0 auto !important;
    }
    .author-content-item.skills .etc {
    margin-right: 10px;
    margin-top: 15px;
    font-weight: 900;
    }

    @keyframes rowup {
    0% {
    transform: translateX(0);
    }
    100% {
    transform: translateX(-50%);
    }
    }
    .author-content-item.skills:hover .skills-style-group .tags-group-all {
    opacity: 0;
    }
    .author-content-item.skills:hover .skills-style-group .skills-list {
    opacity: 1;
    }
  • 新建 [blogroot]/themes/butterfly/source/css/_custom/about/site.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
    .site-card-group .site-card .info {
    margin-top: 0;
    }
    .site-card-group > a {
    width: calc(100% / 4 - 0.5rem);
    height: 150px;
    position: relative;
    display: block;
    margin: 0.5rem 0.25rem;
    float: left;
    overflow: hidden;
    padding: 0;
    border-radius: 8px;
    -webkit-transition: all 0.3s ease 0s, -webkit-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
    -moz-transition: all 0.3s ease 0s, -moz-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
    -o-transition: all 0.3s ease 0s, -o-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
    -ms-transition: all 0.3s ease 0s, -ms-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
    transition: all 0.3s ease 0s, transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: var(--icat-style-border) !important;
    }

    .site-card-group > a .wrapper {
    position: relative;
    }

    .site-card-group > a .cover {
    width: 100%;
    -webkit-transition: -webkit-transform 0.5s ease-out;
    -moz-transition: -moz-transform 0.5s ease-out;
    -o-transition: -o-transform 0.5s ease-out;
    -ms-transition: -ms-transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
    }

    .site-card-group > a .info,
    .site-card-group > a .wrapper .cover {
    position: absolute;
    top: 0;
    left: 0;
    }

    .site-card-group > a .info {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
    -moz-transition: -moz-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
    -o-transition: -o-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
    -ms-transition: -ms-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
    transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
    }

    .site-card-group > a .info img {
    position: relative;
    top: 45px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%);
    box-shadow: 0 0 10px rgb(0 0 0 / 30%);
    z-index: 1;
    text-align: center;
    pointer-events: none;
    }

    .site-card-group > a .info span {
    padding: 20px 10% 60px 10%;
    font-size: 16px;
    width: 100%;
    text-align: center;
    -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%);
    box-shadow: 0 0 10px rgb(0 0 0 / 30%);
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--font-color);
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    }

    .site-card-group .site-card:hover {
    border-color: var(--icat-unify-main) !important;
    background-color: var(--icat-unify-main) !important;
    -webkit-box-shadow: var(--icat-unify-shadow-theme) !important;
    box-shadow: var(--icat-unify-shadow-theme) !important;
    }
    .site-card-group > a:hover .wrapper img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    }

    .site-card-group > a .cover {
    width: 100%;
    -webkit-transition: -webkit-transform 0.5s ease-out;
    -moz-transition: -moz-transform 0.5s ease-out;
    -o-transition: -o-transform 0.5s ease-out;
    -ms-transition: -ms-transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
    }
    .site-card-group > a .wrapper img {
    height: 150px;
    pointer-events: none;
    }
    .site-card-group .site-card .wrapper img {
    -webkit-transition: -webkit-transform 0.5s ease-out !important;
    -moz-transition: -moz-transform 0.5s ease-out !important;
    -o-transition: -o-transform 0.5s ease-out !important;
    -ms-transition: -ms-transform 0.5s ease-out !important;
    transition: transform 0.5s ease-out !important;
    }
    .site-card-group > a .wrapper .fadeIn {
    -webkit-animation: coverIn 0.8s ease-out forwards;
    -moz-animation: coverIn 0.8s ease-out forwards;
    -o-animation: coverIn 0.8s ease-out forwards;
    -ms-animation: coverIn 0.8s ease-out forwards;
    animation: coverIn 0.8s ease-out forwards;
    }

    .site-card-group > a:hover .info {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    }
  • 修改 [blogroot]/themes/butterfly/source/css/index.styl
    + 号直接删除 即是正常缩进)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    if hexo-config('css_prefix')
    @import 'nib'

    @import '_third-party/normalize.min.css'
    // project
    @import 'var'
    @import '_global/*'
    @import '_highlight/highlight'
    @import '_page/*'
    @import '_layout/*'
    @import '_tags/*'
    @import '_mode/*'
    +@import '_custom/**/*.css'

    // search
    if hexo-config('algolia_search.enable')
    @import '_search/index'
    @import '_search/algolia'

    if hexo-config('local_search') && hexo-config('local_search.enable')
    @import '_search/index'
    @import '_search/local-search'
  • 如果开启了 51la统计 就需要在 _config.butterfly.yml 中的 inject 下的 head 引入文件

    1
    2
    3
    4
    5
    6
    7
    8
    inject:
    head:
    - <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> # 51统计样式
    - <script> LA.init({id:"# 自己的id",ck:"# 自己的ck"})</script> # 51统计 - id & ck
    - <script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script> # 灵雀监控样式
    - <script>new LingQue.Monitor().init({id:"# 自己的id",sendSuspicious:true});</script> # 灵雀监控 - id
    bottom:
    - ···

    其中 你的ID 为上方about.pug提到的 {掩码ID}
    你的CK 可以在 站点配置-参数设置-统计代码-手动安装(通用) 中找到

引入JS

  • 创建 [Blogroot]/source/js/reward.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
    function reward(){
    Swal.fire({
    title: '<strong>您正在为 <u>MeuiCat</u> 充电</strong>',
    html: '<b>请选择您的付款方式</b>',
    icon: 'info',
    showCancelButton: true,
    confirmButtonText:
    '<i class="iconfont icat-alipay"></i> 支付宝',
    cancelButtonText:
    '<i class="iconfont icat-weixin"></i> 微信支付',
    confirmButtonColor: '#1677FF',
    cancelButtonColor: '#2AAE67',
    }).then((result) => {
    if (result.isConfirmed) {
    Swal.fire({
    title: '感谢您',
    html: '请打开支付宝 <b>[扫一扫]</b> 以充电',
    imageUrl: 'https://yife68.gitee.io/icat-pic-2022/03/19/alipay.jpg',
    imageWidth: 175,
    imageHeight: 175,
    imageAlt: 'Custom image'
    }).then((result) => {
    Swal.fire(
    '充电成功',
    '感谢您的支持',
    'success'
    )
    })
    } else if (
    result.dismiss === Swal.DismissReason.cancel
    ) {
    Swal.fire({
    title: '感谢您',
    html: '请打开微信 <b>[扫一扫]</b> 以充电',
    imageUrl: 'https://yife68.gitee.io/icat-pic-2022/03/19/wechat.jpg',
    imageWidth: 175,
    imageHeight: 175,
    imageAlt: 'Custom image'
    }).then((result) => {
    Swal.fire(
    '充电成功',
    '感谢您的支持',
    'success'
    )
    })
    }
    })
    }
  • _config.butterfly.yml 中的 inject 下的 head 引入 reward.js

    1
    2
    3
    4
    5
    6
    inject:
    head:
    - <script type="text/javascript" src ="/js/reward.js" ></script> # 关于页面 - 打赏充电JS
    - <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.6.16/dist/sweetalert2.all.min.js"></script> # 关于页面JS
    bottom:
    - ···
  • 创建 [Blogroot]/source/js/countup.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    var CountUp = function (target, startVal, endVal, decimals, duration, options) {
    var self = this;
    self.version = function () {
    return "1.9.2";
    };
    self.options = {
    useEasing: true,
    useGrouping: true,
    separator: ",",
    decimal: ".",
    easingFn: easeOutExpo,
    formattingFn: formatNumber,
    prefix: "",
    suffix: "",
    numerals: [],
    };
    if (options && typeof options === "object") {
    for (var key in self.options) {
    if (options.hasOwnProperty(key) && options[key] !== null) {
    self.options[key] = options[key];
    }
    }
    }
    if (self.options.separator === "") {
    self.options.useGrouping = false;
    } else {
    self.options.separator = "" + self.options.separator;
    }
    var lastTime = 0;
    var vendors = ["webkit", "moz", "ms", "o"];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
    window.cancelAnimationFrame =
    window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"];
    }
    if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function (callback, element) {
    var currTime = new Date().getTime();
    var timeToCall = Math.max(0, 16 - (currTime - lastTime));
    var id = window.setTimeout(function () {
    callback(currTime + timeToCall);
    }, timeToCall);
    lastTime = currTime + timeToCall;
    return id;
    };
    }
    if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function (id) {
    clearTimeout(id);
    };
    }
    function formatNumber(num) {
    num = num.toFixed(self.decimals);
    num += "";
    var x, x1, x2, x3, i, l;
    x = num.split(".");
    x1 = x[0];
    x2 = x.length > 1 ? self.options.decimal + x[1] : "";
    if (self.options.useGrouping) {
    x3 = "";
    for (i = 0, l = x1.length; i < l; ++i) {
    if (i !== 0 && i % 3 === 0) {
    x3 = self.options.separator + x3;
    }
    x3 = x1[l - i - 1] + x3;
    }
    x1 = x3;
    }
    if (self.options.numerals.length) {
    x1 = x1.replace(/[0-9]/g, function (w) {
    return self.options.numerals[+w];
    });
    x2 = x2.replace(/[0-9]/g, function (w) {
    return self.options.numerals[+w];
    });
    }
    return self.options.prefix + x1 + x2 + self.options.suffix;
    }
    function easeOutExpo(t, b, c, d) {
    return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
    }
    function ensureNumber(n) {
    return typeof n === "number" && !isNaN(n);
    }
    self.initialize = function () {
    if (self.initialized) {
    return true;
    }
    self.error = "";
    self.d = typeof target === "string" ? document.getElementById(target) : target;
    if (!self.d) {
    self.error = "[CountUp] target is null or undefined";
    return false;
    }
    self.startVal = Number(startVal);
    self.endVal = Number(endVal);
    if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
    self.decimals = Math.max(0, decimals || 0);
    self.dec = Math.pow(10, self.decimals);
    self.duration = Number(duration) * 1000 || 2000;
    self.countDown = self.startVal > self.endVal;
    self.frameVal = self.startVal;
    self.initialized = true;
    return true;
    } else {
    self.error = "[CountUp] startVal (" + startVal + ") or endVal (" + endVal + ") is not a number";
    return false;
    }
    };
    self.printValue = function (value) {
    var result = self.options.formattingFn(value);
    if (self.d.tagName === "INPUT") {
    this.d.value = result;
    } else {
    if (self.d.tagName === "text" || self.d.tagName === "tspan") {
    this.d.textContent = result;
    } else {
    this.d.innerHTML = result;
    }
    }
    };
    self.count = function (timestamp) {
    if (!self.startTime) {
    self.startTime = timestamp;
    }
    self.timestamp = timestamp;
    var progress = timestamp - self.startTime;
    self.remaining = self.duration - progress;
    if (self.options.useEasing) {
    if (self.countDown) {
    self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration);
    } else {
    self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration);
    }
    } else {
    if (self.countDown) {
    self.frameVal = self.startVal - (self.startVal - self.endVal) * (progress / self.duration);
    } else {
    self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration);
    }
    }
    if (self.countDown) {
    self.frameVal = self.frameVal < self.endVal ? self.endVal : self.frameVal;
    } else {
    self.frameVal = self.frameVal > self.endVal ? self.endVal : self.frameVal;
    }
    self.frameVal = Math.round(self.frameVal * self.dec) / self.dec;
    self.printValue(self.frameVal);
    if (progress < self.duration) {
    self.rAF = requestAnimationFrame(self.count);
    } else {
    if (self.callback) {
    self.callback();
    }
    }
    };
    self.start = function (callback) {
    if (!self.initialize()) {
    return;
    }
    self.callback = callback;
    self.rAF = requestAnimationFrame(self.count);
    };
    self.pauseResume = function () {
    if (!self.paused) {
    self.paused = true;
    cancelAnimationFrame(self.rAF);
    } else {
    self.paused = false;
    delete self.startTime;
    self.duration = self.remaining;
    self.startVal = self.frameVal;
    requestAnimationFrame(self.count);
    }
    };
    self.reset = function () {
    self.paused = false;
    delete self.startTime;
    self.initialized = false;
    if (self.initialize()) {
    cancelAnimationFrame(self.rAF);
    self.printValue(self.startVal);
    }
    };
    self.update = function (newEndVal) {
    if (!self.initialize()) {
    return;
    }
    newEndVal = Number(newEndVal);
    if (!ensureNumber(newEndVal)) {
    self.error = "[CountUp] update() - new endVal is not a number: " + newEndVal;
    return;
    }
    self.error = "";
    if (newEndVal === self.frameVal) {
    return;
    }
    cancelAnimationFrame(self.rAF);
    self.paused = false;
    delete self.startTime;
    self.startVal = self.frameVal;
    self.endVal = newEndVal;
    self.countDown = self.startVal > self.endVal;
    self.rAF = requestAnimationFrame(self.count);
    };
    if (self.initialize()) {
    self.printValue(self.startVal);
    }
    };
  • _config.butterfly.yml 中的 CDN 下的 option 引入 countup.js
    + 号直接删除 即是正常缩进)

    1
    2
    3
    4
    5
    6
    7
    CDN:
    option:
    # 可以在这里更换部分文件,会覆盖原有的配置
    # main_css:
    ···
    # busuanzi:
    + countup_js: /js/countup.js

安装sweetalert2

  • [blogroot] 执行该命令安装插件
    1
    $ npm install sweetalert2 --save

关于about内容

  • 第4行 中的 /media/avatar.jpg 为页面最上方头像

  • 第84行 中的 https://yife68.gitee.io/icat-pic-2023/blog/2.png 为生涯板块的图像

  • 第198行第244行 为使用 Plaintext 语法撰写的心路历程,需自行修改

  • 第322行 中的 {掩码ID} 由访问统计板块中 51la统计 提供
    (需要在 站点配置-参数设置-数据挂件 中开启数据挂件)