前言
本文将介绍如何修改站点加载动画。
之前看到友链界面的修改需要动大量源码，就没有弄。后来逐渐开始摸索、修改。自己表示很满意，按照各路大神的教程来操作也并不难。效果展示可以点击我的友链页面查看。
注意：
- 本篇教程需要改动大量源码，对缩进也有严格要求，如没有把握的小伙伴可以移步下方链接下载源码。
- 本篇教程修改基于
Butterfly3.6.2，针对前期版本号的修改也请移步下方链接。
教程链接：https://akilar.top/posts/57291286/
操作
在themesbutterflylayoutincludespage目录下，找到flink.pug文件并将其内容全部做如下替换：
代码语言：javascript复制#article-containe
if top_img === false
h1.page-title= page.title
if (theme.flink_style === 'butterfly')
.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
.flink-list
each item in i.link_list
.flink-list-item
a(href=url_for(item.link) title=item.name target="_blank")
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 )
span.flink-item-name= item.name
span.flink-item-desc(title=item.descr)= item.desc
!= page.content
else if (theme.flink_style === 'volantis')
.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
.site-card-group
each item in i.link_list
a.site-card(target='_blank' rel='noopener' href=url_for(item.link))
.img
- 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(data-lazy-src=siteshot onerror=`this.onerror=null;this.src='` url_for(theme.error_img.post_page) `'` alt='' )
else
img(src=siteshot onerror=`this.onerror=null;this.src='` url_for(theme.error_img.flink) `'` alt='' )
.info
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='' )
else
img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` url_for(theme.error_img.flink) `'` alt='' )
span.title= item.name
span.desc(title=item.descr)= item.desc
!= page.content
else if (theme.flink_style === 'flexcard')
.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
.flink-list
each item in i.link_list
a.flink-list-card(href=url_for(item.link) target='_blank' data-title=item.descr)
.wrapper.cove
- 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.flink) `'` 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
!= page.content在themesbutterflysourcecss_page，找到flink.styl文件并将其内容全部做如下替换：
代码语言：javascript复制if hexo-config('flink_style') == 'butterfly'
.flink#article-containe
.flink-desc
margin: .2rem 0 .5rem
.flink-list
overflow: auto
padding: 10px 10px 0
text-align: cente
& > .flink-list-item
position: relative
float: left
overflow: hidden
margin: 15px 7px
width: calc(100% / 3 - 15px)
height: 90px
border-radius: 8px
line-height: 17px
-webkit-transform: translateZ(0)
maxWidth1024()
width: calc(50% - 15px) !important
maxWidth600()
width: calc(100% - 15px) !important
&:hove
img
transform: rotate(360deg)
&: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
img
float: left
margin: 15px 10px
width: 60px
height: 60px
border-radius: 35px
transition: all .3s
.img-alt
display: none
.flink-item-name
@extend .limit-one-line
display: block
padding: 16px 10px 0 0
height: 40px
font-weight: bold
font-size: 1.43em
.flink-item-desc
@extend .limit-one-line
display: block
padding: 16px 10px 16px 0
height: 50px
font-size: .93em
else if hexo-config('flink_style') == 'volantis'
trans($time = 0.28s)
transition: all $time ease
-moz-transition: all $time ease
-webkit-transition: all $time ease
-o-transition: all $time ease
.site-card-group
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 120px
@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%
// trans(.75s)
transition: transform 2s ease
object-fit: cove
.info
margin-top: 16px * 0.5
img
width: 32px
height: 32px
border-radius: 16px
float: left
margin-right: 8px
margin-top: 2px
span
display: block
.title
font-weight: 600
font-size: $fontsize-list
color: #444
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden
-webkit-line-clamp: 1
trans()
.desc
font-size: $fontsize-footnote
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()
&:hove
.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
else if hexo-config('flink_style') == 'flexcard'
#article-container img
margin 0 auto!important
.flink-list
overflow auto
& > a
width calc(25% - 15px)
height 130px
position relative
display block
margin 15px 7px
float left
overflow hidden
border-radius 10px
transition all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s
box-shadow 0 14px 38px rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .06)
&:hove
.info
transform translateY(-100%)
.wrappe
img
transform scale(1.2)
&:before
position: fixed
width:inherit
margin:auto
left:0
right:0
top:10%
border-radius: 10px
text-align: cente
z-index: 100
content: attr(data-title)
font-size: 20px
color: #fff
padding: 10px
background-color: rgba($theme-color,0.8)
.cove
width 100%
transition transform .5s ease-out
.wrappe
position relative
.fadeIn
animation coverIn .8s ease-out forwards
img
height 130px
pointer-events none
.info
display flex
flex-direction column
justify-content cente
align-items cente
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 22px //因为字体大小不同，可能导致头像偏高，可以在此处通过修改top的值来微调头像框的位置至卡片正中。
width 66px
height 66px
border-radius 50%
box-shadow 0 0 10px rgba(0, 0, 0, .3)
z-index 1
text-align cente
pointer-events none
span
padding 20px 10% 60px 10%
font-size 16px
width 100%
text-align cente
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
.flink-list>a .info,
.flink-list>a .wrapper .cove
position absolute
top 0
left 0
@media screen and (max-width:1024px)
.flink-list
& > a
width calc(33.33333% - 15px)
@media screen and (max-width:600px)
.flink-list
& > a
width calc(50% - 15px)
[data-theme=dark]
.flink-list a .info,
.flink-list a .info span
background-color rgba(0, 0, 0, .6)
.flink-list
& > a
&:hove
&:before
background-color: rgba(#121212,0.8);因为此友链样式相比传统默认样式需要站点缩略图，因此需要添加一个siteshot的配置项。
在source_data目录下，找到link.yml文件，添加一条名为 siteshot 的配置项：
代码语言：javascript复制- name: 花猪
link: https://cnhuazhu.gitee.io/
avatar: https://img.yuanmabao.com/zijie/pic/2022/02/16/4x3jnet3ulf.jpg
descr: 佛系青年
siteshot: https://img.yuanmabao.com/zijie/pic/2022/02/16/dhudatgd4ji.jpg # 站点缩略图找到主题配置文件_config.butterfly.yml，手动添加配置项代码（原本没有）：
代码语言：javascript复制# 友链样式，butterfly为默认样式，volantis为站点卡片样式，flexcard为弹性卡片样式
flink_style: flexcard # butterfly | volantis | flexcard对于懒加载和图片失效替换的部分也在主题配置文件_config.butterfly.yml中，可以自行修改：
代码语言：javascript复制# Replace Broken Images (替換無法顯示的圖片)
error_img:
flink: # 头像失效替换图
post_page: # 站点缩略图可能遇到的 bug：使用 flexcard 样式时，因为全站字体大小配置与本站不一致的关系，可能导致友链卡片的头像位置偏移较大。请读者按照 flink.styl 里的注释内容自己微调。
重新部署，启动，即可看到友链页面发生了变化。
可能遇到的bug
关于友链样式：
- 如果想换回Butterfly的默认样式，建议改回原文件，因为在配置文件_config.butterfly.yml里直接修改可能会显示错误
- 如果想选择flexcard样式，要注意看一下Gallery图库的图片展示有没有什么问题，如果图片位置出现严重偏移，可采取以下办法：
在themesbutterflysourcecss目录下新建一个xxx.css文件，并将以下内容写入该文件中：
代码语言：javascript复制/*相册页面定位修复*/
a > img, .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;
}找到主题配置文件_config.butterfly.yml，在inject的head处引入该css文件:
代码语言：javascript复制inject:
head:
- <link rel="stylesheet" href="/css/xxx.css">目前我使用volantis样式，没有发现问题
结尾
针对站点缩略图更进一步的操作本篇并未介绍，更详细的内容请读者移步Akilar的博客，文章链接如下：
《Friend Link Card Beautify》：https://akilar.top/posts/57291286/
