前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Hexo修改友链界面

Hexo修改友链界面

作者头像
花猪
发布2022-02-16 16:44:56
8200
发布2022-02-16 16:44:56
举报

前言

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

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

注意

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

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

操作

在\themes\butterfly\layout\includes\page目录下,找到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

在\themes\butterfly\source\css\_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://cdn.jsdelivr.net/gh/CNhuazhu/Image/avatar.jpg
      descr: 佛系青年
      siteshot: https://cdn.jsdelivr.net/gh/CNhuazhu/Image/top.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图库的图片展示有没有什么问题,如果图片位置出现严重偏移,可采取以下办法:

在\themes\butterfly\source\css目录下新建一个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/

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-02-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 操作
  • 可能遇到的bug
  • 结尾
相关产品与服务
大数据
全栈大数据产品,面向海量数据场景,帮助您 “智理无数,心中有数”!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档