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 我的爱发电

  • 第 88 、 89 、 104 、 106 行均可自行修改为你需要的内容

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

# 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://boke.lu/icat-author/18
    站点聚合平台: https://sites.link/site-info?siteType=life&siteId=64775163ea53c100a9b742ba
    博友圈: https://www.boyouquan.com/blogs/meuicat.com
    # 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 行为博主信息的个人照片模块

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

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

  • 第 397 、 401 、405 行分别为本站信息的框架模块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统计显示
}

  • 第 16 和 18 行里的{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的关于页会有些许出入，整体效果可在下方查看

效果预览

iCat V2 - 关于本站
山高路遠 看世界 也找自己.

创建数据

  • 创建 [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统计 提供
    （需要在 站点配置-参数设置-数据挂件 中开启数据挂件）