Hexo-butterfly友情链接页面优化

预览效果

👉查看效果传送门

首先生成link页面

在 Hexo 博客根目录 [Blogroot]下打开终端，输入

hexo new page link

打开[Blogroot]\source\link\index.md,添加一行type: ‘link’:

---
title: 友情链接
date: 2025-05-21 17:32:19
type: "link"
---

创建数据文件

新建文件[Blogroot]\source_data\link.yml,没有_data文件夹的话也请自己新建。以下是默认友链格式示例。打开[Blogroot]\source_data\link.yml，输入：

# flink_style: butterfly / flexcard
- class_name: 友情链接
  class_desc: 这里的每个站点，都耐人寻味……
  flink_style: flexcard
  link_list:
    - name: 码农观测站
      link: https://www.codeobservatory.cn/
      avatar: https://www.codeobservatory.cn/img/butterfly-icon.webp
      siteshot: https://www.codeobservatory.cn/images/shot.png
      descr: 技术分享，编程学习
      type: 技术

打开link菜单

取消[Blogroot]_config.butterfly.yml中menu配置项内link页面的注释（这里我已改成中文【友链】）。

menu:
  首页: / || fas fa-home
  文章: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  # List||fas fa-list||hide:     # 移动端隐藏子菜单
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

替换模板文件

替换[Blogroot]\themes\butterfly\layout\includes\page\flink.pug

.container
  if top_img === false
    h1.page-title= page.title
  .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        
        if i.flink_style === 'flexcard'
          .flexcard-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
                  if item.type
                    .is-type.is-type-0!=item.type
                  - 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.post_page) + `'` 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
                  span.flink-sitedesc(title=item.descr)= item.descr
        else if i.flink_style === 'butterfly'
          .butterfly-flink-list
            each item in i.link_list
              .flink-list-item
                a(href=url_for(item.link)  title=item.name target="_blank")
                  .flink-item-icon
                    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 )
                  .flink-item-info
                    .flink-item-name= item.name
                    .flink-item-desc(title=item.descr)= item.descr          
    != page.content

替换样式文件

替换[Blogroot]\themes\butterfly\source\css_page\flink.styl

#article-container
  .flink
    margin-bottom: 20px
    .flink-desc
      margin: 0 0 .6rem !important
    .butterfly-flink-list
      overflow: auto
      text-align: center

      & > .flink-list-item
        position: relative
        float: left
        overflow: hidden
        margin: 15px 7px
        width: calc(100% / 3 - 15px)
        height: 90px
        line-height: 17px
        -webkit-transform: translateZ(0)
        addBorderRadius(8)
        background: #49b1f514

        +maxWidth1024()
          width: calc(50% - 15px) !important

        +maxWidth600()
          width: calc(100% - 15px) !important

        &:hover
          .flink-item-icon
            margin-left: -10px
            width: 0

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

          .flink-item-icon
            float: left
            overflow: hidden
            margin: 15px 10px
            width: 60px
            height: 60px
            border-radius: 30%
            transition: width .3s ease-out

            img
              width: 100%
              height: 100%
              transition: filter 375ms ease-in .2s, transform .3s
              object-fit: cover

          .img-alt
            display: none
        
        :hover 
          color: #fff

    .flexcard-flink-list
      display: flex
      flex-wrap: wrap
      justify-content: flex-start
      margin: -8px
      align-items: stretch
      > .flink-list-card
        margin: 8px
        width: calc(100% / 4 - 16px)
        display: block
        line-height: 1.4
        height: 100%
        text-decoration:none
        .cover
          width: 100%
          height: 120px
          overflow: hidden
          border-radius: 6px
          box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
          background: #f6f6f6
          position: relative
          .is-type
            position: absolute
            top: 0
            left: 0
            color: #fff
            z-index: 10
            border-radius: 6px 0 6px 0
            padding: 4px 8px
            font-size: .6rem
            background-color: var(--btn-bg)
          img
            width: 100%
            height: 100%
            pointer-events: none
            transition: transform 2s ease
            object-fit: cover 
                 
        .info
          margin-top: 8px
          img
            width: 32px
            height: 32px
            pointer-events: none
            border-radius: 16px
            float: left
            margin: 0 auto .1rem !important
            margin-right: 8px !important
          .flink-sitename
            font-weight: 600
            font-size: var(--global-font-size)
            color: var(--font-color)
            display: -webkit-box
            -webkit-box-orient: vertical
            overflow: hidden
            -webkit-line-clamp: 1
            transition: all 0.28s ease
            -moz-transition: all 0.28s ease
            -webkit-transition: all 0.28s ease
            -o-transition: all 0.28s ease
          .flink-sitedesc
            margin-top: 4px !important
            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
      :hover
        .cover  
          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)  
        .flink-sitename
          color: var(--tzy-theme) !important


    .flink-item-name
      @extend .limit-one-line
      padding: 16px 10px 0 0
      height: 40px
      font-weight: bold
      font-size: 1.43em

    .flink-item-desc
      @extend .limit-one-line
      padding: 16px 10px 16px 0
      height: 50px
      font-size: .93em

    .flink-name
      margin-bottom: 5px
      font-weight: bold
      font-size: 1.5em

这里需要注意的是需要在source/_data/link.yml添加配置项

flink_style: flexcard || butterfly

该参数可选值flexcard或者butterfly分别对应两种样式。
全部保存好之后，一键三连查看效果

hexo c; hexo g;hexo s 

---

版权声明：本文为作者原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
作者: 码农刚子
邮箱: wxscc@foxmail.com
原文链接: https://www.codeobservatory.cn/archives/9dd55dbc.html