友联样式美化

公爵

发布于 2022-09-28 14:31:33

5040

发布于 2022-09-28 14:31:33

文章被收录于专栏：公爵书房

友链页

创建

前往 Hexo 博客的根目录，执行以下命令

hexo new page link

然后找到 source/link/index.md 这个文件，修改内容如下：

---
title: 友情链接
date: 2022-09-01 15:57:49
type: "link"
---

添加

新建文件 博客根目录\source\_data\link.yml ,没有 _data 文件夹的话也请自己新建打开 博客根目录\source\_data\link.yml ，输入

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: 公爵书房 | 技术分享
      link: https://www.gjcloak.top/
      avatar: https://q1.qlogo.cn/g?b=qq&nk=763771418&s=640
      descr: 以指键之轻，承载知识之重

最后把在菜单加上友链这样就拥有了默认的友链样式

新建配置文件

修改 博客根目录\themes\butterfly\layout\includes\page\flink.pug ,此处添加判断机制，使得可以通过修改配置文件来切换友链风格。同时为了方便管理，把各个友链样式放到新建的文件目录 博客根目录\themes\butterfly\layout\includes\page\flink_style 下。

flink.pug
butterfly.pug
volantis.pug
flexcard.pug

修改 博客根目录\themes\butterfly\layout\includes\page\flink.pug ，全部内容替换为：

case theme.flink_style
  when 'volantis'
    include ./flink_style/volantis.pug
  when 'flexcard'
    include ./flink_style/flexcard.pug
  default
    include ./flink_style/butterfly.pug

新建 博客根目录\themes\butterfly\layout\includes\page\flink_style\butterfly.pug ，填入以下内容：

#article-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
        .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
                  img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
                .flink-item-name= item.name
                .flink-item-desc(title=item.descr)= item.descr
  != page.content

新建 博客根目录\themes\butterfly\layout\includes\page\flink_style\volantis.pug ，填入以下内容：

#article-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
        .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
                img.no-lightbox(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
              .info
                img.no-lightbox(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

新建 博客根目录\themes\butterfly\layout\includes\page\flink_style\flexcard.pug ，填入以下内容：

#article-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
        .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
                img.no-lightbox.cover.fadeIn(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )    
              .info
                img.no-lightbox(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 ,同理，将样式文件也放到新建的 博客根目录\themes\butterfly\source\css\_flink_style 目录下方便管理。

flink.styl
butterfly.styl
volantis.styl
flexcard.styl

修改 博客根目录\themes\butterfly\source\css\_page\flink.styl

if hexo-config('flink_style') == 'butterfly'
  @import './_flink_style/butterfly'
else if hexo-config('flink_style') == 'volantis'
  @import './_flink_style/volantis'
else if hexo-config('flink_style') == 'flexcard'
  @import './_flink_style/flexcard'

新建 博客根目录\themes\butterfly\source\css\_flink_style\butterfly.styl

.flink#article-container
  margin-bottom: 20px
.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
      .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: 35px
        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

.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

volantis.styl

新建 博客根目录\themes\butterfly\source\css\_flink_style\volantis.styl

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%
      pointer-events:none;
      // trans(.75s)
      transition: transform 2s ease
      object-fit: cover

  .info
    margin-top: 16px * 0.5
    img
      width: 32px
      height: 32px
      pointer-events:none;
      border-radius: 16px
      float: left
      margin-right: 8px
      margin-top: 2px
    span
      display: block
    .title
      font-weight: 600
      font-size: var(--global-font-size)
      color: #444
      display: -webkit-box
      -webkit-box-orient: vertical
      overflow: hidden
      -webkit-line-clamp: 1
      trans()
    .desc
      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
  .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

flexcard.styl

新建 博客根目录\themes\butterfly\source\css\_flink_style\flexcard.styl

#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
        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);
.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

调整参数

因为 Volantis 的 site-card 比 Butterfly 的 flink-card 多出了一个站点缩略图，所以需要再额外添加一条配置项修改 博客根目录\source\_data\link.yml ,添加一条名为 siteshot 的配置项。

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: 公爵书房 | 技术分享
      link: https://www.gjcloak.top/
      avatar: https://q1.qlogo.cn/g?b=qq&nk=763771418&s=640
      descr: 以指键之轻，承载知识之重
      siteshot: https://cos.gjcloak.xyz/pigo/202209011633157.png?imageMogr2/format/webp/interlace/1/quality/80

添加配置

在 博客根目录\_config.butterfly.yml 中添加配置项：

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

站点卡片添加了懒加载和图片失效替换。对应配置项为 博客根目录\_config.butterfly.yml 中的：

# Replace Broken Images (替換無法顯示的圖片)
error_img:
  flink:   # 头像失效替换图
  post_page:  # 站点缩略图

最后

本次魔改使用的是@ChenYFan大佬的项目，通过调用thum.io提供的接口，配合 github action ，自动下载站点截图到 github 中，再配合 jsdelivr+github 图床来引用图片。

该项目的本意是为了弥补因为thum.io参数问题导致图片过大，从而加载较慢的问题。先将其保存下来再使用jsdelivr加速。最新版友链已经将thum.io的api内置，且调整了参数，图片大小缩小了将近40倍。也就不是很依赖于jsdelivr加速了。

参考文档

Friend Link Card Beautify

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-09-01，如有侵权请联系 cloudcommunity@tencent.com 删除

flink

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

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

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

登录后参与评论

0 条评论

热度