之前几周写了一篇关于最小二乘法的博客,但是因为MathJax的问题,最终没有完成于是意识到我可能需要记录一下自己在博客里折腾了什么,不然到时候自己都没法管控自己的博客就贻笑大方了。

原因(需求)

我期望我的博客能到达以下的要求:

  • 托管博客。我并不想有太多的管理工作。

  • 电脑端与移动端都能访问的美观页面。美观不解释,颜值即正义。而且因为大多数情况电脑不在身边才会偶尔看看别人的博客,因此需要同时满足手机和电脑访问都能得到较好的界面。

  • RSS订阅功能。支持RSS是一种美德。

  • 一个国内能访问到的评论系统。(请留给我一种假装博客会有人评论的错觉)

  • 支持MathJax。因为有很多的情况都需要写一些数学的公式,所以比较希望能渲染数学的公式

  • 内容充实。我希望我写的博客内容会不显得那么水。

托管博客

最开始的时候,我是在服务器上搭建的博客,只不过在当时实在也没有写过几篇博客。究其原因的话,除了我懒,还可能是因为在服务器上写实在太麻烦。首先我需要在下面写好文件,然后scp文件过去,ssh登录,在一个不出名的端口启动预览,再正式地重启服务。

无论怎么说,这个流程也太麻烦了,我只是想要一个静态的博客系统而已,不至于花费这么多精力对待它。

于是我开始尝试使用博客园,在上面写博客。博客园上各种功能都是齐全的,只是我自己还觉得要发布一个博客还得登到一个界面里,而且修改的话还得一个个地改动,更为繁琐。

最后决定整个博客移到Github pages上。静态博客生成器使用的是Hexo。这样我只需要写Markdown然后进行发布就足够了。再之后,就是域名重定向到自己的域名,也即blog.ciaran.cn上了。关于Github pages域名的重定向可以参照帮助文档

美观

上面所说的站点的需求中,移动端访问与美观问题都是通过更改Hexo的主题来解决的。Hexo上使用最多的主题无疑是NeXT,而且也符合我上面所说的要求,但是毕竟还是想追求一些与众不同的东西。

最初选用的主题是Yelee。这是一个很酷炫的主题。有很多的功能,而且也有很多好玩的加载效果,甚至包括Markdown的一些格式都能定制。一看界面就觉得五颜六色很厉害的样子。如果有人问我推荐什么比较好的Hexo主题的话,我大概还是会说推荐使用Yelee

放弃使用Yelee的原因是审美的改变。大概觉得五颜六色,动态效果都并非是美,反而分散了原本对文章的注意力,所以打算换用一个简洁有力的主题maupassant,也就是现在的这个主题。界面上没有多的颜色也没有太多的按钮,然而我觉得这就已经够了。

RSS

因为maupassant已经提供了RSS的页面接口也即右上角指向/atom.xml的标签,所以我们只需要安装hexo-generator-feed这个包:

1
npm install --save hexo-generator-feed

然后修改博客自己的_config.yml文件,添加这个插件:找到Plugin一行,添加:

1
2
plugin:
- hexo-generator-feed

在下面添加feed选项,并配置插件的属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# RSS
feed:
## RSS的类型,可选atom和rss2
type: atom
## 生成文件的路径
path: atom.xml
## RSS中显示的文章数量
limit: 20
## RSS中是否显示内容,默认为false
content: true
### 下面两个属性仅在 content 为 false 时有效
## 指定摘要的长度
content_limit: 140
## 指定摘要截取结束的标志
content_limit_delim: ' '

评论系统

评论最开始使用的当然是Disqus。之后由于不可描述的原因,换成了使用韩国的livere (来必力)服务,主要是能连通社交工具,而且也有对评论服务的优化。直到有一天发现,原来在国内是根本没法加载出评论的…而我之前一直开着代理居然完全没有发现这一点。而我写中文博客总不能指望有太多墙外网络环境的人来评论。

于是换用了一个小众的评论服务Valine,它是基于LeanCloud的评论服务。这个好处在于它的UI风格与maupassant的界面风格非常相似(都是黑白之外没有太多颜色),而且完全是自定义的服务。但是坏处也很明显:那就是没有连通社交网络,昵称什么的都需要评论者自己输入,让人很难提起评论的愿望。

MathJax

Hexo默认的渲染引擎是marked,我们需要使用kramed来渲染MathJax。然后用hexo-renderer-mathjax代替hexo-math

1
2
3
4
npm install hexo-renderer-kramed --save
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-mathjax --save
npm uninstall hexo-math --save

照理来说,这样就已经完成了对MathJax的基本的设置了。但是对于一些主题来说,我们还需要在文章中指定mathjax: true选项(比如说maupassant),具体参照主题的文档。

修改 inline 渲染

node_modules/hexo-renderer-kramed/lib/renderer.js 中修改解析美元符号的代码:

1
2
3
4
function formatText(text) {
// Fit kramed's rule: $$ + \1 + $$
return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
}

改为

1
2
3
function formatText(text) {
return text;
}

node_modules/kramed/lib/rules/inline.js中修改解析*_的代码:

1
escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,

改为

1
escape: /^\\([`*\[\]()# +\-.!_>])/,

下方还有一处

1
em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

改为

1
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

内容充实

博客的内容应当以学过了解过思考过的内容为主。参照一下原则:

  • 原创:博客中应当尽可能的以自己写的内容为主,引用和翻译他人作品标明出处。
  • 正确:博客中应当尽量参照官方的文档,少量参考他人的博客。
  • 简洁:博客中应当以尽量简单的语言说明问题。