魔改前请备份，要不然出错了又不知道怎么改就完啦！！！

修改模板文件

打开"\themes\butterfly\layout\includes\page\flink.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
#article-container
  if top_img === false
    h1.page-title= page.title
  
  .flink
    if site.data.link
      each linkGroup in site.data.link
        //- 友链分类标题
        if linkGroup.class_name
          h2!= linkGroup.class_name
        
        //- 友链分类描述
        if linkGroup.class_desc
          .flink-desc!= linkGroup.class_desc
        
        //- 生成随机列表（如果需要）
        - let linkList = linkGroup.link_list.slice()
        if linkGroup.random
          - linkList.sort(() => Math.random() - 0.5)
        
        //- Butterfly 样式
        if linkGroup.flink_style === 'butterfly'
          .butterfly-flink-list
            each item in linkList
              .flink-list-item
                a(
                  href=url_for(item.link)
                  title=item.name
                  target="_blank"
                  rel="noopener"
                )
                  .flink-item-icon
                    +flink-img(item.avatar, item.name, 'flink')
                  .flink-item-info
                    .flink-item-name= item.name
                    .flink-item-desc(title=item.descr)= item.descr
        
        //- Flexcard 样式
        else if linkGroup.flink_style === 'flexcard'
          .flexcard-flink-list
            each item in linkList
              a.flink-list-card(
                href=url_for(item.link)
                target='_blank'
                rel='noopener'
                data-title=item.descr
              )
                .wrapper.cover
                  - const siteshot = item.siteshot ? url_for(item.siteshot) : `https://s0.wp.com/mshots/v1/${item.link}?w=400&h=300`
                  +flink-img(siteshot, '', 'post_page')
                  +flink-img(item.avatar, '', 'post_page')
                .info
                  +flink-img(item.avatar, item.name, 'flink')
                  span.flink-sitename= item.name
        
        //- Volantis 样式
        else if linkGroup.flink_style === 'volantis'
          .volantis-flink-list
            each item in linkList
              a.site-card(
                href=url_for(item.link)
                target='_blank'
                rel='noopener'
              )
                .img
                  - const siteshot = item.siteshot ? url_for(item.siteshot) : `https://s0.wp.com/mshots/v1/${item.link}?w=400&h=300`
                  img.no-lightbox(
                    src=siteshot
                    onerror=imgError('post_page')
                    alt=item.name
                  )
                .info
                  img.no-lightbox(
                    src=url_for(item.avatar)
                    onerror=imgError('flink')
                    alt=item.name
                  )
                  span.title= item.name
                  span.desc(title=item.descr)= item.descr
        
        //- Byer 样式
        else if linkGroup.flink_style === 'byer'
          .byer-flink-list
            each item in linkList
              .flink-list-item
                a(
                  href=url_for(item.link)
                  title=item.name
                  target="_blank"
                  rel="noopener"
                )
                  .flink-item-bar
                    span.flink-item-bar-yellow
                    span.flink-item-bar-green
                    span.flink-item-bar-red
                    span.flink-item-bar-x +
                  .flink-item-content
                    .flink-item-text
                      .flink-item-name= item.name
                      .flink-item-desc(title=item.descr)= item.descr
                    .flink-item-icon
                      img.no-lightbox(
                        src=url_for(item.avatar)
                        onerror=imgError('flink')
                        alt=item.name
                      )
        
        //- Ark 样式
        else if linkGroup.flink_style === 'ark'
          .ark-flink-list
            each item in linkList
              a.ark-flink-list-card(
                href=url_for(item.link)
                target='_blank'
                rel='noopener'
                title=item.descr
              )
                .ark-flink-progress-bar-A
                .ark-flink-progress-bar-B
                .ark-flink-progress-bar-C
                .ark-flink-content
                  .ark-flink-name
                    .flink-sitename= item.name
                    .flink-block
                  .ark-flink-avatar
                    img.no-lightbox(
                      src=url_for(item.avatar)
                      onerror=imgError('flink')
                      alt=item.name
                    )
                  .ark-flink-mask
                    .ark-flink-mask-left
                    .ark-flink-mask-right
                  .ark-flink-descr
                    .ark-flink-descr-text= item.descr
                  .ark-flink-siteshot
                    - const siteshot = item.siteshot ? url_for(item.siteshot) : `https://s0.wp.com/mshots/v1/${item.link}?w=400&h=300`
                    img.no-lightbox(
                      src=siteshot
                      onerror=imgError('post_page')
                      alt=item.name
                    )

    //- 页面内容
    != page.content

