众所周知,我闲的蛋疼为了对比不同的博客系统并找出最适合我的那一个,我的博客设立了三个版本,一个是 Hexo、一个 是Typecho、一个是Wordpress。这三个版本的博客各有特点,写作和发布文章的方式是各有千秋,功能的多少和轻重也互不相同。因此,尽可能的减少文章“移植”到不同的博客系统的工作量成为了刚需。
用 Markdown 写作
自从第一次使用 Hexo 搭建博客而第一次使用 Markdown 写作以来,我的写作变从未离开过 Markdown。不光不需要考虑排版的问题,不需要时不时就操作一下鼠标的感觉体验过了就真的离不开。再者,我还在使用 Hexo 作为我的一套博客框架,必须使用 Markdown 写作,写好的 Markdown 直接发布在 Hexo 博客上,不需要任何的二次修改。因此,肯定是用 Markdown 写作了。在确定了写作的主题后,我会用 Hexo 生成一个 Markdown 文件。
之后,我会使用 Typora 编辑这份 Markdown 文件,写好文章。
发布到 Hexo
文章写好以后,下面就是刻进骨子里的操作:
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 代码。
- [x] 这里我使用了 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
后保存,就可以得到一个圆润的高亮代码块。
Gravatar
WordPress 的评论系统使用了 Gravatar,只可惜这服务被 GFW 封锁,在没有使用代理的情况下,Gravatar 会使网站一直处于加载中的状态。出于强迫症为了优化网站的体验,我决定自行搭建 Gravatar 镜像并将其应用到我的博客中。
实际上,搭建 Gravatar 镜像是一件非常容易的事情。启用 Nginx 反向代理,添加一条域名解析,设置缓存和内容替换,一个新鲜的 Gravatar 镜像就准备好了。反倒是将之应用到我的博客的过程更为曲折:先是检查 WordPress 设置项,理所当然的没有发现替换 Gravatar 源的选项;再是试图写网站配置重定向,奈何对 Nginx 不太熟悉没能写成;随后试图找 WordPress 插件,却发现并没有一个能够确切满足我的需求的插件。最后,通过查找资料,在/wp-includes
目录下找到了一个名为link-templates
的文件,将其内的 Gravatar 官方源的链接替换成刚刚搭建好的镜像,然后刷新站点缓存,所有的 Gravatar 头像即可在没有代理的情况下正常显示。
Mermaid流程图
说到 Mermaid,虽然 WordPress 原生不自带 Mermaid,但只要装一个插件就能实现支持 Mermaid 流程图,直接在 WordPress 的应用商店里搜索 Mermaid 即可。这里我使用了一个发布时间较新的插件,安装后使用方法和 Enlighter 大同小异。这个插件有一个缺点——会无脑加载 Mermaid 所使用的资源,包括首页、友链页等不需要的地方。开个坑,以后也许会自行修改或者写一个插件解决问题。
Typecho
我采用的 Typecho 主题是 Story,代码高亮功能是自带的,但很遗憾,Typecho 并不支持 Mermaid,同时我似乎没有找到为Typecho 添加 Mermaid 的插件。这意味着我们只能自己去添加这个功能。
给我等着,我先去学一会 PHP,这事没完!