iCat版关于页

效果预览

创建数据

  • 创建 [blogRoot]/source/about/index.md 页面
1
2
3
4
5
6
7
8
9
---
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
      when 'categories'
include includes/page/categories.pug
+ when 'about'
+ include includes/page/about.pug
default
include includes/page/default-page.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
#icat-about-page
.Personal-Introduction
.PI-box-left
.title 你好!
.title=_p('我是'+config.author)
.describe=theme.about.Personal_Introduction.describe
span.describe-tips=theme.about.Personal_Introduction.tips
.PI-button
a(href="#one") 博主信息
a(href="#two") 本站信息
a(href="#name-list") 打赏名单
.PI-box-right
.PI-img
img(src=theme.about.Personal_Introduction.image)

.about-layout.Personal-Introduction-bar
.bar-box
span.tips 生于
.title(style="color:#43a6c6")=theme.about.Personal_Introduction.bar.year
.bar-box
span.tips 星座
.title(style="color:#c69043")=theme.about.Personal_Introduction.bar.constellation
.bar-box
span.tips 爱好
.title(style="color:#d44040")=theme.about.Personal_Introduction.bar.hobby
.bar-box
span.tips 职业
.title(style="color:#b04fe6")=theme.about.Personal_Introduction.bar.career

#one
.about-layout.width.photo
.about-layout.width.map
span 现在生活在
p=theme.about.map
.width.h1-box
.box-top
.top
span 01
.title-h1 博主信息
.about-layout.box-bottom(onclick="meuicat.Introduction()")
span#Introduction MeuiCat

.Philosophical
.about-layout.P-box-left
.tips 性格
.title=theme.about.Philosophical.title
.title(style="color:#56a178")=theme.about.Philosophical.referred_to_as
.image
img(src=theme.about.Philosophical.image)
.tips-bottom 在
a(href="https://www.16personalities.com/" target="_blank") 16Personalities
| 了解关于
a(href=theme.about.Philosophical.link target="_blank")=theme.about.Philosophical.title
|&ensp;的更多信息

.about-layout.P-box-right
.tips 座右铭
span.title(style="opacity:.6;margin-bottom: 8px")=theme.about.Philosophical.motto_one
span.title=theme.about.Philosophical.motto_two
.tips-bottom=theme.about.Philosophical.motto_tips

.about-layout.Socialize
.tips 账号
.title 社交平台
.S-box
each url, icon in theme.about.Account_number
a.btn-layout(href=url_for(trim(url.split('||')[0])) target="_blank")=icon
.S-img
.img-box

#two
.h1-box
.box-top
.top
span 02
.title-h1 本站信息
.about-layout.box-bottom
span#run-time 运行时间
.information
.about-layout.Version
.V-box
.title Hexo
.tips-v V4.9.0
.V-box
.title Butterfly
.tips-v V6.3.0
.V-box
.title MeuiCat
.tips-v V3.1.1

.about-layout.Statistics
span= site.posts.length + _p('篇文章')
span.N_comments 评论数量
span= site.tags.length + _p('个分类')
span= totalcount(site) + _p('字')

.data
.about-layout.statistic
.tips 浏览
.title 访问统计
#statistic
.tips-bottom
.T-box 统计信息来自
a(href="https://user.51.la/activity/invite?cc=22L4t3" target="_blank") 51la
| 网站统计
a.T-btn(href="/charts/" target="_blank") 更多统计

.about-layout.union
.tips 共创
.title 站长联盟
.U-box
each url, icon in theme.about.Union
a.btn-layout(href=url_for(trim(url.split('||')[0])) target="_blank")=icon

.about-layout.content
.tips 心路历程
.title 关于本站的介绍
!= page.content

.about-layout#name-list
.tips 致谢
.title 赞赏名单
.tips-t 非必要无需赞助!同时也感谢赞赏的喵友,让我感受到写博客这件事情能够给你们创造了价值
.Appreciation-List
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
.reward-button
i.iconfont.icat-gift
= ' ' + _p('donate')
.reward-main
ul.reward-all
span.reward-title 感谢你赐予我前进的力量
ul.reward-group
each item in theme.reward.QR_code
- var clickTo = item.link ? item.link : item.img
li.reward-item
a(href=url_for(clickTo) target='_blank')
img.post-qr-code-img(src=url_for(item.img) alt=item.text)
.post-qr-code-desc=item.text
a.reward-btn-aifadian(href=theme.about.aifadian target="_blank")
i.iconfont.icat-aifadian
.reward-text 我的爱发电
  • 8889104106 行均可自行修改为你需要的内容

  • _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
  ···

# about
# MeuiCat设计
# https://meuicat.com/blog/78/
# --------------------------------------

about:
Personal_Introduction:
# 个人简介
image: https://img.meuicat.com/blog/17.webp
describe: 一个不太称职的科技博主日常生活记录,专注于网络产品设计、视觉摄影艺术的层次追求。还有就是一些发疯文章啦!
tips: It is precisely because of those dark and turbid past that I have achieved my shining self at this moment

bar:
year: 2002
constellation: 狮子座
hobby: 人文摄影
career: 数控项目师

map: 深圳 坪山
# 现居地

Philosophical:
# 博主信息介绍
title: 活动家
referred_to_as: ENFP-T
image: https://www.16personalities.com/static/images/personality-types/avatars/email/large/ENFP_male.png?v=1
link: https://www.16personalities.com/enfp-personality?utm_source=welcome-turbulent-campaigner&utm_medium=email&utm_campaign=results&utm_content=type-personality-0

