![](/style/images/good.png)
![](/style/images/bad.png)
源计划-方舟:友链卡片
source link: https://akilar.top/posts/fb6a1a78/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
源计划-方舟:友链卡片 | Akilarの糖果屋
![quality,q_100](https://img.zcool.cn/community/0192b161e57b6011013f01cda2eb5e.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100)
源计划-方舟的内容并不是为无前端基础的纯新手设计的傻瓜教程,所以在编写时会频繁的引用以前写过的教程或者参考的帖子,如果想要复现本站效果,需要有一定的前端基础和耐心,若有不了解的,可以在评论区提问,但是我不保证一定会耐心解答。
点击查看更新记录
2024-04-08:友链卡片赛博化
- 重写了友链卡片,同样适用于原本的多友链样式改造。
- 换用清羽飞扬喵提供的网站截图API
点击查看参考教程
仔细看了下上一篇源计划-方舟系列的魔改帖子已经是一年多以前的事情了,这中间包括离职,找工作,提桶跑路,再找工作,真的是发生了好多事情啊。
一直到最近有群友来问我原来flexcard的那个友链卡片,描述的对话框老是偏移,我才意识到这个bug原来一直没修我居然还在用老版本的友链。说起来旧版友链教程里三个样式,一个是butterfly自带的,一个是volantis主题的,一个是小康的友链在线加载样式里扒拉来的。都不是我原创的。所以我觉得有必要写一个原创的卡片了。照例是机甲风格,机甲最重要的是什么?是酷炫!是爆甲!所以不要怪新友链和butterfly原版的风格不搭。(笑)
- 友链魔改基于 Friend Link Card Beautify中的友链魔改方案进行增量调整,这意味着你得先熟读它才能理解这一篇魔改教程。核心文件为以下内容。
- 修改
[Blogroot]\themes\butterfly\layout\includes\page\flink.pug
,全部内容替换为:case 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.pug
#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.styl
if 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.styl
//自定义配色:
: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) !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在
[Blogroot]\_config.butterfly.yml
中添加配置项:# 友链样式,butterfly为默认样式,volantis为站点卡片样式,flexcard为弹性卡片样式,byer为粉丝彩蛋!
flink_style: ark # butterfly | volantis | flexcard | byer | ark
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK