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

hexo 及 Butterfly 主題升級

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

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

圖片管理

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

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

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

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

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

Markdown 協(xié)議 、渲染引擎和格式化

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

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

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

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

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

博文代碼塊

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

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

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

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

Every interaction is both precious and an opportunity to delight.

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

主題高級配置-導入字體

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

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

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

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

2. 提供函數(shù)，簡化重復代碼

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

4. 提供一些內(nèi)置函數(shù)

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

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

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

重拾對文字的敬畏之心

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

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

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

一句話

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

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

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