点开查看开发记录

开发记录

2020-12-01:内测版v0.06

完成pug改写。
新版友链沿用Volantis主题的Site-card样式。
添加判断机制，保留原版友链，通过修改配置文件切换友链样式风格。

2020-12-02:正式版v1.02

移植Volantis的issues标签。实现站点友链更新。
参考小康大佬的基于Gitee的友链创建方案，实现站点友链更新。

2020-12-04:正式版v1.03

更新了issues仓库对应配置方案。~~Volantis文档还是不够完善~~
简化配置方案，覆盖安装即可。
添加了卓越科技的教程帖推荐。

点开查看参考内容

参考内容

参考内容	教程原帖
友链页面生成教程	Butterfly 安装文档(二) 主题页面 https://butterfly.js.org/posts/dc584b87/#%E5%8F%8B%E6%83%85%E9%8F%88%E6%8E%A5 </a></div>
site-card样式
自动化友链站点批量截图
站点截图API文档	thum.io文档 https://www.thum.io/documentation/api/url </a></div>
site-card样式根据issues自动更新	tag-plugins:issues https://volantis.js.org/tag-plugins/issues </a></div>
flink_card样式根据issues自动更新	小康的文档库-基于Gitee的友链创建 https://docs.tzki.cn/Friend/ </a></div>

思路解读

Butterfly的友链太过单调了。加上之前正好移植了Volantis的一堆外挂标签样式，突发奇想用Site-card来写友链，效果相当理想。

资源下载

由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。比照教程进行复制。

下载flink_style.zip

魔改步骤

新建友链页面。已开的可以跳过，从第2步开始.
参照参考教程中的Butterfly友链界面配置教程先配置好默认友链页面。

在Hexo博客根目录[Blogroot]下打开终端，输入hexo new page link。
hexo new page link
打开[Blogroot]\source\link\index.md,添加一行type: 'link':
---
title: link
date: 2020-12-01 22:19:45
type: 'link'
---

新建文件[Blogroot]\source\_data\link.yml,没有_data文件夹的话也请自己新建。以下是默认友链格式示例~~(自己写的教程，夹带点私货不过分吧，嘻嘻)~~。打开[Blogroot]\source\_data\link.yml，输入：

- class_name: 糖果屋のVIP
  class_desc: 售后服务享五折优惠2333
  link_list:
    - name: Akilar
      link: https://akilar.top
      avatar: https://akilar.top/img/siteicon/favicon.png
      descr: 欢迎光临糖果屋

取消[Blogroot]\_config.butterfly.yml中menu配置项内link页面的注释。

menu:
  Home: / || fas fa-home
  Archives: /archives/ || fas fa-archive
  Tags: /tags/ || fas fa-tags
  Categories: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   - Music || /music/ || fas fa-music
  #   - Movie || /movies/ || fas fa-video
  Link: /link/ || fas fa-link
  # About: /about/ || fas fa-heart

修改[Blogroot]\themes\butterfly\layout\includes\page\flink.pug,此处添加判断机制，使得可以通过修改配置文件来切换友链风格。

