有一段時間沒怎么倒騰博客了，這幾天收拾了一下博客，同時將最近閱讀和記錄的有趣的內容整理一番，分享給大家。主要包括在博客 寫作時遇到的一些問題及解決方法，即我是如何構建自己的博客寫作工作流的。同時也有一些在博文寫作的中一些感悟。

hexo 及 Butterfly 主題升級

首先，最近升級了 hexo 版本，升級到最新版本3.1.0，同時也更新了主題的版本。當然，升級完就出現問題????，定位錯誤是之前復制 的自定義配置文件butterfly.yml缺少一些必要的變量，同時該文件結構也發生了變化，導致沒辦法渲染成功。暗暗竊喜還好做了 版本管理，直接 merge，但是由于結構改動變化太大，merge過程很不輕松，最終還是手動將之前的配置遷移到新的自定義配置文件, 才解決問題。

這提醒我們版本管理并不能解決任何問題，只是當災難降臨，提供給我們多一種選擇。作為軟件的用戶，升級前需要做好規劃， 特別是很長時間沒有更新的情況下。而作為主題開發者，需要提供給用戶良好的平滑升級功能，當然有時這需要耗費很大經歷。 使用開源項目，有時是需要代價和精力去維護的，而這又體現收費軟件的價值所在。

圖片管理

Hexo搭建博客，其中圖片的引用和管理是一件令人非常頭痛的事。究其根本是Markdown寫作方式導致的。在不涉及圖片時，markdown 的輕松寫作十分方便，但是當一篇.md格式的博文包含了圖片引用，情況就不一樣了。而博客圖片引用分為本地和遠程兩種方式， 這兩種方式都一些不足：

• 引用本地文件：一旦需要導出，要么打包整個目錄，所有圖片引用相對路徑，要么只能借助其他格式(pdf)實現。和word 文檔 相比，易用性很差，同時當需要將本地的寫作發布到wiki上，其發布過程也十分繁瑣，這些理應被自動化的體力活動卻沒有 ，當然會導致markdown在使用感受上有很大缺陷。

• 引用遠程鏈接：一般通過圖床實現，這種方式在寫作之前需要將圖片整理并發布到對應存儲服務上，寫作時通過工具生成 下載鏈接，這種缺點是插入圖片過程很難實現Copy-And-Paste，同時博文這個資源需要分為圖片和內容兩個資源管理，增加了 復雜度。

我的博文寫作是通過第二種方式引入圖片，這種方式優點是可以減少博客靜態資源，同時通過CDN可以提高網站訪問加速, 配合vscode paste-image插件和自己開發的hexo-image-sync的工具，能夠實現Copy-And-Paste流程。但是對于其他工作流， 如工作上wiki文檔維護,工作日報通過Markdown編寫等，目前沒有探索出很好方案。

在理想的將來，希望能Markdown寫作夠做到博文和圖片資源的統一處理。

Markdown 協議 、渲染引擎和格式化

marked:
  gfm: true
  breaks: false #Enable GFM line breaks. This option requires the gfm option to be true.

在使用Markdown工具進行寫作時，通常強制換行需要通過兩個空格實現，但是在通過Hexo渲染博文時，是不需要加上兩個空格的。 由于無法預知什么需要換行，博文源文件中會出現一段文字一行的情況，這十分影響寫作和博客源文件閱讀體驗。

目前Markdown協議還未完全統一，主要有Markdown，GFM和CommanMark三種，這些協議在細節上有所區別。 hexo 其渲染Markdown文件是通過了插件hexo-renderer-marked實現， 該插件提供一些配置項，以上關閉自動換行的功能可以在hexo_config.yml修改,如下：

這樣，我們可以就通過空格控制是否換行。這個問題歸根結底是博文.md文件的格式化問題，我們不希望在酷炫的UI 下，其博文源文件一團糟， 在通過vscode寫作時，推薦安裝插件prettier實現Markdown格式文件的格式化， 同時開啟vscode的自動換行功能，參考下圖配置項：

配置完，我們寫博客就有了通過IDE寫代碼的感覺。

博文代碼塊

技術類的文章，尤其是源碼分析類，博文中需要插入大量的代碼塊輔助讀者閱讀，有時會引用一段很長代碼，如果大量使用Markdown Code Block， 十分影響博文的頁面布局，對讀者不友好。Github Gist功能可以幫助我們更好在博文中引用并展示Github代碼塊。

我們可以從網頁創建代碼塊，同時一些 IDE 開發工具集成Github Gist，能夠從開發環境中快速創建代碼塊。 創建完可以拿到對應內嵌 Script 鏈接<script src="https://gist.github.com/***/snippet.js"></script>，Markdown 是支持內聯 HTML代碼的，我們直接插入鏈接即可。顯示效果如下：

