Friend Link Card Beautify

思路解读

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

预览效果

资源下载

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

下载 flink_style.zip

魔改步骤

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

BASH

修改 [Blogroot]themesbutterflylayoutincludespageflink.pug, 此处添加判断机制，使得可以通过修改配置文件来切换友链风格。
- butterfly_v3.3.0-3.5.1
- butterfly_v3.6.0
修改 [Blogroot]themesbutterflysourcecss_pageflink.styl。

STYLUS

因为 Volantis 的 site-card 比 Butterfly 的 flink-card 多出了一个站点缩略图，所以需要再额外添加一条配置项。修改 [Blogroot]source_datalink.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 生成友链页面的部分。）