Hexo修改友链界面

前言

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

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

注意：

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

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

---

操作

1. 在\themes\butterfly\layout\includes\page目录下，找到flink.pug文件并将其内容全部做如下替换：

   #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文件并将其内容全部做如下替换：

   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 的配置项：

   - name: 花猪
         link: https://cnhuazhu.gitee.io/
         avatar: https://cdn.jsdelivr.net/gh/CNhuazhu/Image/avatar.jpg
         descr: 佛系青年
         siteshot: https://cdn.jsdelivr.net/gh/CNhuazhu/Image/top.jpg # 站点缩略图

4. 找到主题配置文件_config.butterfly.yml，手动添加配置项代码（原本没有）：

   # 友链样式，butterfly为默认样式，volantis为站点卡片样式，flexcard为弹性卡片样式
   flink_style: flexcard # butterfly | volantis | flexcard

5. 对于懒加载和图片失效替换的部分也在主题配置文件_config.butterfly.yml中，可以自行修改：

   # 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文件，并将以下内容写入该文件中：

  /*相册页面定位修复*/
  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文件:

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

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

---

结尾

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

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