注：精灵图目前还没有写数量过多时拆分图片的功能，以后可能会写，有需求的小伙伴可以自行修改（给钱的话也不是不能加上（bushi）。

　　该教程不适合小白食用，需要有一定的基本功！

　　教程中没有支持配置项，如果你希望支持配置项的话可以自行修改。

魔改

　　首先需要修改 pug，修改\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
#article-container
    .flink
        - let index = 0
        if site.data.link
            each list in site.data.link
                if list.class_name
                    h2!= list.class_name
                if list.class_desc
                    .flink-desc!= list.class_desc
                - const className = list.beautify ? 'beautify' : 'terse'
                .flink-list(class = className)
                    each item in list.link_list
                        a.flink-item(href = url_for(item.link), target = '_blank')
                            if list.beautify
                                if item.tag
                                    span.card-tag!= item.tag
                                img.card-bg.no-lightbox(src = url_for(item.siteshot))
                            .info
                                if !list.deprecated
                                    .avatar.no-lightbox(style = `background-position-y:-${(index++) * 100}px`)
                                .text
                                    span.name!= item.name
                                    span.descr!= item.descr
    != page.content

　　然后添加样式，修改\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
.flink-list
  display flex
  flex-wrap wrap

  .flink-item
    position relative
    border-radius 8px
    overflow hidden
    border var(--km-button-border)
    background var(--hl-bg)

    &:hover
      text-decoration none !important
      box-shadow var(--km-subt-shadow)
      border var(--km-light-border)

    .avatar
      transition all .6s
      border-radius 50%
      background url("这里写精灵图的 URL")
      background-size cover
      width 100px
      height 100px

    .card-tag
      position absolute
      color white
      font-size 10px
      left 0
      top 0
      padding 4px 8px
      background #0084FF
      z-index 1
      border-bottom-right-radius 12px
      transition all .6s

    .text
      display flex
      flex-direction column
      padding-right 10px

      .name
        max-width 100%
        font-weight bold
        text-overflow ellipsis
        white-space nowrap
        overflow hidden

      .descr
        margin-bottom 10px
        font-size small
        overflow hidden
        max-height 52px

  &.beautify .flink-item
    width calc(25% - 16px)
    height 210px
    margin 8px
    transition all .6s

    +maxWidth(1000)
      width calc(33% - 16px)

    +maxWidth900()
      width calc(25% - 16px)

    +maxWidth(700)
      width calc(33% - 16px)

    +maxWidth(500)
      width calc(50% - 16px)

    +maxWidth(350)
      width calc(100% - 16px)

    .card-bg
      position relative
      height 60%
      min-width 100%
      object-fit cover
      margin 0 !important
      transition all .6s !important
      filter blur(0)

    .info
      position relative
      height 40%
      transition background .6s, height .6s

    .avatar
      position absolute
      left -32px
      top -32px
      transform scale(.2)

    .text
      position relative
      top 0
      margin-left 30px
      transition all .6s

    &:hover
      .card-bg
        height 35%
        filter blur(3px)

      .info
        height 66%
        background #F2B94B
        color white

      .avatar
        left -10px
        top -50px
        transform rotateZ(-35deg) rotateX(360deg) rotateY(360deg) scale(.6)

      .text
        top 26px
        margin-left 10px

        .descr
          max-height 78px

      .card-tag
        left -100%

  &.terse .flink-item
    width calc(25% - 12px)
    height 100px
    padding 6px
    margin 6px

    +maxWidth1024()
      width calc(33% - 12px)

    +maxWidth(1000)
      width calc(50% - 12px)

    +maxWidth900()
      width calc(33% - 12px)

    +maxWidth(700)
      width calc(50% - 12px)

    +maxWidth(450)
      width calc(100% - 12px)

    .info
      position relative
      height 100%
      margin-left 10px
      width 100%

    .avatar
      position absolute
      transform scale(.7)
      left -15px
      top -6px

    .text
      position relative
      left 100px
      width calc(100% - 110px)
      transition all .6s

    &:hover
      .avatar
        transform rotateX(180deg) rotateY(180deg) scale(.01)
        left -100px
        opacity 0

      .text
        left 10px
        width calc(100% - 20px)

    .text:first-child
      left 10px
      width calc(100% - 20px)

　　注意，上方代码中需要自己填写精灵图的 URL！

编写 YML

　　然后我们还需要编写友链的 YML 文件，格式要求如下：

1
2
3
4
5
6
7
8
9
10
- class_name: name        # 分类名，任意字符串
  beautify: true          # 是否使用美化格式（缺省为 false）
  deprecated: false       # 是否标记为失联友链（缺省为 false）
  link_list:              # 友链列表
    - name: name    # 友链名称，任意字符串
      link: url     # 友链地址
      descr: text   # 简介，不要太长
      siteshot: url # 美化格式的卡片上方的图片链接
    # ......
# ......

生成精灵图

　　接下来我们需要生成一个精灵图，有两种选择：

  1. 手动拼接
  2. 使用工具自动生成

　　前者的话找一个图片编辑软件自己一个一个按顺序拼接起来就可以了，每个头像必须为正方形且大小相同、纵向排列。

　　我写了一个自动化生成的工具，可以供小伙伴们使用：阿里云盘

　　该软件使用 Kotlin 编写，运行环境的最低要求为 JRE8，使用时通过命令启动即可：

1
java -jar ./SpriteBuilder.jar [args]

　　目前支持的参数有：

参数名值类型解释（缺省值）
ymlString修改友链文件的路径（source\_data\link.yml）
outputString修改输出文件的路径（output.jpg）
sizeInt修改单个头像的大小（120）
showSuccess无打印渲染成功的信息

　　该工具支持解析友链 YML 的信息，然后拼接出图片，只支持导出 jpg 格式。

　　YML 的格式要求如下：

1
2
3
4
5
6
7
8
9
- deprecated: false     # 为 true 时该分类不生成头像，缺省为 false
  link_list:
    - avatar: url0      # 头像的地址，以`file:`开头时会从本地读取（例如：D:/a.jpg）
    - avatar: url1
    # ......
- deprecated: false
  link_list:
    # ......
# ......

　　工具支持解析jpg、png、icon、webp格式的图片，其它格式的图片不支持解析。解析图像时，如果是从网络拉取的图片，会优先使用响应头中的Content-Type字段获取文件类型，其次使用文件拓展名。

创作不易，扫描下方打赏二维码支持一下吧ヾ(≧▽≦*)o