思路解讀

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