源计划-方舟的内容并不是为无前端基础的纯新手设计的傻瓜教程，所以在编写时会频繁的引用以前写过的教程或者参考的帖子，如果想要复现本站效果，需要有一定的前端基础和耐心，若有不了解的，可以在评论区提问，但是我不保证一定会耐心解答。
点击查看更新记录
更新记录
2024-04-08:友链卡片赛博化
- 重写了友链卡片，同样适用于原本的多友链样式改造。
- 换用清羽飞扬喵提供的网站截图API
点击查看参考教程
| 参考方向 | 教程原贴 |
|---|---|
| Flex布局参数解释 | Flex 布局教程:语法篇 - 阮一峰的网络日志 |
| Transition属性实现平滑过渡动画 | CSS3实现伪类hover离开时平滑过渡效果示例 |
| CSS伪类实现三角形绘制 | 纯CSS 实现绘制各种三角形(各种角度) - saucxs - 博客园 |
| 使用clip-path实现多边形剪裁。 | 不可思议的CSS之clip-path |
写在最前
仔细看了下上一篇源计划-方舟系列的魔改帖子已经是一年多以前的事情了，这中间包括离职，找工作，提桶跑路，再找工作，真的是发生了好多事情啊。
一直到最近有群友来问我原来flexcard的那个友链卡片，描述的对话框老是偏移，我才意识到这个bug原来一直没修我居然还在用老版本的友链。说起来旧版友链教程里三个样式，一个是butterfly自带的，一个是volantis主题的，一个是小康的友链在线加载样式里扒拉来的。都不是我原创的。所以我觉得有必要写一个原创的卡片了。照例是机甲风格，机甲最重要的是什么？是酷炫！是爆甲！所以不要怪新友链和butterfly原版的风格不搭。（笑）
魔改步骤
- 友链魔改基于 Friend Link Card Beautify中的友链魔改方案进行增量调整，这意味着你得先熟读它才能理解这一篇魔改教程。核心文件为以下内容。
- 修改
[Blogroot]\themes\butterfly\layout\includes\page\flink.pug，全部内容替换为：1
2
3
4
5
6
7
8
9
10
11case theme.flink_style
when 'volantis'
include ./flink_style/volantis.pug
when 'flexcard'
include ./flink_style/flexcard.pug
when 'byer'
include ./flink_style/byer.pug
when 'ark'
include ./flink_style/ark.pug
default
include ./flink_style/butterfly.pug - 新建
[Blogroot]\themes\butterfly\layout\includes\page\flink_style\butterfly.pug1
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#article-container
.ark-flink
if site.data.link
each i in site.data.link
if i.class_name
h2!= i.class_name
if i.class_desc
.ark-flink-desc!=i.class_desc
.ark-flink-list
each item in i.link_list
a.ark-flink-list-card(href=url_for(item.link) target='_blank' 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=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
.ark-flink-mask
.ark-flink-mask-left
.ark-flink-mask-right
.ark-flink-descr
.ark-flink-descr-text=item.descr
.ark-flink-siteshot
- var 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=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
!= page.content - 修改
[Blogroot]\themes\butterfly\source\css\_page\flink.styl1
2
3
4
5
6
7
8
9
10if hexo-config('flink_style') == 'butterfly'
@import './_flink_style/butterfly'
else if hexo-config('flink_style') == 'volantis'
@import './_flink_style/volantis'
else if hexo-config('flink_style') == 'flexcard'
@import './_flink_style/flexcard'
else if hexo-config('flink_style') == 'byer'
@import './_flink_style/byer'
else if hexo-config('flink_style') == 'ark'
@import './_flink_style/ark' 新建
[Blogroot]\themes\butterfly\source\css\_flink_style\ark.styl1
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//自定义配色:
: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)
#article-container
.ark-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)
+maxWidth600()
width: calc(100% - 15px)
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在
[Blogroot]\_config.butterfly.yml中添加配置项：1
2# 友链样式，butterfly为默认样式，volantis为站点卡片样式,flexcard为弹性卡片样式,byer为粉丝彩蛋！
flink_style: ark # butterfly | volantis | flexcard | byer | ark
Invitation
测试
created:14/10/2022
Welcome to Candyhome
Use this card to join the candyhome and participate in a pleasant discussion together .
Welcome to 测试's candyhome,wish you a nice day .
评论