//- Mixin: 友链图片处理
mixin flink-img(src, alt, errorType)
  if theme.lazyload.enable
    img.nolazyload(
      data-lazy-src=url_for(src)
      onerror=imgError(errorType)
      alt=alt
    )
  else
    img.nolazyload(
      src=url_for(src)
      onerror=imgError(errorType)
      alt=alt
    )

//- 函数: 图片错误处理
- function imgError(type) { return `this.onerror=null;this.src='${url_for(theme.error_img[type])}'` }

注意缩进问题，整个文件全部覆盖

修改样式文件

打开"\themes\butterfly\source\css\_page\flink.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
.flink-desc
  margin: .2rem 0 .5rem
//bf原生
.butterfly-flink-list
  overflow: auto
  padding: 10px 10px 0
  text-align: center

  & > .flink-list-item
    position: relative
    float: left
    overflow: hidden
    line-height: 17px
    -webkit-transform: translateZ(0)
    height: 100px;
    padding: 10px;
    width: calc(100% / 5 - 0.5rem)
    margin: 0.5rem 0.25rem;
    border-radius: 12px;
    border: var(--style-border);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;

    +maxWidth1200()
      width: calc(50% - 15px) !important

    +maxWidth600()
      width: calc(100% - 15px) !important

    &:hover
      border-color: #101010 !important;
      background-color: #eeeeee !important;
      box-shadow: #cccccc !important;

      .flink-item-icon
        width: 0;
        height: 0;
        margin-left: -10px;
      

    &:hover:before,
    &:focus:before,
    &:active:before
      transform: scale(1)

    a
      color: var(--font-color)
      text-decoration: none

      .flink-item-icon
        float: left
        overflow: hidden
        margin: 15px 10px
        width: 60px
        height: 60px
        border-radius: 35px
        transition: all .3s ease-out
        margin: 8px 0 8px 0;
        border-radius: 50%;
        overflow: hidden;

        img
          width: 100%
          height: 100%
          transition: filter 375ms ease-in .2s, transform .3s
          object-fit: cover

      .img-alt
        display: none

.flink-item-info
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
  text-align: left;
  flex-direction: column;

  .flink-item-name
    @extend .limit-one-line
    padding: 12px 0 16px 0;
    height: auto;
    font-weight: bold
    font-size: 1.2em

  .flink-item-desc
    @extend .limit-one-line
    padding: 0
    height: 35px
    font-size: .93em
    opacity: .7;
    word-break: break-all;
    white-space: break-spaces;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

.flink-name
  margin-bottom: 5px
  font-weight: bold
  font-size: 1.5em
//flexcard卡片
#article-container img
  margin-bottom: 0.5rem;
  object-fit: cover;
  max-height: 900px;
.flexcard-flink-list
  overflow hidden
  .flink-list-card
    .wrapper img
      transition: transform .5s ease-out !important;

  & > a
    width: calc(100% / 5 - 0.5rem);
    height 150px
    position relative
    display block
    margin: 0.5rem 0.25rem;
    float left
    overflow hidden
    padding: 0;
    border-radius: 8px;
    transition all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s
    box-shadow none
    border: var(--style-border)!important;
    &:hover
      .info
        transform translateY(-100%)
      .wrapper
        img
          transform scale(1.2)
      &::before
        position: fixed
        width:inherit
        margin:auto
        left:0
        right:0
        top:10%
        border-radius: 10px
        text-align: center
        z-index: 100
        content: attr(data-title)
        font-size: 20px
        color: #fff
        padding: 10px
        background-color: rgba($theme-color,0.8)

    .cover
      width 100%
      transition transform .5s ease-out
    .wrapper
      position relative
      .fadeIn
        animation coverIn .8s ease-out forwards
      img
        height 150px
        pointer-events none
    .info
      display flex
      flex-direction column
      justify-content center
      align-items center
      width 100%
      height 100%
      overflow hidden
      border-radius 3px
      background-color hsla(0, 0%, 100%, .7)
      transition transform .5s cubic-bezier(.6, .2, .1, 1) 0s
      img
        position relative
        top 45px
        width 80px
        height 80px
        border-radius 50%
        box-shadow 0 0 10px rgba(0, 0, 0, .3)
        z-index 1
        text-align center
        pointer-events none
      span
        padding 20px 10% 60px 10%
        font-size 16px
        width 100%
        text-align center
        box-shadow 0 0 10px rgba(0, 0, 0, .3)
        background-color hsla(0, 0%, 100%, .7)
        color var(--font-color)
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
.flexcard-flink-list>a .info,
.flexcard-flink-list>a .wrapper .cover
  position absolute
  top 0
  left 0

