眾所周知，我閒的蛋疼為了對比不同的部落格系統並找出最適合我的那一個，我的部落格設立了三個版本，一個是 Hexo、一個 是Typecho、一個是Wordpress。這三個版本的部落格各有特點，寫作和釋出文章的方式是各有千秋，功能的多少和輕重也互不相同。因此，儘可能的減少文章“移植”到不同的部落格系統的工作量成為了剛需。

用 Markdown 寫作

自從第一次使用 Hexo 搭建部落格而第一次使用 Markdown 寫作以來，我的寫作變從未離開過 Markdown。不光不需要考慮排版的問題，不需要時不時就操作一下滑鼠的感覺體驗過了就真的離不開。再者，我還在使用 Hexo 作為我的一套部落格框架，必須使用 Markdown 寫作，寫好的 Markdown 直接釋出在 Hexo 部落格上，不需要任何的二次修改。因此，肯定是用 Markdown 寫作了。在確定了寫作的主題後，我會用 Hexo 生成一個 Markdown 檔案。

之後，我會使用 Typora 編輯這份 Markdown 檔案，寫好文章。

釋出到 Hexo

文章寫好以後，下面就是刻進骨子裏的操作:

1
2
3
4

cd blog
hexo g
export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:7890
hexo d

直接將文章釋出到 Hexo 部落格。為什麼在有了 Typecho 以後我還是在使用看上去不那麼方便的 Hexo？就像 Markdown，只要配置得當，Hexo 對 Markdown （Github Flavoured Markdown）近乎完美的支援可以讓我更專注於寫部落格本身，不需要考慮任何關於格式方面的問題。

釋出到 Typecho

現在還是相對簡單的部分。Typecho 雖然支援 Markdown，但對於 Github Flavoured Markdown 支援的程度顯然沒有 Hexo 好，例如- [x]在使用 Hexo 時就可以正確渲染，但 Typecho 就不能識別。這時我們便不得不用 HTML 替換掉原本的 Markdown 代碼。

• 這裏我使用了 Markdown

要是你在黑土地看這篇文章，你可能會發現上面的 Checkbox 並沒有被正確渲染，如果直接以 HTML 代碼替換掉這個 Checkbox，顯示的效果如下：

• 這裏我使用了 HTML

替換好以後文章方可正常顯示。

釋出到 Wordpress

Wordpress 的編輯器真的是個大麻煩。不光預設沒有代碼高亮，也是個連 Markdown 都不支援的東西。不過好在 Wordpress 的編輯器支援插入自定義的 HTML 內容。經過簡單的嘗試，在將 Markdown 文章轉換成 HTML 格式直接貼上在 Wordpress 的 HTML 內容編輯器後切換回視覺化編輯器會直接變為 Wordpress 經典編輯器，這使得我想要進一步編輯文章新增一些 Wordpress 特有的區塊時很不方便。所以，在 Typora 裏直接複製文章貼上到 Wordpress 的預設編輯器裏，隨後更改渲染錯誤的地方替換為自定義 HTML 代碼塊。

對 Typecho 和 Wordpress 的小修小補

你可能會注意到，我寫文章的時候時常需要新增代碼塊和 Mermaid 流程圖，hexo-theme-cactus自帶代碼高亮，而我又透過修改主題加入了mermaid.js，但 Typecho 和 Wordpress 預設都無上述兩個功能。為了儘可能的減少文章“移植”到不同的部落格系統的工作量，我對這倆貨進行了一些小修小補。

Wordpress

我採用的 Wordpress 主題是 MDx，並不帶有代碼高亮功能，因此我使用了 enlighter.js 官方提供的 Wordpress 外掛。安裝這個外掛後，Wordpress 編輯器裏會多出一種名叫 Enlighter 的區塊，使用它作為代碼的載體即可實現代碼高亮的功能。這款外掛提供的自定義樣式選項不足，這個區塊本身的樣式又過於稜角分明，與 MDx 圓潤的邊角格格不入。好在這款外掛的 CSS 檔案能夠被找到，只要學過 CSS ，修改出一個圓潤的邊角也不是什麼難事。

開啓部落格的安裝目錄，找到/wp-content/plugins/enlighter/resources/enlighterjs裏的enlightenjs.min.css檔案，編輯這個檔案，找到其中的enlighter-default類，修改padding引數為10px，新增border-radius引數為10px後儲存，就可以得到一個圓潤的高亮代碼塊。

説到 Mermaid，雖然 Wordpress 原生不自帶 Mermaid，但只要裝一個外掛就能實現支援 Mermaid 流程圖，直接在 Wordpress 的應用商店裏搜尋 Mermaid 即可。

Typecho

我採用的 Typecho 主題是 Story，代碼高亮功能是自帶的，但很遺憾，Typecho 並不支援 Mermaid，同時我似乎沒有找到為Typecho 新增 Mermaid 的外掛。這意味着我們只能自己去新增這個功能。

給我等着，我先去學一會 PHP，這事沒完！