{% note info no-icon %}魔改前请备份，要不然出错了又不知道怎么改就完啦！！！
请注意，魔改此部分会让markdown语法和标签失效
{% endnote %}
修改模板文件
打开"\themes\butterfly\layout\includes\page\flink.pug"文件，覆盖式写入下面的内容：
#article-container
if top_img === false
h1.page-title= page.title
.flink
if site.data.link
each linkGroup in site.data.link
//- 友链分类标题
if linkGroup.class_name
h2!= linkGroup.class_name
//- 友链分类描述
if linkGroup.class_desc
.flink-desc!= linkGroup.class_desc
//- 生成随机列表（如果需要）
- let linkList = linkGroup.link_list.slice()
if linkGroup.random
- linkList.sort(() => Math.random() - 0.5)
//- Butterfly 样式
if linkGroup.flink_style === 'butterfly'
.butterfly-flink-list
each item in linkList
.flink-list-item
a(
href=url_for(item.link)
title=item.name
target="_blank"
rel="noopener"
)
.flink-item-icon
+flink-img(item.avatar, item.name, 'flink')
.flink-item-info
.flink-item-name= item.name
.flink-item-desc(title=item.descr)= item.descr
//- Flexcard 样式
else if linkGroup.flink_style === 'flexcard'
.flexcard-flink-list
each item in linkList
a.flink-list-card(
href=url_for(item.link)
target='_blank'
rel='noopener'
data-title=item.descr
)
.wrapper.cover
- const siteshot = item.siteshot ? url_for(item.siteshot) : `https://s0.wp.com/mshots/v1/${item.link}?w=400&h=300`
+flink-img(siteshot, '', 'post_page')
+flink-img(item.avatar, '', 'post_page')
.info
+flink-img(item.avatar, item.name, 'flink')
span.flink-sitename= item.name
//- Volantis 样式
else if linkGroup.flink_style === 'volantis'
.volantis-flink-list
each item in linkList
a.site-card(
href=url_for(item.link)
target='_blank'
rel='noopener'
)
.img
- const 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=imgError('post_page')
alt=item.name
)
.info
img.no-lightbox(
src=url_for(item.avatar)
onerror=imgError('flink')
alt=item.name
)
span.title= item.name
span.desc(title=item.descr)= item.descr
//- Byer 样式
else if linkGroup.flink_style === 'byer'
.byer-flink-list
each item in linkList
.flink-list-item
a(
href=url_for(item.link)
title=item.name
target="_blank"
rel="noopener"
)
.flink-item-bar
span.flink-item-bar-yellow
span.flink-item-bar-green
span.flink-item-bar-red
span.flink-item-bar-x +
.flink-item-content
.flink-item-text
.flink-item-name= item.name
.flink-item-desc(title=item.descr)= item.descr
.flink-item-icon
img.no-lightbox(
src=url_for(item.avatar)
onerror=imgError('flink')
alt=item.name
)
//- Ark 样式
else if linkGroup.flink_style === 'ark'
.ark-flink-list
each item in linkList
a.ark-flink-list-card(
href=url_for(item.link)
target='_blank'
rel='noopener'
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=imgError('flink')
alt=item.name
)
.ark-flink-mask
.ark-flink-mask-left
.ark-flink-mask-right
.ark-flink-descr
.ark-flink-descr-text= item.descr
.ark-flink-siteshot
- const 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=imgError('post_page')
alt=item.name
)
//- 页面内容
!= page.content
//- Mixin: 友链图片处理
mixin flink-img(src, alt, errorType)
if theme.lazyload.enable
img.nolazyload(
data-lazy-src=url_for(src)
onerror=imgError(errorType)
alt=alt
)
else
img.nolazyload(
src=url_for(src)
onerror=imgError(errorType)
alt=alt
)
//- 函数: 图片错误处理
- function imgError(type) { return `this.onerror=null;this.src='${url_for(theme.error_img[type])}'` }注意缩进问题，整个文件全部覆盖
修改样式文件
打开"\themes\butterfly\source\css\_page\flink.styl"文件，覆盖以下内容：
.flink-desc
margin: .2rem 0 .5rem
//bf原生
.butterfly-flink-list
overflow: auto
padding: 10px 10px 0
text-align: center
& > .flink-list-item
position: relative
float: left
overflow: hidden
line-height: 17px
-webkit-transform: translateZ(0)
height: 100px;
padding: 10px;
width: calc(100% / 5 - 0.5rem)
margin: 0.5rem 0.25rem;
border-radius: 12px;
border: var(--style-border);
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
+maxWidth1200()
width: calc(50% - 15px) !important
+maxWidth600()
width: calc(100% - 15px) !important
&:hover
border-color: #101010 !important;
background-color: #eeeeee !important;
box-shadow: #cccccc !important;
.flink-item-icon
width: 0;
height: 0;
margin-left: -10px;
&: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: 35px
transition: all .3s ease-out
margin: 8px 0 8px 0;
border-radius: 50%;
overflow: hidden;
img
width: 100%
height: 100%
transition: filter 375ms ease-in .2s, transform .3s
object-fit: cover
.img-alt
display: none
.flink-item-info
display: flex;
flex-wrap: wrap;
padding-left: 10px;
text-align: left;
flex-direction: column;
.flink-item-name
@extend .limit-one-line
padding: 12px 0 16px 0;
height: auto;
font-weight: bold
font-size: 1.2em
.flink-item-desc
@extend .limit-one-line
padding: 0
height: 35px
font-size: .93em
opacity: .7;
word-break: break-all;
white-space: break-spaces;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
.flink-name
margin-bottom: 5px
font-weight: bold
font-size: 1.5em
//flexcard卡片
#article-container img
margin-bottom: 0.5rem;
object-fit: cover;
max-height: 900px;
.flexcard-flink-list
overflow hidden
.flink-list-card
.wrapper img
transition: transform .5s ease-out !important;
& > a
width: calc(100% / 5 - 0.5rem);
height 150px
position relative
display block
margin: 0.5rem 0.25rem;
float left
overflow hidden
padding: 0;
border-radius: 8px;
transition all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s
box-shadow none
border: var(--style-border)!important;
&:hover
.info
transform translateY(-100%)
.wrapper
img
transform scale(1.2)
&::before
position: fixed
width:inherit
margin:auto
left:0
right:0
top:10%
border-radius: 10px
text-align: center
z-index: 100
content: attr(data-title)
font-size: 20px
color: #fff
padding: 10px
background-color: rgba($theme-color,0.8)
.cover
width 100%
transition transform .5s ease-out
.wrapper
position relative
.fadeIn
animation coverIn .8s ease-out forwards
img
height 150px
pointer-events none
.info
display flex
flex-direction column
justify-content center
align-items center
width 100%
height 100%
overflow hidden
border-radius 3px
background-color hsla(0, 0%, 100%, .7)
transition transform .5s cubic-bezier(.6, .2, .1, 1) 0s
img
position relative
top 45px
width 80px
height 80px
border-radius 50%
box-shadow 0 0 10px rgba(0, 0, 0, .3)
z-index 1
text-align center
pointer-events none
span
padding 20px 10% 60px 10%
font-size 16px
width 100%
text-align center
box-shadow 0 0 10px rgba(0, 0, 0, .3)
background-color hsla(0, 0%, 100%, .7)
color var(--font-color)
white-space nowrap
overflow hidden
text-overflow ellipsis
.flexcard-flink-list>a .info,
.flexcard-flink-list>a .wrapper .cover
position absolute
top 0
left 0
@media screen and (max-width:1024px)
.flexcard-flink-list
& > a
width calc(33.33333% - 15px)
@media screen and (max-width:600px)
.flexcard-flink-list
& > a
width calc(50% - 15px)
[data-theme=dark]
.flexcard-flink-list a .info,
.flexcard-flink-list a .info span
background-color rgba(0, 0, 0, .6)
.flexcard-flink-list
& > a
&:hover
&:before
background-color: rgba(#121212,0.8);
.justified-gallery > div > img,
.justified-gallery > figure > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img,
.justified-gallery > figure > a > img,
.justified-gallery > a > svg,
.justified-gallery > div > svg,
.justified-gallery > figure > svg,
.justified-gallery > a > a > svg,
.justified-gallery > div > a > svg,
.justified-gallery > figure > a > svg
position static!important
trans($time = 0.28s)
transition: all $time ease
-moz-transition: all $time ease
-webkit-transition: all $time ease
-o-transition: all $time ease
//volantis卡片，我的最爱
.volantis-flink-list
display: flex
flex-wrap: wrap
justify-content: flex-start
margin: -0.5 * 16px
align-items: stretch
.site-card
margin: 16px * 0.5
width: "calc(100% / 4 - %s)" % 16px
@media screen and (min-width: 2048px)
width: "calc(100% / 5 - %s)" % 16px
@media screen and (max-width: 768px)
width: "calc(100% / 3 - %s)" % 16px
@media screen and (max-width: 500px)
width: "calc(100% / 2 - %s)" % 16px
display: block
line-height: 1.4
height 100%
.img
width: 100%
height 150px
@media screen and (max-width: 500px)
height 100px
overflow: hidden
border-radius: 12px * 0.5
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
background: #f6f6f6
img
width: 100%
height 100%
pointer-events:none;
// trans(.75s)
transition: transform 2s ease
object-fit: cover
.info
margin-top: 16px * 0.5
img
width: 32px
height: 32px
pointer-events:none;
border-radius: 16px
float: left
margin-right: 8px
margin-top: 2px
span
display: block
.title
font-weight: 600
font-size: var(--global-font-size)
color: #444
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden
-webkit-line-clamp: 1
trans()
.desc
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
.img
trans()
&:hover
.img
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)
.info .title
color: #ff5722
//byer卡片
#article-container
.flink
margin-bottom: 20px
.byer-flink-list
overflow: auto
padding: 10px 10px 0
text-align: center
& > .flink-list-item
position: relative
background: #ffffff
float: left
overflow: hidden
margin: 15px 7px
width: calc(100% / 3 - 15px)
height: 120px
border-radius: 2px
line-height: 17px
-webkit-transform: translateZ(0)
border: 1px solid
box-shadow: 3px 3px 1px 1px #fee34c;
+maxWidth1024()
width: calc(50% - 15px) !important
+maxWidth600()
width: calc(100% - 15px) !important
a
color: var(--font-color)
text-decoration: none
.flink-item-bar
height: 15px
border-width: 0 0 1px 0
border-style: none none solid none
background: #fde135
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 3px 0 3px
sapn
width: 10px;
height: 10px;
margin: 0 1px 0 1px
border-radius: 50%;
display: block;
border: 1px solid;
display: flex;
align-items: center;
justify-content: flex-start;
&.flink-item-bar-yellow
background: #fde135
&.flink-item-bar-green
background: #249a33
&.flink-item-bar-red
background: #f13b06
&.flink-item-bar-x
background: transparent
border: 0px
margin-left: auto
transform: rotate(45deg);
font-size: 23px;
padding: 0px 0px 6px 0px;
.flink-item-content
display: flex;
height: 105px
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 5px 0 5px;
.flink-item-text
width: 60%;
display: flex;
flex-direction: column;
align-items: center;
.flink-item-name
@extend .limit-one-line
max-width: 100%;
padding: 0px 5px 0px 5px;
margin: 0px 0 6px 0;
height: 50%;
font-weight: bold;
font-size: 1.43em;
border-width: 0 0 7px 0;
border-style: solid;
border-color: #fbf19f;
.flink-item-desc
@extend .limit-one-line
max-width: 100%;
height: 50%;
padding: 5px 5px 5px 5px;
font-size: 0.93em;
position: relative
&:before
content: "";
background: transparent;
display: block;
height: calc(100% - 4px);
width: calc(100% - 4px);
position: absolute;
left: 0;
top: 0;
border-radius: 2px;
border: 1px solid;
clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 50%, 90% 50%, 90% 100%, 0 100%);
.flink-item-icon
overflow: hidden;
margin: 0px 5px;
width: 70px;
height: 70px;
border: 1px solid;
border-radius: 2px;
transition: width .3s ease-out
box-shadow: 2px 2px 1px 1px #fee34c;
img
width: 50px;
height: 50px;
margin: 9px 9px;
transition: filter 375ms ease-in .2s, transform .3s
object-fit: cover
.img-alt
display: none
//byer卡片暗夜模式改造
[data-theme=dark]
#article-container
.flink
.byer-flink-list
& > .flink-list-item
background: rgb(40,40,40)
box-shadow: 3px 3px 1px 1px #1B5A70;
a
.flink-item-bar
background: #1B5A70;
.flink-item-content
.flink-item-text
.flink-item-name
border-color: #5EBAD9;
.flink-item-icon
box-shadow: 2px 2px 1px 1px #1B5A70;
//下面是aki及其自定义配色:
: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)
//适配ark方舟友链卡片
#article-container
.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修改友链数据文件
打开"\source\_data\link.yml"按照下方格式写入文件：
- class_name: 1.技术支持
class_desc: 由以下人员提供技术支持
flink_style: volantis # 可选择样式
link_list:
- name: mccsjs
link: https://seln.cn/
avatar: https://s2.loli.net/2023/02/04/47DVRIgbGyQwcO9.jpg
descr: 第一是我自己！！！
siteshot: https://seln.cn/img/a.jpg下面是选项的用途及可选项：
| 一级属性 | 二级属性 | butterfly | volantis | flexcard | byer | ark | 解释 |
|---|---|---|---|---|---|---|---|
| class_name | * | ✅ | ✅ | ✅ | ✅ | ✅ | 每类提示词 |
| flink_style | * | ✅ | ✅ | ✅ | ✅ | ✅ | 卡片样式 |
| * | name | ✅ | ✅ | ✅ | ✅ | ✅ | 卡片名称 |
| * | link | ✅ | ✅ | ✅ | ✅ | ✅ | 卡片链接 |
| link_list | avatar | ✅ | ✅ | ✅ | ✅ | ✅ | 卡片头像 |
| * | descr | ✅ | ✅ | ✅ | ✅ | ✅ | 卡片描述 |
| * | siteshot | ❌ | (✅) | (✅) | ❌ | (✅) | 网站截图 |
- ❌：不支持选项
- ✅：支持项，不可省略
- (✅)：可选选项，可以省略，比如siteshot，可以根据网站信息采用api截图生成，api如下：'https://s0.wp.com/mshots/v1/' + 你的域名 + '?w=400&h=300'
各友链样式预览：
{% tabs tab-id %}
{% endtabs %}
接下来三连看看成果
hexo cl;hexo g;hexo s
评论