@media screen and (max-width:1024px)
  .flexcard-flink-list
    & > a
      width calc(33.33333% - 15px)

@media screen and (max-width:600px)
  .flexcard-flink-list
    & > a
      width calc(50% - 15px)

[data-theme=dark]
  .flexcard-flink-list a .info,
  .flexcard-flink-list a .info span
    background-color rgba(0, 0, 0, .6)
  .flexcard-flink-list
    & > a
      &:hover
        &:before
          background-color: rgba(#121212,0.8);
.justified-gallery > div > img,
.justified-gallery > figure > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img,
.justified-gallery > figure > a > img,
.justified-gallery > a > svg,
.justified-gallery > div > svg,
.justified-gallery > figure > svg,
.justified-gallery > a > a > svg,
.justified-gallery > div > a > svg,
.justified-gallery > figure > a > svg
  position static!important




trans($time = 0.28s)
  transition: all $time ease
  -moz-transition: all $time ease
  -webkit-transition: all $time ease
  -o-transition: all $time ease

//volantis卡片，我的最爱
.volantis-flink-list
  display: flex
  flex-wrap: wrap
  justify-content: flex-start
  margin: -0.5 * 16px
  align-items: stretch
.site-card
  margin: 16px * 0.5
  width: "calc(100% / 4 - %s)" % 16px
  @media screen and (min-width: 2048px)
      width: "calc(100% / 5 - %s)" % 16px
  @media screen and (max-width: 768px)
      width: "calc(100% / 3 - %s)" % 16px
  @media screen and (max-width: 500px)
      width: "calc(100% / 2 - %s)" % 16px
  display: block
  line-height: 1.4
  height 100%
  .img
    width: 100%
    height 150px
    @media screen and (max-width: 500px)
      height 100px
    overflow: hidden
    border-radius: 12px * 0.5
    box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
    background: #f6f6f6
    img
      width: 100%
      height 100%
      pointer-events:none;
      // trans(.75s)
      transition: transform 2s ease
      object-fit: cover

  .info
    margin-top: 16px * 0.5
    img
      width: 32px
      height: 32px
      pointer-events:none;
      border-radius: 16px
      float: left
      margin-right: 8px
      margin-top: 2px
    span
      display: block
    .title
      font-weight: 600
      font-size: var(--global-font-size)
      color: #444
      display: -webkit-box
      -webkit-box-orient: vertical
      overflow: hidden
      -webkit-line-clamp: 1
      trans()
    .desc
      font-size: var(--global-font-size)
      word-wrap: break-word;
      line-height: 1.2
      color: #888
      display: -webkit-box
      -webkit-box-orient: vertical
      overflow: hidden
      -webkit-line-clamp: 2
  .img
    trans()
  &:hover
    .img
      box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 8px 16px 0px rgba(0, 0, 0, 0.1)
    .info .title
      color: #ff5722
//byer卡片
#article-container
  .flink
    margin-bottom: 20px

    .byer-flink-list
      overflow: auto
      padding: 10px 10px 0
      text-align: center

      & > .flink-list-item
        position: relative
        background: #ffffff
        float: left
        overflow: hidden
        margin: 15px 7px
        width: calc(100% / 3 - 15px)
        height: 120px
        border-radius: 2px
        line-height: 17px
        -webkit-transform: translateZ(0)
        border: 1px solid
        box-shadow: 3px 3px 1px 1px #fee34c;

        +maxWidth1024()
          width: calc(50% - 15px) !important

        +maxWidth600()
          width: calc(100% - 15px) !important

        a
          color: var(--font-color)
          text-decoration: none
          .flink-item-bar
            height: 15px
            border-width: 0 0 1px 0
            border-style: none none solid none
            background: #fde135
            display: flex;
            align-items: center;
            flex-direction: row;
            flex-wrap: nowrap;
            padding: 0 3px 0 3px
            sapn
              width: 10px;
              height: 10px;
              margin: 0 1px 0 1px
              border-radius: 50%;
              display: block;
              border: 1px solid;
              display: flex;
              align-items: center;
              justify-content: flex-start;
              &.flink-item-bar-yellow
                background: #fde135
              &.flink-item-bar-green
                background: #249a33
              &.flink-item-bar-red
                background: #f13b06
              &.flink-item-bar-x
                background: transparent
                border: 0px
                margin-left: auto
                transform: rotate(45deg);
                font-size: 23px;
                padding: 0px 0px 6px 0px;
          .flink-item-content
            display: flex;
            height: 105px
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 0 5px 0 5px;
            .flink-item-text
              width: 60%;
              display: flex;
              flex-direction: column;
              align-items: center;
              .flink-item-name
                @extend .limit-one-line
                max-width: 100%;
                padding: 0px 5px 0px 5px;
                margin: 0px 0 6px 0;
                height: 50%;
                font-weight: bold;
                font-size: 1.43em;
                border-width: 0 0 7px 0;
                border-style: solid;
                border-color: #fbf19f;
              .flink-item-desc
                @extend .limit-one-line
                max-width: 100%;
                height: 50%;
                padding: 5px 5px 5px 5px;
                font-size: 0.93em;
                position: relative
                &:before
                  content: "";
                  background: transparent;
                  display: block;
                  height: calc(100% - 4px);
                  width: calc(100% - 4px);
                  position: absolute;
                  left: 0;
                  top: 0;
                  border-radius: 2px;
                  border: 1px solid;
                  clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 50%, 90% 50%, 90% 100%, 0 100%);


            .flink-item-icon
              overflow: hidden;
              margin: 0px 5px;
              width: 70px;
              height: 70px;
              border: 1px solid;
              border-radius: 2px;
              transition: width .3s ease-out
              box-shadow: 2px 2px 1px 1px #fee34c;
              img
                width: 50px;
                height: 50px;
                margin: 9px 9px;
                transition: filter 375ms ease-in .2s, transform .3s
                object-fit: cover

              .img-alt
                display: none
