预览效果
👉效果和本站友链一样
首先生成link页面
在 Hexo 博客根目录 [Blogroot]下打开终端，输入
打开[Blogroot]\source\link\index.md,添加一行type: ‘link’:
1
2
3
4
5
| ---
title: 友情链接
date: 2025-05-21 17:32:19
type: "link"
---
|
创建数据文件
新建文件[Blogroot]\source_data\link.yml,没有_data文件夹的话也请自己新建。以下是默认友链格式示例。打开[Blogroot]\source_data\link.yml，输入：
1
2
3
4
5
6
7
8
9
10
11
|
- class_name: 友情链接
class_desc: 这里的每个站点，都耐人寻味……
flink_style: flexcard
link_list:
- name: 码农观测站
link: https://www.codeobservatory.cn/
avatar: https://www.codeobservatory.cn/img/butterfly-icon.webp
siteshot: https://www.codeobservatory.cn/images/shot.png
descr: 技术分享，编程学习
type: 技术
|
打开link菜单
取消[Blogroot]_config.butterfly.yml中menu配置项内link页面的注释（这里我已改成中文【友链】）。
1
2
3
4
5
6
7
8
9
10
| menu:
首页: / || fas fa-home
文章: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
友链: /link/ || fas fa-link
关于: /about/ || fas fa-heart
|
替换模板文件
替换[Blogroot]\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
| .container
if top_img === false
h1.page-title= page.title
.flink
if site.data.link
each i in site.data.link
if i.class_name
h2!= i.class_name
if i.class_desc
.flink-desc!=i.class_desc
if i.flink_style === 'flexcard'
.flexcard-flink-list
each item in i.link_list
a.flink-list-card(href=url_for(item.link) target='_blank' data-title=item.descr)
.wrapper.cover
if item.type
.is-type.is-type-0!=item.type
- var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/' + item.link
if theme.lazyload.enable
img.cover.fadeIn(data-lazy-src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
else
img.cover.fadeIn(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
.info
if theme.lazyload.enable
img.flink-avatar(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
else
img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
span.flink-sitename= item.name
span.flink-sitedesc(title=item.descr)= item.descr
else if i.flink_style === 'butterfly'
.butterfly-flink-list
each item in i.link_list
.flink-list-item
a(href=url_for(item.link) title=item.name target="_blank")
.flink-item-icon
if theme.lazyload.enable
img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
else
img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
.flink-item-info
.flink-item-name= item.name
.flink-item-desc(title=item.descr)= item.descr
!= page.content
|
替换样式文件
替换[Blogroot]\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
| #article-container
.flink
margin-bottom: 20px
.flink-desc
margin: 0 0 .6rem !important
.butterfly-flink-list
overflow: auto
text-align: center
& > .flink-list-item
position: relative
float: left
overflow: hidden
margin: 15px 7px
width: calc(100% / 3 - 15px)
height: 90px
line-height: 17px
-webkit-transform: translateZ(0)
addBorderRadius(8)
background: #49b1f514
+maxWidth1024()
width: calc(50% - 15px) !important
+maxWidth600()
width: calc(100% - 15px) !important
&:hover
.flink-item-icon
margin-left: -10px
width: 0
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: var(--text-bg-hover)
content: ''
transition: transform .3s ease-out
transform: scale(0)
&: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: 30%
transition: width .3s ease-out
img
width: 100%
height: 100%
transition: filter 375ms ease-in .2s, transform .3s
object-fit: cover
.img-alt
display: none
:hover
color: #fff
.flexcard-flink-list
display: flex
flex-wrap: wrap
justify-content: flex-start
margin: -8px
align-items: stretch
> .flink-list-card
margin: 8px
width: calc(100% / 4 - 16px)
display: block
line-height: 1.4
height: 100%
text-decoration:none
.cover
width: 100%
height: 120px
overflow: hidden
border-radius: 6px
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
background: #f6f6f6
position: relative
.is-type
position: absolute
top: 0
left: 0
color: #fff
z-index: 10
border-radius: 6px 0 6px 0
padding: 4px 8px
font-size: .6rem
background-color: var(--btn-bg)
img
width: 100%
height: 100%
pointer-events: none
transition: transform 2s ease
object-fit: cover
.info
margin-top: 8px
img
width: 32px
height: 32px
pointer-events: none
border-radius: 16px
float: left
margin: 0 auto .1rem !important
margin-right: 8px !important
.flink-sitename
font-weight: 600
font-size: var(--global-font-size)
color: var(--font-color)
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden
-webkit-line-clamp: 1
transition: all 0.28s ease
-moz-transition: all 0.28s ease
-webkit-transition: all 0.28s ease
-o-transition: all 0.28s ease
.flink-sitedesc
margin-top: 4px !important
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
:hover
.cover
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)
.flink-sitename
color: var(--tzy-theme) !important
.flink-item-name
@extend .limit-one-line
padding: 16px 10px 0 0
height: 40px
font-weight: bold
font-size: 1.43em
.flink-item-desc
@extend .limit-one-line
padding: 16px 10px 16px 0
height: 50px
font-size: .93em
.flink-name
margin-bottom: 5px
font-weight: bold
font-size: 1.5em
|
这里需要注意的是需要在source/_data/link.yml添加配置项
1
| flink_style: flexcard || butterfly
|
该参数可选值flexcard或者butterfly分别对应两种样式。
全部保存好之后，一键三连查看效果
微信
支付宝
PayPal
