注:精灵图目前还没有写数量过多时拆分图片的功能,以后可能会写,有需求的小伙伴可以自行修改(给钱的话也不是不能加上(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:
# ......
# ......

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


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