思路解读

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

预览效果

资源下载

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

下载 flink_style.zip

魔改步骤

新建友链页面。已开的可以跳过，从第 2 步开始.

参照参考教程中的 Butterfly 友链界面配置教程先配置好默认友链页面。
- 在 Hexo 博客根目录 [Blogroot] 下打开终端，输入 hexo new page link 。
- 打开 [Blogroot]\source\link\index.md , 添加一行 type: 'link' :
MARKDOWN
- 新建文件 [Blogroot]\source\_data\link.yml , 没有 _data 文件夹的话也请自己新建。以下是默认友链格式示例 (自己写的教程，夹带点私货不过分吧，嘻嘻)。打开 [Blogroot]\source\_data\link.yml ，输入：
YML
- 取消 [Blogroot]\_config.butterfly.yml 中 menu 配置项内 link 页面的注释。
YML

BASH

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

STYLUS

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

YML

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

YML

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

YML

可能遇到的 bug：使用 flexcard 样式时，因为全站字体大小配置与本站不一致的关系，可能导致友链卡片的头像位置偏移较大。请读者按照 flink.styl 里的注释内容自己微调。

站点图片批量半自动截图

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

半自动截图内容非必要

提交 issues 自动更新友链

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

butterfly 样式方案
volantis 样式方案

思路拓展：考虑到自动更新是读取 issues，而有一款评论是直接将评论变为 issues 进行提交。也就是 gitalk 评论。想必头脑灵活的读者已经有思路了。主要是我自己懒得写了。

可能出现的 BUG

fancybox 强制套壳
根据 ISSUES 写入友链无效
flexcard 头像偏移
使用友链后相册样式严重偏移

TO DO

flink.pug 魔改，移值 Volantis 的 site-card 样式

保留原版友链，通过配置文件切换样式

siteshot 站点预览图批量半自动化截图

使用 issues，经审批后自动更新友链

Friend Link Card Beautify思路解读资源下载魔改步骤站点图片批量半自动截图提交 issues 自动更新友链更多好帖可能出现的 BUGTO DO