Hexo修改友链界面

发表于 更新于 分类于 阅读次数：
本文字数： 9.9k 阅读时长 ≈ 9 分钟
本文将介绍如何修改站点加载动画

前言

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

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

注意：

  • 本篇教程需要改动大量源码，对缩进也有严格要求，如没有把握的小伙伴可以移步下方链接下载源码。
  • 本篇教程修改基于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，在inject的head处引入该css文件:

    1
    2
    3
    inject:
      head: 
        - <link rel="stylesheet" href="/css/xxx.css">

  • 目前我使用volantis样式，没有发现问题

结尾

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

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

相关文章