//byer卡片暗夜模式改造
[data-theme=dark]
  #article-container
    .flink
      .byer-flink-list
        & > .flink-list-item
          background: rgb(40,40,40)
          box-shadow: 3px 3px 1px 1px #1B5A70;
          a
            .flink-item-bar
              background: #1B5A70;
            .flink-item-content
              .flink-item-text
                .flink-item-name
                  border-color: #5EBAD9;
              .flink-item-icon
                box-shadow: 2px 2px 1px 1px #1B5A70;
              
          

//下面是aki及其自定义配色:
:root
  --ark-flink-default-color: rgba(153, 54, 44,0.8) /*主色调*/
  --ark-flink-mask: #818181  /*遮罩层配色*/
  --ark-flink-progress-default: rgba(227, 236, 238, 0.8) /*能量条默认配色*/
  --ark-flink-progress-charge: #d97f17 /*能量条充能配色*/
  --flink-name-border-color: #d97f17 /*ID边框配色*/

[data-theme="dark"]
  --ark-flink-default-color: rgba(55, 112, 143,0.8)
  --ark-flink-mask: #37708f
  --ark-flink-progress-default: rgba(46, 160, 221, 0.8)
  --ark-flink-progress-charge: rgba(227, 236, 238, 0.8)
  --flink-name-border-color: rgba(227, 236, 238, 0.8)


