前言

本文将介绍如何修改站点加载动画。

之前看到友链界面的修改需要动大量源码,就没有弄。后来逐渐开始摸索、修改。自己表示很满意,按照各路大神的教程来操作也并不难。效果展示可以点击我的友链页面查看。

注意

  • 本篇教程需要改动大量源码,对缩进也有严格要求,如没有把握的小伙伴可以移步下方链接下载源码。
  • 本篇教程修改基于Butterfly3.6.2,针对前期版本号的修改也请移步下方链接。

教程链接:https://akilar.top/posts/57291286/


操作

  1. \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
    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
    #article-container
    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.descr
    != 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.descr
    != 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.cover
    - 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
  2. \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
    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
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    if hexo-config('flink_style') == 'butterfly'
    .flink#article-container
    .flink-desc
    margin: .2rem 0 .5rem

    .flink-list
    overflow: auto
    padding: 10px 10px 0
    text-align: center

    & > .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

    &:hover
    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: cover

    .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()
    &: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
    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)
    &: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 130px
    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 22px //因为字体大小不同,可能导致头像偏高,可以在此处通过修改top的值来微调头像框的位置至卡片正中。
    width 66px
    height 66px
    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
    .flink-list>a .info,
    .flink-list>a .wrapper .cover
    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
    &:hover
    &:before
    background-color: rgba(#121212,0.8);

  3. 因为此友链样式相比传统默认样式需要站点缩略图,因此需要添加一个siteshot的配置项。

    \source\_data目录下,找到link.yml文件,添加一条名为 siteshot 的配置项:

    1
    2
    3
    4
    5
    - name: 花猪
    link: https://cnhuazhu.gitee.io/
    avatar: https://gcore.jsdelivr.net/gh/CNhuazhu/Image/avatar.jpg
    descr: 佛系青年
    siteshot: https://gcore.jsdelivr.net/gh/CNhuazhu/Image/top.jpg # 站点缩略图
  4. 找到主题配置文件_config.butterfly.yml,手动添加配置项代码(原本没有):

    1
    2
    # 友链样式,butterfly为默认样式,volantis为站点卡片样式,flexcard为弹性卡片样式
    flink_style: flexcard # butterfly | volantis | flexcard
  5. 对于懒加载和图片失效替换的部分也在主题配置文件_config.butterfly.yml中,可以自行修改:

    1
    2
    3
    4
    # Replace Broken Images (替換無法顯示的圖片)
    error_img:
    flink: # 头像失效替换图
    post_page: # 站点缩略图
  6. 可能遇到的 bug:使用 flexcard 样式时,因为全站字体大小配置与本站不一致的关系,可能导致友链卡片的头像位置偏移较大。请读者按照 flink.styl 里的注释内容自己微调。

  7. 重新部署,启动,即可看到友链页面发生了变化。


可能遇到的bug

关于友链样式:

  • 如果想换回Butterfly的默认样式,建议改回原文件,因为在配置文件_config.butterfly.yml里直接修改可能会显示错误

  • 如果想选择flexcard样式,要注意看一下Gallery图库的图片展示有没有什么问题,如果图片位置出现严重偏移,可采取以下办法:

    \themes\butterfly\source\css目录下新建一个xxx.css文件,并将以下内容写入该文件中:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /*相册页面定位修复*/
    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,在injecthead处引入该css文件:

    1
    2
    3
    inject:
    head:
    - <link rel="stylesheet" href="/css/xxx.css">
  • 目前我使用volantis样式,没有发现问题


结尾

针对站点缩略图更进一步的操作本篇并未介绍,更详细的内容请读者移步Akilar的博客,文章链接如下:

《Friend Link Card Beautify》:https://akilar.top/posts/57291286/