定期维护

Ramen 收录于博客记录

2018-02-28 约 2500 字预计阅读 5 分钟

注意，本文已经超过时效，请参考最新的 NexT 主题文档。

开学了，该执笔书写了。在此之前，定期维护也是必要的。

从上次开始，我就养成了从Github搜索主题更新的好习惯。Next刚好在最近更新到了v6.0.5版本。

虽然官方明确表示6.0和5.1.x比起来并没有里程碑或者重大变化，但是我还是决定升级，~~新年新气象嘛~~。

这篇文章记录了一些区别和定期维护时修改的一些配置，如果你也想更新/使用Next 6主题，可能可以找到一些你需要的信息。

0x01. 更新

更新本身是很简单的。

直接来到release页面，下载最新版并放置到新的next主题文件夹（不要覆盖原文件夹），然后来到站点的_config.yml修改指向新的文件夹即可。

0x02. 5 to 6

官方推荐直接使用5的主题配置文件覆盖6的，但是由于主题一些结构的修改，这么做会带来很莫名奇妙的问题。我逐条手动修改，这里有几个需要注意的地方：

语言：
新的语言仍然在站点的_config.yml设置，但是简体中文已经不再是zh-Hans，而是zh-CN。

字数统计：

老的字数统计hexo-wordcount已经弃用，新的字数统计为hexo-symbols-count-time。启用方式很直接：

1
2
npm un hexo-wordcount --save
npm i hexo-symbols-count-time --save

安装依赖，把如下的配置添加到站点的_config.yml里面：

1
2
3
4
5
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

把如下的配置添加到主题的_config.yml里面：

1
2
3
4
5
6
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 5
  wpm: 200

依赖分离
新版本把很多依赖分离成了独立的库，包括但不仅限于：
- fancybox
- 动画系列，如canvas-next、three-waves等
  请根据配置文件内的提示进行配置。

0x03. 配置

由于我之前提到过，个人并不是很喜欢LiveRe，这次更新也是准备检查一下有没有新的一个评论系统，顺带着又配置了一些6.0版本的新功能，记录如下：

Gitment
来自于imsun/gitment的评论系统，基于Github Issue，考虑到本博客的受众，这一项是可以接受的。
配置过程其实相当简单，这里是教程。
简单来说，注册一个OAuthApplication，然后回到配置文件里面填入必要信息即可。
我的处理方法是专门开了一个新的仓库来保存评论，在这里。
同时要注意，每篇文章都需要使用登录自己的Github账号来让Gitment初始化评论。
持久化链接
原先的链接格式的确有一些问题，这次也就痛定思痛处理了一下。
选择了hexo-abbrlink：
1
npm install hexo-abbrlink
然后把如下添加到站点的_config.yml里面：
1 2 3
abbrlink: alg: crc32 rep: hex

切换公示渲染库为$\KaTeX$

$\KaTeX$是来自可汗学院开发的一套新兴的网页公示渲染库。之前的解决方案都是MathJax，但是MathJax的问题在于库太大，渲染起来太慢，很多时候我们要看着 $2x+5$ 变成$2x+5$，而不是打开网页的时候就渲染好$2x+5$。虽然目前KaTeX对完整LaTeX语法的支持仍然不是很全面（基础已经完全支持），但是由于我写的博客并不会涉及到太多太深入的LaTeX语法，所以我还是决定选择一个速度比较快的。

首先是切换hexo的渲染器：

1
2
npm un hexo-renderer-marked --save
npm -i hexo-renderer-markdown-it-plus --save

这一步把渲染器换成了hexo-renderer-markdown-it-plus，同时也解决了公式内_被错误渲染的问题，这意味着我们可以直接删除所有raw块。同时，在原理上，原来的渲染器并不会对公式做处理，而是要求主题对接口提供渲染库，这个渲染器是直接使用katex在渲染过程中就进行处理，效率也就更高。

下一步是添加渲染器配置到站点配置文件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
markdown_it_plus:
  highlight: true
  html: true
  xhtmlOut: true
  breaks: true
  langPrefix:
  linkify: true
  typographer: true
  quotes: “”‘’
  pre_class: highlight

添加完之后，回到主题配置文件来切换公示渲染库：

1
2
3
4
5
6
7
math:
  enable: true

  # ...

  #engine: mathjax
  engine: katex

完成了～另外注意，这里我遇到了一个Bug：hexo-beautify会和这个渲染器冲突，导致生成的公式有莫名空格。卸载即可。

pangu
pangu.js解决了一个什么问题？
中文段落字与字之间并不需要空格，而英文中，分词需要空格。那么两种语言混写的时候，绝大部分都是这个样子的：
1
你好Smith先生，您在Amazon订购的PS4游戏机预计30分钟后送达。
在中英文交界的地方，的确是对视觉上有一定影响，而如下这样的文章就舒服得多：
1
你好 Smith 先生，您在 Amazon 订购的 PS4 游戏机预计 30 分钟后送达。
pangu.js就是帮你添加这个空格的。
漢學家稱這個空白字元為「盤古之白」，因為它劈開了全形字和半形字之間的混沌。另有研究顯示，打字的時候不喜歡在中文和英文之間加空格的人，感情路都走得很辛苦，有七成的比例會在 34 歲的時候跟自己不愛的人結婚，而其餘三成的人最後只能把遺產留給自己的貓。畢竟愛情跟書寫都需要適時地留白。
上面这段话来自pangu.js的README。虽然我也觉得这样视觉效果好，但是很多时候我自己写的时候也会忘记，而且我还是那种比较喜欢用英文原文表述的人，很多时候眼睛的确很累，所以我启用了这个。
直接git clone依赖然后启用即可。同时你也可以安装对应的Chrome插件。
分享
分享使用了Need More Share 2，但是图标目前只有色块是一个问题，暂时不知道怎么解决，会关注Issue。
安装和上面的pangu.js一样，不再赘述。
字体
由于Google Font国内镜像没了，我找了一会儿选择了来自CSS.NET的https://fonts.cat.net作为字体镜像，中文字体没有做特殊的选择，英文正文选择的是Nunito，代码选择了PT Mono。这两款一个是Google设计的我个人很喜欢的开源字体，另一个则是比较小众的等宽代码字体。当然，这两款字体都比较细，希望大家不要觉得看起来太吃力 :)。

至于打赏和RSS，自觉文章写的质量和频率不能保证，打开这两项虽然难度的确很低，但是这其实并没有什么意义，此时不是最好的时候。我如果有一天能够自信的保证文章的质量和频率，我一定会打开并专门写文章总结一下心路历程，这一次还是不做这些没什么用的东西了。如果你感觉我的文章帮到了你或者读起来很舒服，帮我分享就好。

这就是一切了，感谢Hexo、Next和Github/Coding Pages，我的博客之路才能这么顺利。

新的一年，多多指教了。

目录

定期维护

0x01. 更新

0x02. 5 to 6

0x03. 配置