警告

注意,本文已经超过时效,请参考最新的 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-nextthree-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,我的博客之路才能这么顺利。

新的一年,多多指教了。