博客主页 😑

Author:

公爵

©

Wordage:

共计 12998 字

needs:

约 2 分钟

Popular:

15 ℃

Created:

目 录

友链页

创建

前往 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

修改 博客根目录\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

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

volantis.pug

新建 博客根目录\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

flexcard.pug

新建 博客根目录\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 目录下方便管理。

此处内容,需回复之后可见

调整参数

因为 Volantissite-cardButterflyflink-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

共计 1 条评论,点此发表评论
  1. 头像
    @
    凡人

    访客

    |´・ω・)ノ

    · Win 1x · Chrome · 四川
萌ICP备20226257号 赣ICP备2022001242号-1 闽公网安备35020502000606号 本站已运行 253 天 8 小时 11 分 51统计 百度统计 本站由提供CDN加速服务 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2022 ~ 2022. 公爵书房 All rights reserved.
历史足迹
分类目录
  • 随笔
  • 知识
  • 分享
  • 书籍
  • 专栏
  • 笔记