motto_one: 活在當下 即是全部
motto_two: 熱烈且自由
motto_tips: Now is everything, warm and free

Account_number:
# 社交平台(可多项配置,无数量限制)
QQ: http://wpa.qq.com/msgrd?v=3&uin=2714344056
知乎: https://www.zhihu.com/people/yi-feng-23-58-66
哔哩哔哩: https://space.bilibili.com/383847872?spm_id_from=333.1007.0.0
简书: https://www.jianshu.com/u/335e0723f4b2
Telegram: https://t.me/yife68
稀土掘金: https://juejin.cn/user/3299011890786382
Twitter: https://twitter.com/yife68
网易云音乐: https://music.163.com/#/user/home?id=542585674
抖音: https://v.douyin.com/ieoSBPCC/
站酷: https://www.zcool.com.cn/u/25042342?share_id=1580929692
微博: https://weibo.com/u/5651487069
GitHub: https://github.com/yife68
微信公众号: meuicat.Weixin()
# xx: xxxx

Union:
# 博客联盟(可多项配置,无数量限制)
十年之约: https://www.foreverblog.cn/blog/4006.html
开往: https://travellings.cn/
BlogFinder: https://bf.zzxworld.com/s/876
个性商店: https://storeweb.cn/site/o/1674
博友圈: https://www.boyouquan.com/blogs/meuicat.com
中文博客导航: https://zhblogs.ohyee.cc/?tab=blog_list&page=1&tags=&search=%E7%88%B1%E5%90%83%E8%82%89%E7%9A%84%E7%8C%AB
# xx: xxxx

aifadian: https://afdian.net/a/yife68
# 爱发电主页
  • 创建 [blogroot]/source/_data/reward.yml 添加赞赏数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- class_name: 赞赏
reward_list:
- name: 天才少女
amount: 134
datatime: 2023-10-05
suffix: 喵粮
- name: 天才少女
amount: 52
datatime: 2023-10-05
suffix: 喵粮
- name: 我推天下第一帅
amount: 5
datatime: 2023-10-05
suffix: 喵粮
- name: 爱发电用户_401ac
amount: 5
datatime: 2023-08-02
suffix: 小喵爪
- name: _
amount: 35
datatime: 2023-06-25
suffix: 喵粮
  • 新建 [blogroot]/themes/butterfly/source/css/_page/about.styl 样式文件,并新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
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
#icat-about-page
.about-layout
border-radius: 12px
background: var(--icat-card-bg)
border: var(--style-border)
box-shadow: var(--icat-shadow-border)
position: relative
padding: 1rem 2rem
overflow: hidden
transition: 0.6s

&:hover
box-shadow: var(--icat-shadow-blue)
border-color: var(--icat-blue)

.title
color: var(--icat-fontcolor)

.title
font-size: 36px
font-weight: 700
line-height: 1.1
transition: .6s

.tips
opacity: .8
font-size: .6rem
line-height: 1
margin-bottom: 12px
display: flex

.tips-bottom
color: var(--icat-gray)
font-size: 14px
position: absolute
bottom: 1rem
left: 2rem

a
color: var(--icat-gray)
font-weight: 600

.h1-box
display: flex
flex-direction: column
justify-content: flex-end

+maxWidth768()
height: 220px

.box-top
margin: auto

.top
position: relative

span
font-size: 100px
position: absolute
top: -106px
left: -64px
margin: 0
padding: 0
opacity: .4

+maxWidth768()
display: none

.title-h1
font-size: 42px
font-weight: 700
line-height: 1.1
margin: 0.5rem 0
letter-spacing: 0.2rem
color: var(--icat-fontcolor)

.box-bottom
padding: 1.25rem 2rem
display: inline-flex
justify-content: center

span
font-size: 18px

.btn-layout
padding: 6px 18px
background: var(--icat-background)
margin: 0 18px 18px 0
border: var(--style-border)
border-radius: 8px
box-shadow: var(--icat-shadow-border)

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

.Personal-Introduction
display: flex
justify-content: space-between

.PI-box-left
margin-top: 4.25rem
color: var(--icat-fontcolor)
font-weight: 400
width: 60%
position: relative

+maxWidth768()
width: 100%
z-index: 1

.title
font-size: 42px
margin: .5rem 0
letter-spacing: .2rem

.describe
font-size: 18px
letter-spacing: .2rem
margin-top: 2.25rem
opacity: .9

+maxWidth768()
font-size: 16px
letter-spacing: 0

.describe-tips
font-size: 16px
opacity: .4

+maxWidth768()
font-size: 12px

.PI-button
position: absolute
bottom: 0
display: flex

+maxWidth768()
position: static
margin-top: 10px

a
border-radius: 8px
background: var(--icat-card-bg)
border: var(--style-border)
box-shadow: var(--icat-shadow-border)
padding: 6px 18px
transition: .6s
margin-right: 16px

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

.PI-box-right
height: 420px
overflow: hidden
width: 40%
display: flex
justify-content: center

+maxWidth768()
position: absolute
right: 0
width: 38%

.Personal-Introduction-bar
margin: 2.25rem 0
display: flex
justify-content: space-between

+maxWidth768()
flex-wrap: wrap

.bar-box
margin: 0.5rem 2rem 0.5rem 0

+maxWidth768()
width: 50%
margin: 0.5rem 0

.title
+maxWidth768()
font-size: 26px

#one
display: flex

+maxWidth768()
flex-direction: column

.width
width: calc(100% / 3 - 8px)
margin-right: 16px
aspect-ratio: 1/1

+maxWidth768()
width: 100%
margin-right: 0
margin-bottom: 16px