這種顯示效果很好，而且方便跳轉對應源碼倉庫，查看上下文。除了引用代碼塊，在引用其他資源鏈接（如 twitter，medium 文章）時， 也可以優化其顯示效果，比如Medium對常用第三方鏈接的顯示效果如下：

在Hexo中，通過其Tag Plugins功能，能夠做到美化一些鏈接的顯示，以下展示鏈接了一篇Medium文章:

Every interaction is both precious and an opportunity to delight.

更好的呈現博客內容也有代價，就是博客源文件中出現大量語法，也和其他第三方工具緊密耦合，不方便后續升級維護，我們在維護自己博客時， 就需要在這兩者之間權衡代價。

主題高級配置-導入字體

最近在瀏覽文章發現時一個自建博客網站的字體讓我閱讀起來，十分舒心，這個字體是谷歌新推出的思源宋體，就打算將自己博客的中的字體也替換成思源宋體， 查看了主題Butterfly的配置文件，其沒有提供對該字體支持，開發者回復說導入字體需要自己實現。

對于不太熟悉前端的小伙伴這可能得需要一點時間，這里我只簡單介紹一下Stylus以及修改的步驟，建議有一點前端知識的小伙伴了解 hexo 的模版機制，以及相關技術，主要包括stylus，pug以及 hexo 對應的插件，應該不是特別困難。

目前模板Butterfly使用的css引擎是stylus，這個框架旨在提供 動態、健壯、表現力（EXPRESSIVE，DYNAMIC，ROBUST）的css開發方式。大概提供了以下功能：

1. 可以省略 css 括號，冒號符號

2. 提供函數，簡化重復代碼

3. 提供導入功能，提高可讀性

4. 提供一些內置函數

簡而言之，就是更優雅的編寫css。這樣我們就可以對Butterfly的樣式做一些自定義調整啦。hexo提供了 hexo-renderer-stylus插件，我們就可以通過hexo-config()方法獲取 yaml 文件定義的變量。

如果需要通過外部變量的方式，可以通過以上方式在配置文件定義變量，目前我的做法是 check 一個自定義分支維護自己的一些更改，因為 暫時沒有對外暴露的需求，直接在layout/includes/header/header.pug的文件引入 script，然后在修改配置文件font.font_family 變量，相關修改參考如下：

對于博客中使用的第三方模板和工具，我們需要深度學習，否則就無法對博客進行美化。

重拾對文字的敬畏之心

最近看了兩片博文，一篇是是關于信息的半衰期[1]，信息的半衰期值指一半信息變得沒有價值所需要的時間,比如軟件文檔，如果不維護， 隨著軟件版本的升級，文檔中很多內容會變的沒有價值。博文按照內容其半衰期也有長短區分，打個比方，一篇介紹 kubernetes指定 版本安裝的博文，隨著 kubernetes 的升級，其內容價值會越來越低，而kubernetes的升級確實很快，這就造成這類博文的半衰期很短， 而如果一篇介紹 kubernetes apiserver 設計思想及模式的博文，其半衰期相對則更長。信息的半衰期能一定程度體現博文內容的價值。 所以在進行博文創作的過程中，我們應努力提升博文質量，提高其半衰期。

另一篇文章是<<重拾對文字的敬畏之心-三年個人博文的詞頻解析與反思>>[2]，作者對其博客寫作做了一個詞頻統計分析， 結果很有意思，感興趣的同學可以閱讀原文。

在整理自己博文時，發現之前的博文讀起來十分晦澀，而且有很多明顯的錯誤，這對于讀者閱讀體驗是災難性的。在寫作過程中不恰當的措辭， 頻繁使用口語化的詞匯，這些問題總是存在，如何避免這些問題呢？當然沒有捷徑可循， 只有踏踏實實多閱讀一些優秀的隨筆散文，沉淀這些文章，同時多進行寫作練習，注意用詞，寫作完成后自我檢查校驗。最終形成自己的寫作風格。 恍然間才發現，小學到高中的語文課程和寫作也是很有意義的。

一句話

1. 將文件中的標點符號統一成中文符號，對于技術類的文章，代碼和鏈接中包含了很多.，,，所以只能由作者保證， 沒有工具滿足場景。

2. 博文中如何顯示一個文件 Diff結果？之前讀到過一位作者的博文，很好的展示了Git diff的結果，由于沒有整理， 已經找不到該文章。如果后續有解決方法，會在后續有關博客的相關博文中分享。

3. 博文在引用別人的圖片或文章時，需要注意協議。