if (theme.flink_style === 'butterfly')
  .flink#article-container
    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#article-container
    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
                if theme.lazyload.enable
                  img(data-lazy-src=url_for(item.siteshot) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
                else
                  img(src=url_for(item.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

修改[Blogroot]\themes\butterfly\source\css\_page\flink.styl。

如果是已经实装过本站的基于Butterfly的外挂标签引入教程的读者，就不需要再进行第3步了。这里用到的Volantis的flink样式就是外挂标签中的site-card。

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

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

- class_name: 糖果屋のVIP
  class_desc: 售后服务享五折优惠2333
  link_list:
    - name: Akilar
      link: https://akilar.top
      avatar: https://akilar.top/img/siteicon/favicon.png
      descr: 欢迎光临糖果屋
      siteshot: https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg
      # siteshot就是站点缩略图的链接。

在[Blogroot]\_config.butterfly.yml中添加配置项：

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

站点卡片添加了懒加载和图片失效替换。对应配置项为[Blogroot]\_config.butterfly.yml中的：

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

站点图片批量半自动截图

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

使用方法

首先fork项目到自己的github仓库。此处提供两个。一个是原项目。一个是我自己配置过的项目。区别在于我根据thum.io提供的接口文档修改了参数，使得站点截图较小。（用我自己的站点截图作为示例，两者大小是1.2MB：34KB的程度，缩小了将近40倍。当然清晰度也不可同日而语，酌情选择）
获取Token，（此处直接使用当初为github actions教程准备的配图了）。
访问Github->头像（右上角）->Settings->Developer Settings->Personal access tokens->generate new token,创建的Token名称随意，但必须勾选repo项。

token只会显示这一次，之后将无法查看，所以务必保证你已经记录下了Token。之后如果忘记了就只能重新生成重新配置了。
在你fork的项目仓库设置中，新建secrets。变量名为TOKEN，必须严格大写。
首先需要clone项目到本地。
git clone git@github.com:[GithubUsername]/ScreenShot.git
然后打开项目中的ScreenShot\.github\workflows\get.yml,
按照示例添加你的友链地址。
curl https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/https://<YourDomain>/ -o <YourDoamin>.jpg
记得将curl https://purge.jsdelivr.net/gh/[GithubUsername]/ScreenShot@gh-pages/*.*中的[GithubUsername]改为你自己的github账号名。
之后每次提交就会自动启动github action，将图片下载到ScreenShot的gh-pages分支。并且通过purge.jsdelivr.net刷新缓存。

最后，在友链配置中，就能用https://cdn.jsdelivr.net/gh/[GithubUsername]/ScreenShot@gh-pages/[friend_link].jpg来引用站点缩略图了。

- class_name: 糖果屋のVIP
  class_desc: 售后服务享五折优惠2333
  link_list:
    - name: Akilar
      link: https://akilar.top
      avatar: https://akilar.top/img/siteicon/favicon.png
      descr: 欢迎光临糖果屋
      siteshot: https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg

可能遇到的bug
- 没有启动github action：请到仓库中找到Action，将其打开。
- 图片缓存未刷新：purge.jsdelivr.net的强制刷新也是玄学，这种时候只能等待了。或者手动发布release，然后使用版本号。这个是jsdelivr的使用技巧，不多做讨论。

靓仔已经在迫不及待的加我友链了，而靓女还在犹豫要不要再加下我的联系方式。

提交issues自动更新友链

使用issues自动更新友链的实质是借助相应的API读取仓库issues并获取相应的数据，然后用js写到页面上。因为不同的js没法根据配置文件进行主题样式切换，所以请读者自行选择相应的方案。（事实上两种样式是可以共存的，因为通过读取issues写入友链页面的就是完整的HTML语言，只要同时加载flink.styl和site-card.styl的内容，赋予它样式就好。真正没法共存的是通过读取link.yml生成友链页面的部分。）

原生butterfly友链样式，根据issues进行更新的方案，已有详细教程。请移步小康的文档库。
其中教程内的friend.js可能无法查看。此处提供可查看的链接:friend.js。

Dreamy.TZK基于Gitee的友链创建

博客配置

点开查看博客配置方案

请移步站内教程：基于Butterfly的外挂标签引入完成前置步骤引入。

如果不需要那么多标签，可以在基于Butterfly的外挂标签引入教程基础上自行精简，只保留以下3个文件即可（其实核心只需要两个issues.js）。

scripts
  |__tag
    |__issues.js
    #渲染issues的脚本，必须
    |__site.js
    # 渲染site标签的脚本，若不需要在文章中使用站点卡片样式，可以不要
source
  |__js
     |__ issues.js
     #读取issues的api的脚本。可以不要，并换成CDN外链。

在友链页[Blogroot]\source\link\index.md内添加如下内容作为标签定位：

gitee仓库示例

{% issues sites | api=https://gitee.com/api/v5/repos/[GiteeUsername]/[GiteeReponame]/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}

github仓库示例

{% issues sites | api=https://api.github.com/repos/[GithubUsername]/[GithubReponame]/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}

之后即可让读者根据示例来提交友链了。

{
    "title": "",
    "screenshot": "",
    "url": "",
    "avatar": "",
    "description": "",
    "「keywords」": ""
}

参数	释义
title	网站名称
screenshot	网站预览图
url	网站链接，需要添加 `https://`协议组成完整域名。否则可能被识别成站点相对路径。
avatar	站长头像
「keywords」	分组依据，未必要叫「keywords」，详见基于Butterfly的外挂标签引入第21节对issues标签的参数解释

仓库配置

Github配置方案

新建一个仓库，仓库名随意，这里我命名为friend_link,
新建文件friend_link\.github\ISSUE_TEMPLATE.md,
并在其中输入以下内容作为issues模板。

其中的json代码块前面的反斜杠记得删去。此处这么写主要是为了转义，否则无法嵌套代码块。

---
name: 友链模板
about: 请根据指示规范填写友链格式。
---

<!-- 请在下方代码块的双引号中填写 -->
\```json
{
    "title": "",
    "screenshot": "",
    "url": "",
    "avatar": "",
    "description": "",
    "keywords": ""
}
\```

<!--
"title": "站点名称",
"screenshot": "站点预览图链接",
"url": "站点链接",
"avatar": "头像链接",
"description": "站点描述",
"keywords": "关键词，作为分组名"
-->

<!-- 示例 -->

<!--
"title": "Akilarの糖果屋",
"screenshot": "https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg",
"url": "https://akilar.top/",
"avatar": "https://akilar.top/img/siteicon/favicon.png",
"description": "期待您的光临！",
"keywords": "糖果屋"
-->

新建active label
提交示例
从审核通过到页面读取有一段api的缓存期，稍微有点耐心。

Gitee配置方案

新建一个仓库，仓库名随意，这里我命名为friend_link,
新建文件friend_link\.gitee\ISSUE_TEMPLATE.md,
并在其中输入以下内容作为issues模板。

其中的json代码块前面的反斜杠记得删去。此处这么写主要是为了转义，否则无法嵌套代码块。

---
name: 友链模板
about: 请根据指示规范填写友链格式。
---

<!-- 请在下方代码块的双引号中填写 -->
\```json
{
    "title": "",
    "screenshot": "",
    "url": "",
    "avatar": "",
    "description": "",
    "keywords": ""
}
\```

<!--
"title": "站点名称",
"screenshot": "站点预览图链接",
"url": "站点链接",
"avatar": "头像链接",
"description": "站点描述",
"keywords": "关键词，作为分组名"
-->

<!-- 示例 -->

<!--
"title": "Akilarの糖果屋",
"screenshot": "https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg",
"url": "https://akilar.top/",
"avatar": "https://akilar.top/img/siteicon/favicon.png",
"description": "期待您的光临！",
"keywords": "糖果屋"
-->

新建active标签

提交示例
从审核通过到页面读取有一段api的缓存期，稍微有点耐心。

可能遇到的Bug

根据Heo的反馈的~~BUG~~特性，如果开启了fancybox或者medium_zoom功能，会在页面编译时给img便签强行渲染上fancybox或者medium_zoom的外壳，导致小概率的点击图片放大时，会同时跳转到友链页。~~（反正我都是正常放大图片，没有跳转的情况。）~~
解决方案（相对的，友链图片将无法放大，酌情修改）：

~~关闭fancybox，一劳永逸。~~

给友链页的img标签添加禁止点击属性style="pointer-events:none;"。使用内联样式，使得只对友链页生效而不会影响其他页面的fancybox渲染。
修改[Blogroot]\themes\butterfly\layout\includes\page\flink.pug

    if theme.lazyload.enable
-     img(data-lazy-src=url_for(item.siteshot) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
+     img(style="pointer-events:none;" data-lazy-src=url_for(item.siteshot) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
    else
      img(src=url_for(item.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='' )
+     img(style="pointer-events:none;" 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='' )

根据ISSUES写入友链无效
issues写入友链需要jquery支持，Butterfly_v3.4.0以后实现去jquery化，需要自己添加jquery。还得保证加载顺序在issues.js之前。

    inject:
      head:
      bottom:
+       - <script src=" https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
        - <script defer src="https://cdn.jsdelivr.net/npm/hexo-theme-volantis@latest/source/js/issues.min.js"></script>