同时发布三个版本的站点？我的博客工作流及对每个版本的优化方案

~~众所周知，我闲的蛋疼~~为了对比不同的博客系统并找出最适合我的那一个，我的博客设立了三个版本，一个是 Hexo、一个是Typecho、一个是Wordpress。这三个版本的博客各有特点，写作和发布文章的方式是各有千秋，功能的多少和轻重也互不相同。因此，尽可能的减少文章“移植”到不同的博客系统的工作量成为了刚需。

用 Markdown 写作

自从第一次使用 Hexo 搭建博客而第一次使用 Markdown 写作以来，我的写作变从未离开过 Markdown。不光不需要考虑排版的问题，不需要时不时就操作一下鼠标的感觉体验过了就真的离不开。再者，我还在使用 Hexo 作为我的一套博客框架，必须使用 Markdown 写作，写好的 Markdown 直接发布在 Hexo 博客上，不需要任何的二次修改。因此，肯定是用 Markdown 写作了。在确定了写作的主题后，我会用 Hexo 生成一个 Markdown 文件。

用Hexo生成一个Markdown文件

之后，我会使用 Typora 编辑这份 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，这事没完！