//适配ark方舟友链卡片
#article-container
  .flink
    margin-bottom: 20px

    .ark-flink-list
      overflow: auto
      padding: 10px 10px 0
      text-align: center

      & > .ark-flink-list-card
        position: relative
        display: block
        color: var(--font-color)
        text-decoration: none
        float: left
        overflow: hidden
        margin: 15px 7px
        width: calc(100% / 3 - 15px)
        height: 220px
        border-radius: 2px
        line-height: 17px
        -webkit-transform: translateZ(0)

        +maxWidth1024()
          width: calc(50% - 15px) !important

        +maxWidth600()
          width: calc(100% - 15px) !important
        

      a.ark-flink-list-card
        *
          transition: all 0.3s cubic-bezier(.6, 0, .5, 1)
        &:hover
          *
            transition: all 0.3s cubic-bezier(.6, 0, .5, 1)
          .ark-flink-progress-bar-A,
          .ark-flink-progress-bar-B,
          .ark-flink-progress-bar-C
            background: var(--ark-flink-progress-charge)
          .ark-flink-content
            .ark-flink-name
              bottom: 0px;
            .ark-flink-avatar
              transform: rotateX(90deg)
            .ark-flink-mask
              .ark-flink-mask-left
                transition-delay: 0.3s;
                left: -35%;
              .ark-flink-mask-right
                transition-delay: 0.3s;
                right: -55%;
            .ark-flink-descr
              .ark-flink-descr-text
                transition-delay: 0.3s;
                opacity: 1
                animation: ark-flink-type 1.5s steps(20, end) 0.3s,ark-flink-blink .75s step-end infinite; /* 定义光标的闪烁动画 */  
        .ark-flink-progress-bar-A,
        .ark-flink-progress-bar-B,
        .ark-flink-progress-bar-C
          display: block
          position: absolute;
          background: var(--ark-flink-progress-default)
          z-index 6
        .ark-flink-progress-bar-A
          height: 8px;
          width: 100px;
          top: 3px;
          left: 6px;
          clip-path: polygon(0% 100%, 8% 0%, 28% 0%, 20% 100%, 23% 100%, 31% 0%, 46% 0%, 38% 100%, 41% 100%, 49% 0%, 64% 0%, 56% 100%, 59% 100%, 67% 0%, 82% 0%, 74% 100%, 77% 100%, 85% 0%, 100% 0%, 90% 100%);
        .ark-flink-progress-bar-B
          height: 8px;
          width: 35px;
          bottom: 35px;
          left: 0;
          clip-path: polygon(0% 0%, 40% 0%, 15% 100%, 25% 100%, 50% 0%, 85% 0%, 60% 100%, 70% 100%, 90% 0%, 100% 100%, 15% 100%);
        .ark-flink-progress-bar-C
          height: 100px
          width: 8px
          bottom: 50px
          right: 0
          clip-path: polygon( 0% 0%, 100% 8%, 100% 28%, 0% 20%, 0% 23%, 100% 31%,100% 46% ,0% 38% ,0% 41% ,100% 49% ,100% 64% ,0% 56% ,0% 59% ,100% 67% ,100% 82% ,0% 74% , 0% 77%,100% 85% , 100% 100%,0% 90% );
        .ark-flink-content
          display: block
          position: absolute
          background: radial-gradient(var(--ark-flink-default-color),transparent)
          width: calc(100% - 10px)
          height: 100%
          top: 0
          left: 0
          clip-path: polygon(0 15px, 100px 15px, 115px 0, calc(100% - 45px) 0, calc(100% - 15px) 45px, 100% 45px, 100% calc(100% - 25px), calc(100% - 30px) calc(100% - 25px), calc(100% - 55px) calc(100% - 10px), calc(100% - 90px) calc(100% - 10px), calc(100% - 100px) 100%, 100px 100%, 90px calc(100% - 10px), 55px calc(100% - 10px), 35px calc(100% - 45px), 0% calc(100% - 45px));
          .ark-flink-avatar,
          .ark-flink-mask,
          .ark-flink-descr,
          .ark-flink-siteshot
            position: absolute
            width: 100%
            height: 100%
            top: 0
            left: 0
          .ark-flink-name
            display: block;
            position: absolute;
            z-index: 5;
            bottom: 10px;
            left: 20%;
            color: white;
            text-shadow: 1px 1px 5px black;
            background: transparent;
            height: 40px;
            width: 60%;
            border-style: double;
            border-width: 5px 5px 0 5px;
            border-color: var(--flink-name-border-color);
            transform: perspective(0.5em) rotateX(3deg);
            .flink-sitename
              transform: perspective(0.5em) rotateX(-3deg);
              font-size: 15px;
              margin: 5px 0 0 0;
            .flink-block
              transform: perspective(0.5em) rotateX(-10deg);
              display: block;
              width: 60%;
              height: 13px;
              background: var(--flink-name-border-color);
              position: absolute;
              bottom: 0px;
              left: 20%;
          .ark-flink-avatar
            z-index 4
            display: flex
            align-items: center;
            justify-content: center;
            transform: rotateX(0deg)
            img
              width: 100px;
              height: 100px;
              margin: 0 auto 20px;
              object-fit: cover
              clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
            .img-alt
              display: none
          .ark-flink-mask
            z-index 3
            .ark-flink-mask-left
              width: 100%;
              height: 100%;
              background: repeating-linear-gradient(0deg, var(--ark-flink-mask),transparent 1px);
              clip-path: polygon(50% 0, 50% calc(50% - 60px), calc(50% - 20px) calc(50% - 60px), calc(50% - 50px) calc(50% - 30px), calc(50% - 50px) calc(50% + 10px), calc(50% - 20px) calc(50% + 40px), 50% calc(50% + 40px), 50% 100%, 0% 100%, 0% 0%);
              left: 0%;
              position: absolute;
            .ark-flink-mask-right
              background: repeating-linear-gradient(0deg, var(--ark-flink-mask),transparent 1px);
              width: 100%;
              height: 100%;
              clip-path: polygon(100% 0%, 50% 0%, 50% calc(50% - 60px), calc(50% - 20px) calc(50% - 60px), calc(50% - 50px) calc(50% - 30px), calc(50% - 50px) calc(50% + 10px), calc(50% - 20px) calc(50% + 40px), 50% calc(50% + 40px), 50% 100%, 100% 100%);
              right: 0%;
              position: absolute;
          
          .ark-flink-descr
            z-index 2
            display: flex
            align-items: center;
            justify-content: center;
            .ark-flink-descr-text
              color: white;
              text-shadow: 1px 1px 5px black;
              font-size: 1.5em;
              height: 1.5em;
              line-height: 1.5em;
              overflow: hidden; /* 隐藏超出容器的文本 */
              border-right: .15em solid orange; /* 打字效果的光标动画 */
              white-space: nowrap; /* 确保文本在一行内显示，不换行 */
              margin: 20px;
              opacity: 0
          .ark-flink-siteshot
            z-index 1
            display: flex
            align-items: center;
            justify-content: center;
            img
              height: 75%;
              width: 100%;
              margin: 0 auto 20px;
              object-fit: cover;