&:last-child
margin-right: 0

.photo
overflow: hidden
background: url(https://img.meuicat.com/blog/18.webp) no-repeat center
background-size: 130%
transition: 1s

+maxWidth768()
order: 1
padding: calc(100% / 2)

&:hover
background-size: 100%
background-position-x: 50%
background-position-y: 50%

.map
background: url(https://img.meuicat.com/blog/19.webp) no-repeat center
background-size: 100%
overflow: hidden
transition: 2s

+maxWidth768()
order: 1
padding: calc(100% / 2)

&:hover
background-size: 150%
background-position-x: 5%
background-position-y: 5%

span
bottom: -100%

span
position: absolute
bottom: 0
left: 0
width: 100%
background: var(--icat-maskbg)
padding: 1.25rem 2rem
-webkit-backdrop-filter: saturate(180%) blur(20px)
backdrop-filter: saturate(180%) blur(20px)
font-size: 18px
display: flex
align-items: center
transition: bottom 1s
border-radius: 0 0 12px 12px

p
margin: 0
font-weight: bolder

.Philosophical
margin-top: 16px
min-height: 240px
display: flex
gap: 16px

+maxWidth768()
flex-direction: column
gap: 0
margin-top: 0

.P-box-left
width: 60%
padding: 2.25rem 2rem

+maxWidth768()
width: 100%
height: 210px
margin-bottom: 16px

&:hover
.image
transform: rotate(-10deg)

.image
position: absolute
right: 30px
top: 10px
width: 220px
transition: transform 2s cubic-bezier(.13,.45,.21,1.02)

+maxWidth768()
width: 120px
right: 18px
top: 40px

.P-box-right
width: 40%
padding: 2.25rem 2rem
display: flex
flex-direction: column

+maxWidth768()
width: 100%
height: 210px


.Socialize
margin-top: 16px
padding: 2.25rem 2rem

&:hover
.S-img .img-box
transform: rotate(0deg) translateY(58%) scale(2)

.S-box
margin-top: 2.25rem
width: 60%
display: flex
flex-wrap: wrap

+maxWidth768()
width: 100%
z-index: 1
position: sticky

.S-img
width: 40%
height: 100%
position: absolute
right: 0
top: 0
display: flex
align-items: center
justify-content: center

+maxWidth768()
bottom: 0
height: 40%
top: auto

.img-box
background: url(https://img.meuicat.com/blog/21.webp) no-repeat center
background-size: contain
aspect-ratio: 8/16
height: 95%
transform: rotate(12deg) translateY(58%) scale(2)
transition: .6s

+maxWidth768()
transform: rotate(12deg) translateY(62%) scale(3)
filter: blur(2px)

#two
margin-top: 32px
display: flex

+maxWidth768()
flex-direction: column

.h1-box
width: 50%
margin-right: 16px
aspect-ratio: 1/1

+maxWidth768()
width: 100%
margin-bottom: 16px

.information
width: 100%
display: flex
flex-direction: column
justify-content: space-between

.Version
display: flex
height: 100%
margin-bottom: 16px
align-items: center
justify-content: space-around

+maxWidth768()
flex-direction: column

.V-box
display: flex
flex-direction: column
align-items: center
position: relative

+maxWidth768()
margin: 16px 0

&:nth-child(1)
&:before
background: url(https://img.meuicat.com/blog/22.webp) no-repeat center

&:nth-child(2)
&:before
background: url(https://img.meuicat.com/blog/23.webp) no-repeat center

&:nth-child(3)
&:before
background: url(https://img.meuicat.com/blog/24.webp) no-repeat center

&:before
position: absolute
right: -26px
top: -16px
filter: blur(2px)
opacity: .5
content: ""
width: 60px
height: 100%

.title
color: var(--icat-fontcolor)
z-index: 1

.Statistics
padding: 1.25rem 2rem
display: inline-flex
justify-content: space-between

+maxWidth768()
flex-wrap: wrap

span
font-size: 18px
margin-bottom: 10px

+maxWidth768()
margin-bottom: 0
width: 50%
text-align: center

.data
margin-top: 16px
display: flex
justify-content: space-between

+maxWidth768()
flex-direction: column

.statistic
width: calc(65% - 8px)
padding: 2.25rem 2rem
display: flex
flex-direction: column
background: url(https://img.meuicat.com/blog/25.webp) no-repeat center
background-size: 100%
color: var(--icat-white)

+maxWidth768()
width: 100%
margin-bottom: 16px

&:hover
.title
color: var(--icat-white)

&:before
box-shadow: 0 -159px 173px 71px #0c1c2c inset
position: absolute
content: ""
width: 100%
height: 100%
top: 0
left: 0

& > *
z-index: 1

#statistic
display: flex
justify-content: space-between
margin: auto 0

+maxWidth768()
flex-wrap: wrap
margin: 1.25rem 0

div
margin: 0 16px 16px 0

+maxWidth768()
margin: 0 0 16px
width: 50%

span:last-child
font-size: 36px
font-weight: 700
line-height: 1.1
color: var(--icat-white)

.tips-bottom
display: flex
justify-content: space-between
align-items: center
width: 100%

.T-btn
height: 40px
width: 124px
border-radius: 20px
display: flex
box-shadow: var(--icat-shadow-border)
align-items: center
justify-content: center
border: var(--style-border)
background: var(--icat-background)
margin-right: 4rem

+maxWidth768()
display: none

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

.union
width: calc(35% - 8px)
padding: 2.25rem 2rem

+maxWidth768()
width: 100%

.U-box
margin-top: 1.25rem
display: flex
flex-wrap: wrap

.content
margin-top: 16px
padding: 2.25rem 2rem

#name-list
margin-top: 16px
padding: 2.25rem 2rem

.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(--style-border)
width: calc((100% / 4) - 0.5rem)
margin: 0 0.25rem 0.5rem 0.25rem
box-shadow: var(--icat-shadow-border)
transition: .6s

+maxWidth768()
width: 100% !important

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

.reward-list-item-money
background: var(--icat-white)
opacity: .8
color: var(--icat-black)

.reward-list-item-time
color: var(--icat-white)
opacity: .6

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

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

.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-time
font-size: 12px
color: var(--icat-secondtext)
white-space: nowrap

.post-reward
position: absolute
right: 2rem
top: 2rem

.reward-main
top: 40px
right: 0
padding: .5rem 0 0

.reward-all
&:before
top: 0

.reward-button
margin-right: 0


[data-theme='dark']
#icat-about-page
#one
.map
background: url(https://img.meuicat.com/blog/20.webp) no-repeat center
background-size: 100%

&:hover
background-size: 150%
background-position-x: 5%
background-position-y: 5%

.data
.statistic
color: var(--font-color)
  • 211 行为博主信息的个人照片模块

  • 225622 行分别为日、夜状态下博主信息的现居地地图模块

  • 343 行为博主信息的社交平台模块展示图

  • 397401405 行分别为本站信息的框架模块favicon图标

  • 451 行为本站信息的访问统计模块的背景图

  • 创建 [blogRoot]/themes/butterfly/scripts/helpers/article-json.js 文件,并新增以下内容,用来生成并处理 article.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
38
39
40
41
/**
* MeuiCat
* generate json - article_comments
* developer:meuciat.com
*/

'use strict'

hexo.extend.generator.register('theData', function (locals) {
const postsData = locals.posts
.filter(post => post.path !== '/' && post.comments !== false)
.map(post => {
const link = post.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/');
return {
[link]: post.title || "暂无标题"
};
});

const pagesData = locals.pages
.filter(page => page.path !== '/' && page.comments !== false && !page.source.endsWith('.js') && !page.source.endsWith('.css'))
.map(page => {
const link = page.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/').replace('index.html', '');
return {
[link]: page.title || "暂无标题"
};
});

const combinedData = postsData.concat(pagesData);

const jsonData = combinedData.reduce((acc, obj) => {
const key = Object.keys(obj)[0];
const value = obj[key];
acc[key] = value;
return acc;
}, {});

return {
path: 'article.json',
data: JSON.stringify(jsonData)
};
});
  • 创建 [blogRoot]/source/js/about.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
97
function whenDOMReady() {
if (location.pathname.startsWith('/about/')) meuicat.comments(), meuicat.Introduction(), meuicat.runtimen(), meuicat.fiftyonela();
}

whenDOMReady() // 打开网站先执行一次
document.addEventListener("pjax:complete", whenDOMReady) // pjax加载完成(切换页面)后再执行一次

let lastSayHello = "";
var meuicat = {
comments: function() {
fetch('/article.json')
.then(res => res.json())
.then(articleData => {
const urls = Object.keys(articleData);

fetch('{TWIKOO_LINK}', {
method: "POST",
body: JSON.stringify({ event: "GET_RECENT_COMMENTS", accessToken: "{YOUR_TOKEN}", includeReply: true, pageSize: -1 }),
headers: { 'Content-Type': 'application/json' }
})
.then(res => res.json())
.then(({ data }) => {
const totalComments = data.length;
const commentElements = document.querySelectorAll('.N_comments');
commentElements.forEach(element => {
if (element.classList.contains('N_comments')) {
element.innerText = totalComments + '条评论';
} else {
console.log(`iCat提醒您:\n\n评论总数功能无法获取到正确的元素,请检查页面是否正常!\n\n教程地址:https://meuicat.com/blog/78/`);
}
});
});
});
}, // 总评论数量
Introduction: function() {
const e = [
"🤖️ 数码科技爱好者",
"🔍 分享与热心帮助",
"🏠 智能家居小能手",
"🔨 设计开发一条龙",
"📷 人文摄影的坚定者",
"🏃 脚踏实地行动派",
"📚 热爱阅读的书虫迷",
"🎵 薛之谦七年热爱粉",
"🏋️‍♀️ 坚韧不拔的健身达人",
"🍜 走哪吃哪的美食迷",
"🎮 Minecraft骨灰级玩家",
"👨‍🍳 一位爱做饭的程序猿",
],
t = document.getElementById("Introduction");
let o = e[Math.floor(Math.random() * e.length)];
for (; o === lastSayHello;) o = e[Math.floor(Math.random() * e.length)];
(t.textContent = o), (lastSayHello = o);
}, // about 个人介绍词
runtimen: function() {
let t = new Date("2021/10/15 00:00:00")
.getTime(),
n = new Date()
.getTime(),
a = Math.round((n - t) / 1e3),
l = (a / 7884e4)
.toFixed(2);
let c = document.getElementById("run-time");
c && (c.innerHTML = `已稳定运行 ${l} 坤年 🏀`),
setTimeout(meuicat.runtime, 1e3);
}, // about 运行时间
fiftyonela: function() {
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 activeVisitors = num[0]

// 添加最近活跃访客的内容
let TBoxEl = document.querySelector('.T-box')
if (TBoxEl) {
TBoxEl.innerHTML = '最近活跃:' + activeVisitors + '&ensp;|&ensp;' + TBoxEl.innerHTML
}

// 自定义不显示哪个或者显示哪个,如下不显示总访问量
for (let i = 0; i < num.length; i++) {
if (!statisticEl) return
if (i == 0 || i == num.length - 1) continue;
statisticEl.innerHTML += '<div><span class="tips">' + title[i - 1] + '</span><span id=' + title[i - 1] + '>' + num[i] + '</span></div>'
}
});
} // about 51la统计显示
}
  • 1618 行里的{TWIKOO_LINK}需填入你的Twikoo地址,{YOUR_TOKEN}则为Twikoo的Token

  • 56 行的初始时间可自行更改

  • 68 行的{掩码ID}由 51la统计 提供
    (需要在 站点配置-参数设置-数据挂件 中开启数据挂件即可显示)

  • _config.butterfly.yml 主题配置文件中 inject 下的 head 引入51la统计文件

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

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
bottom:
- ···

···

上述皆可在 站点配置-参数设置-统计代码-手动安装(通用) 中找到

  • _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 about.js 文件
1
2
3
4
5
6
7
8
9
  ···

inject:
head:
···
bottom:
- <script type="text/javascript" src="/js/about.js"></script> # about关于页 - 处理函数

···
  • 心路历程模块的内容可直接写在md文件里;新增 [blogRoot]/source/about/index.md 页面内容
1
2
3
4
5
6
7
首先,对每一位来到这里的iCat喵友们说声 "有幸遇见 很高兴认识你" 👋
创立iCat的初衷也是想着每一个人都可以像猫咪那样过的有仪式感;傲娇性随时放射;有位猫主子宠着
也是想能够有一个让自己积累知识、积累兴趣的地方;是属于自己的温暖小窝;也是偌大的社会里的属于自己的内心避风港
和他人分享,会让这些成为积累和沉淀。如果能够帮助到更多的人,帮助更多人解决问题,那一定是非常棒的事情

与大多数垂直类的技术博客不同,这里的种类会非常的繁杂,有技能的教程干货、有生活上的吐槽和想法;所以一般我研究什么、发现了什么都会分享在这里
这些就是创造 MueiCat 的本意,也是我分享生活的方式。有幸能和你相遇在这里,相信我们能共同留下一段美好记忆

Heo版关于页

此版本关于页剔除了部分没用到的功能,所以跟Heo的关于页会有些许出入,整体效果可在下方查看

效果预览

创建数据

  • 创建 [blogRoot]/source/about/index.md 页面
1
2
3
4
5
6
7
8
9
---
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
      when 'categories'
include includes/page/categories.pug
+ when 'about'
+ include includes/page/about.pug
default
include includes/page/default-page.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
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
#icat-about-page
.icat-author-box
.icat-author-img
img.no-lightbox(src='https://s11.ax1x.com/2023/07/07/pCc1TSO.jpg')
.image-dot
.icat-author-content
.icat-author-content-item.myInfoAndSayHello
.title-one Hey,很高兴认识你👋
.title-two
| 我叫
span.inline-word 亦封
.title-one
| 是一名 自媒体iCat博主 &
span.inline-word 数控项目师
.aboutsiteTips.icat-author-content-item
.icat-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

.icat-author-content
.icat-author-content-item.skills
.card-content
.icat-author-content-item-tips 技能
span.icat-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 ...
.icat-author-content-item.careers
.card-content
.icat-author-content-item-tips 生涯
span.icat-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.icat-author-content-img.no-lightbox(alt='生涯', src='https://yife68.gitee.io/icat-pic/blog/2.webp')

.icat-author-content
.about-statistic.icat-author-content-item
.card-content
.icat-author-content-item-tips 数据
span.icat-author-content-item-title 访问统计
#statistic
.post-tips
| 统计信息来自
a(href='https://user.51.la/activity/invite?cc=22L4t3', target='_blank', rel='noopener nofollow') 51la网站统计
.icat-banner-button-group
a.banner-button(onclick='pjax.loadUrl("/census/")', data-pjax-state)
i.iconfont.icat-51la
|
span.banner-button-text 访问统计
.icat-author-content-item-group.column.mapAndInfo
.icat-author-content-item.map.single
span.map-title
| 现在住在
b 上海 虹口
.icat-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') 数控工程/项目师

.icat-author-content
.icat-author-content-item.personalities
.icat-author-content-item-tips 性格
span.icat-author-content-item-title 活动家
.title-two(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')
.icat-author-content-item.myphoto
img.icat-author-content-img.no-lightbox(alt='img', src='https://yife68.gitee.io/icat-pic/blog/6.webp')

.icat-author-content
.icat-author-content-item.maxim
.icat-author-content-item-tips 座右铭
span.maxim-title
span(style='opacity:.6;margin-bottom:8px') 山高路遠
|
span 看世界 也找自己.
.icat-author-content-item.buff
.card-content
.icat-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

.icat-author-content
.icat-author-content-item.game-yuanshen
.card-content
.icat-author-content-item-tips 爱好游戏
span.icat-author-content-item-title Minecraft
.content-bottom
.tips.game-yuanshen-uid ID: Beam_Sealed
.icat-author-content-item.comic-content
.card-content
.icat-author-content-item-tips 爱好电影
span.icat-author-content-item-title 动物世界
.content-bottom
.icat-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 豆瓣详情

.icat-author-content
.icat-author-content-item.like-technology
.card-content
.icat-author-content-item-tips 关注偏好
span.icat-author-content-item-title 数码科技
.content-bottom
.tips 手机、电脑软硬件
.icat-author-content-item.like-music
.card-content
.icat-author-content-item-tips 音乐偏好
span.icat-author-content-item-title 电子乐、Beat
|
span.icat-author-content-item-title 纯音乐、名谣
.content-bottom
.tips 跟 亦小封 一起欣赏更多音乐
.icat-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 更多推荐

.icat-author-content
.create-site-post.icat-author-content-item.single
.icat-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
emp
a(target="_blank" rel="noopener" href="/privacy/") 隐私协议
strong |
a(target="_blank" rel="noopener" href="/cookies/") Cookies政策
strong |
a(target="_blank" rel="noopener" href="/cc/") 版权协议
br
strong 留言等信息回复请联系 个人微信(<b>y59851</b>)、TG、邮箱或者 在评论区留言
br
strong
emp
a(target="_blank" color="red" href="/Website-History/") 查看关于更多 iCat 发展历程
br
h2 本站加入的博客联盟
strong
ul
li
emp
a(target="_blank" rel="noopener" href="https://www.foreverblog.cn/blog/4006.html") 十年之约
strong | 十年之约是一个记录、展示独立博客的平台,即从加入这个活动起,我们的博客10年不关闭或者更久,保持更新和活力
li
emp
a(target="_blank" rel="noopener" href="https://travellings.cn/") 开往
strong | 我们希望通过让友链接力下去,可以让流量流动起来,让网络变得开放。
li
emp
a(target="_blank" rel="noopener" href="https://bf.zzxworld.com/s/876") BlogFinder
strong | 聚合优秀的个人博客,发掘优质的个人博客文章和内容。
li
emp
a(target="_blank" rel="noopener" href="https://storeweb.cn/site/o/1674") 个性商店
strong | 一个精致的,带社交元素的个人网站发布平台,博客收录网站
li
emp
a(target="_blank" rel="noopener" href="https://boke.lu/icat-author/18") 博客录
strong | boke.lu · 博客收录展示平台
h2 更多主页平台
strong
ul
li 抖音号:y59851
li 微信公众号:卡布是只猫 (iCat-KaBu)、奇诺是只猫 (iCat-QiNuo)、美式是只猫 (iCat-MeiShi)、小王爱吃糖
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 如果遇到问题可以去上方频道私信我!

.icat-author-content
.icat-author-content-item.single.reward
.icat-author-content-item-tips 致谢
span.icat-author-content-item-title 赞赏名单
.icat-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.icat-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('.icat-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
19
20
21
22
- class_name: 赞赏
reward_list:
- name: 🌙
amount: 5.1
datatime: 2023-04-30
suffix: 喵粮
- 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
- class_name: 开启创造力
creativity_list:
- name: Vue
color: "#b8f0ae"
icon: https://s11.ax1x.com/2023/04/22/p9ZCMxP.png
- name: Docker
color: "#57b6e6"
icon: https://s11.ax1x.com/2023/04/22/p9Z9BAH.png
- name: Photoshop
color: "#4082c3"
icon: https://s11.ax1x.com/2023/04/22/p9Z9y9I.png
- name: Node
color: "#333"
icon: https://s11.ax1x.com/2023/04/22/p9ZCu8I.png
- name: AfterEffect
color: "#989bf8"
icon: https://s11.ax1x.com/2023/04/22/p9Z9NjK.png
- name: Python
color: "#fff"
icon: https://s11.ax1x.com/2023/04/22/p9Z9fHg.png
- name: Java
color: "#fff"
icon: https://s11.ax1x.com/2023/04/22/p9Z9z59.png
- name: CSS3
color: "#2c51db"
icon: https://s11.ax1x.com/2023/04/22/p9Z9TCn.png
- name: JS
color: "#f7cb4f"
icon: https://s11.ax1x.com/2023/04/22/p9Z9bvV.png
- name: HTML
color: "#e9572b"
icon: https://s11.ax1x.com/2023/04/22/p9Z9ODU.png
- name: Git
color: "#df5b40"
icon: https://s11.ax1x.com/2023/04/22/p9Z9xUJ.png
- name: illustrator
color: "#f29e39"
icon: https://s11.ax1x.com/2023/04/22/p9Z94EQ.png
  • 新建 [blogroot]/themes/butterfly/source/css/_page/about/about.styl 样式文件,并新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
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
#page:has(#icat-about-page)
border: 0
box-shadow: none !important
padding: 0 !important
background: transparent !important


.icat-author-box
position: relative
margin: 34px 0 62px

@media screen and (max-width: 768px)
margin: 34px 0 44px

.icat-author-img
margin: auto
border-radius: 50%
overflow: hidden
width: 180px
height: 180px

img
border-radius: 50%
overflow: hidden
width: 180px
height: 180px
border: 6px solid var(--icat-white)

.image-dot
width: 40px
height: 40px
background: #6bdf8f
position: absolute
border-radius: 50%
border: 6px solid var(--icat-white)
top: 50%
left: 50%
transform: translate(35px, 45px)

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

@media screen and (max-width: 768px)
margin-top: 0

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

&:hover
.card-background-icon
transform: rotate(20deg)

@media screen and (max-width: 768px)
width: 100% !important
margin-top: 1rem
padding: 1rem

.card-content
position: absolute
width: 100%
height: 100%
top: 0
left: 0
z-index: 2
display: flex
flex-direction: column
padding: 1rem 2rem

.icat-author-content-item-tips
opacity: .8
font-size: .6rem
margin-bottom: 0.5rem

.icat-author-content-item-title
font-size: 36px
font-weight: 700
line-height: 1

.skills-style-group
position: relative

.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

.skill-info
display: flex
align-items: center
margin-right: 10px
margin-top: 10px
background: var(--icat-background)
border-radius: 40px
padding: 4px 12px 4px 5px
border: var(--style-border)
box-shadow: var(--icat-shadow-border)

.skill-icon
width: 32px
height: 32px
border-radius: 32px
display: flex
align-items: center
justify-content: center
margin-right: 10px

img
width: 18px
height: 18px
margin: 0 auto !important

.etc
margin-right: 10px
margin-top: 15px
font-weight: 900

.tags-group-all
display: flex
transform: rotate(0)
transition: 0.3s

.tags-group-wrapper
margin-top: 40px
display: flex
flex-wrap: nowrap
animation: rowup 60s linear infinite

@keyframes rowup
0%
transform: translateX(0)
100%
transform: translateX(-50%)

.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-shadow-blackdeep)
width: 120px
height: 120px
border-radius: 30px

img
width: 60%
margin: 0 auto !important

&:nth-child(even)
margin-top: 1rem
transform: translate(-60px)

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

.title-one
opacity: 0.8
line-height: 1.3

.title-two
font-size: 36px
font-weight: 700
line-height: 1.1
margin: 0.5rem 0

.aboutsiteTips
display: flex
justify-content: center
align-items: flex-start
flex-direction: column
width: 39.5%

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

.inline-word
word-break: keep-all
white-space: nowrap

.mask
height: 36px
position: relative
overflow: hidden
margin-top: 4px

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

&[data-show]
transform: translateY(-100%)
transition: 0.5s transform ease-in-out

&[data-up]
transform: translateY(-200%)
transition: 0.5s transform ease-in-out

&:nth-child(1)
background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1)

&:nth-child(2)
background-image: linear-gradient(45deg, #18e198 50%, #0ec15d)

&:nth-child(3)
background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c)

&:nth-child(4)
background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f)

.skills
display: flex
justify-content: center
align-items: flex-start
flex-direction: column
width: 50%
min-height: 450px

&:hover
.skills-style-group .tags-group-all
opacity: 0
.skills-style-group .skills-list
opacity: 1

.about-statistic
min-height: 380px
width: 39%
background: url(https://yife68.gitee.io/icat-pic/blog/3.webp) no-repeat top //统计栏背景图
background-size: cover
color: var(--icat-white)
overflow: hidden

&:after
box-shadow: 0 -159px 173px 71px #0c1c2c inset
position: absolute
content: ""
width: 100%
height: 100%
top: 0
left: 0

#statistic
font-size: 16px
border-radius: 15px
width: 100%
color: var(--icat-white)
display: flex
justify-content: space-between
flex-direction: row
flex-wrap: wrap
margin-top: 1rem
margin-bottom: 2rem

div
display: flex
justify-content: space-between
flex-direction: column
width: 50%
margin-bottom: 0.5rem

span

&:first-child
opacity: 0.8
font-size: 0.6rem

&:last-child
font-weight: 700
font-size: 34px
line-height: 1
white-space: nowrap

.mapAndInfo
width: 59%

.column
display: flex
flex-direction: column
justify-content: space-between

@media screen and (max-width: 768px)
width: 100% !important

.map
background: url(https://yife68.gitee.io/icat-pic/blog/4.webp) 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

@media screen and (max-width: 768px)
margin-bottom: 0

&:hover
background-size: 120%
transition: 4s ease-in-out
background-position-x: 0
background-position-y: 22%
.map-title
bottom: -100%

.map-title
position: absolute
bottom: 0
left: 0
width: 100%
background: var(--icat-maskbg)
padding: 0.5rem 2rem
backdrop-filter: saturate(180%) blur(20px)
-webkit-backdrop-filter: blur(20px)
transition: 1s ease-in-out
font-size: 20px
border-radius: 0 0 24px 24px

b
color: var(--font-color)

.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%

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

div
display: flex
flex-direction: column
margin: 0.5rem 2rem 0.5rem 0

.selfInfo-title
opacity: 0.8
font-size: 0.6rem
line-height: 1
margin-bottom: 8px

.selfInfo-content
font-weight: 700
font-size: 34px
line-height: 1

.personalities
position: relative
width: 59%

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

.title-two
font-size: 36px
font-weight: 700
line-height: 1.1

.image
position: absolute
right: 30px
top: 10px
width: 220px
transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02)

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

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

&:hover
.image
transform: rotate(-10deg)

.myphoto
height: 60%
min-height: 240px
position: relative
overflow: hidden
width: 39%
display: flex
align-items: center
justify-content: center

img
position: absolute
min-width: 100%
object-fit: cover
transition: 0.6s
animation: coverIn 2s ease-out forwards
transition: transform 2s ease-out !important

&:hover
img
transform: scale(1.1)

.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%

.maxim-title
display: flex
flex-direction: column

.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-white)
background-size: 200%
animation: gradient 15s ease infinite
min-height: 200px
height: fit-content
width: 59%

.card-content
display: flex
flex-direction: column
justify-content: center

.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

.game-yuanshen
background: url(https://yife68.gitee.io/icat-pic/blog/7.webp) no-repeat top
background-size: cover
min-height: 300px
overflow: hidden
color: var(--icat-white)
width: 59%

&:after
box-shadow: 0 -69px 203px 11px #575d8b inset
position: absolute
content: ""
width: 100%
height: 100%
top: 0
left: 0

.comic-content
width: 39%
background: url(https://yife68.gitee.io/icat-pic/blog/8.webp) no-repeat top
background-size: cover
min-height: 300px
overflow: hidden
color: var(--icat-white)

&:after
box-shadow: 0 -48px 203px 11px #505050 inset
position: absolute
content: ""
width: 100%
height: 100%
top: 0
left: 0

.like-technology
background: url(https://yife68.gitee.io/icat-pic/blog/9.webp) no-repeat
background-size: cover
min-height: 230px
color: var(--icat-white)

.like-music
background: url(https://yife68.gitee.io/icat-pic/blog/10.webp) no-repeat top
background-size: cover
min-height: 400px
color: var(--icat-white)
overflow: hidden

&:after
box-shadow: 0 -69px 203px 11px #212121 inset
position: absolute
content: ""
width: 100%
height: 100%
top: 0
left: 0

.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(--style-border-always)
width: calc((100% / 3) - 0.5rem)
margin: 0 0.25rem 0.5rem 0.25rem
box-shadow: var(--icat-shadow-border)

@media screen and (max-width: 768px)
width: 100% !important

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

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

.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-time
font-size: 12px
color: var(--icat-secondtext)
white-space: nowrap


.post-reward
position: absolute
margin-top: 0px
width: auto
text-align: none
pointer-events: none
right: 2rem
top: 2rem

>*
pointer-events: auto


.hello-about
margin: 20px auto
border-radius: 24px
background: var(--icat-card-bg)
border: var(--style-border-always)
box-shadow: var(--icat-shadow-border)
position: relative
overflow: hidden
user-select: none

@media screen and (max-width: 768px)
margin: 1rem auto 0

.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

.shapes
position: relative
height: 315px
width: 100%
background: #2128bd
overflow: hidden
border-radius: 24px
border: var(--style-border)

.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

.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
border-radius: 24px

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)
font-size: calc((0.0989119683 * 100vw + (58.5558852621px)))


.careers
min-height: 400px

.careers-group
margin-top: 12px

.careers-item
display: flex
align-items: center

.circle
width: 16px
height: 16px
margin-right: 8px
border-radius: 16px

.name
color: var(--icat-secondtext)

img
position: absolute
left: 0
bottom: 20px
width: 100%
transition: 0.6s


.icat-banner-button-group
position: absolute
bottom: 1rem
right: 2rem

.banner-button
height: 40px
width: 124px
border-radius: 20px
box-shadow: var(--icat-shadow-border)
justify-content: center
background: var(--icat-card-bg)
color: var(--font-color)
display: flex
align-items: center
z-index: 1
transition: 0.3s
cursor: pointer

@media screen and (max-width: 768px)
width: 40px
border: var(--style-border-always)
background: var(--icat-white)
color: var(--icat-black)

i
font-size: 1.15rem

@media screen and (max-width: 768px)
font-size: .9rem

&:hover
background: var(--icat-main)
color: var(--icat-white)
border-radius: 20px !important

.banner-button-text
padding: 0 6px

@media screen and (max-width: 768px)
display: none


.post-tips
color: var(--icat-gray)
font-size: 14px
position: absolute
bottom: 1rem
left: 2rem

@media screen and (max-width: 768px)
left: auto

a
color: var(--icat-gray) !important
border: none !important


.content-bottom
margin-top: auto
display: flex
align-items: center
justify-content: space-between

.icon-group
display: flex
position: relative

i
display: inline-block
width: 143px
height: 18px
margin-right: 0.5rem


.single
width: 100% !important

#page

.page-title
display: none !important

[data-theme="dark"]
.hello-about

.content
background: transparent

h1
color: var(--icat-white)

.icat-author-content

.map
background: url(https://yife68.gitee.io/icat-pic/blog/5.webp) no-repeat center
background-size: 100%
  • 新建 [blogRoot]/themes/butterfly/source/css/about.css 样式文件,并新增以下内容
    (也可以在自建的css文件里新增内容)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
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
.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-gray);
font-size: 14px;
}
#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);
}
.about-reward {
position: absolute;
top: 1rem;
right: 2rem;
}
.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;
}

@media screen and (min-width:768px) and (max-width:896px) {
.author-content-item.like-music .content-bottom .tips {
display: none;
}
}
@media screen and (max-width:768px) {
.post-reward {
display: none;
}
.layout>div:first-child:not(.recent-posts) {
padding: 1rem 1rem!important;
box-shadow: none!important;
}
#selfInfo-content-year {
width: 90px;
}
.console-card-group-reward .reward-all .reward-item img {
width: 130px;
height: 130px;
}
.reward .about-reward #con {
width: 170px;
}
.reward #tube-con {
display: none;
}
}
/* 响应式 */

/* 打赏充电样式 */
  • 创建 [blogRoot]/source/js/reward.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
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 引入 about.css reward.js sweetalert2.all.min.js
1
2
3
4
5
6
7
8
9
10
11
  ···

inject:
head:
- <link rel="stylesheet" href="/css/about.css"> # 关于页面 - 打赏弹窗样式
- <script type="text/javascript" src ="/js/reward.js" ></script> # 关于页面 - 打赏充电JS
- <script src="https://cdn1.tianli0.top/npm/sweetalert2@11.6.16/dist/sweetalert2.all.min.js"></script> # 关于页面 - 打赏弹窗逻辑
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
8
9
  ···

CDN:
option:
# 可以在这里更换部分文件,会覆盖原有的配置
# main_css:
···
# busuanzi:
+ countup_js: /js/countup.js
  • 如果开启了 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 可以在 站点配置-参数设置-统计代码-手动安装(通用) 中找到

安装sweetalert2

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

关于about内容

  • 第4行 中的 https://s11.ax1x.com/2023/07/07/pCc1TSO.jpg 为页面最上方头像

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

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

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