眾所周知，我閒的蛋疼為了對比不同的博客系統並找出最適合我的那一個，我的博客設立了三個版本，一個是 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，這事沒完！