/* 定义打字机动画 */
@keyframes ark-flink-type
  from
    width: 0;
  to
    width: 100%;


/* 定义光标闪烁动画 */
@keyframes ark-flink-blink
  from,
  to
    border-color: transparent;
  50%
    border-color: orange

修改友链数据文件

打开"\source\_data\link.yml"按照下方格式写入文件：

1
2
3
4
5
6
7
8
9
- class_name: 1.技术支持
  class_desc: 由以下人员提供技术支持
  flink_style: volantis # 可选择样式
  link_list:
    - name: mccsjs
      link: https://seln.cn/
      avatar: https://s2.loli.net/2023/02/04/47DVRIgbGyQwcO9.jpg
      descr: 第一是我自己！！！
      siteshot: https://seln.cn/img/a.jpg

下面是选项的用途及可选项：

一级属性 二级属性 butterfly volantis flexcard byer ark 解释
class_name * ✅ ✅ ✅ ✅ ✅ 每类提示词
flink_style * ✅ ✅ ✅ ✅ ✅ 卡片样式
* name ✅ ✅ ✅ ✅ ✅ 卡片名称
* link ✅ ✅ ✅ ✅ ✅ 卡片链接
link_list avatar ✅ ✅ ✅ ✅ ✅ 卡片头像
* descr ✅ ✅ ✅ ✅ ✅ 卡片描述
* siteshot ❌ (✅) (✅) ❌ (✅) 网站截图
  • ❌：不支持选项
  • ✅：支持项，不可省略
  • (✅)：可选选项，可以省略，比如siteshot，可以根据网站信息采用api截图生成，api如下：’https://s0.wp.com/mshots/v1/‘ + 你的域名 + ‘?w=400&h=300’

各友链样式预览：

butterfly

volantis

flexcard

byer

ark

接下来三连看看成果

1
hexo cl;hexo g;hexo s