升级Hexo和NexT主题趟坑小记

事情源起于心血来潮把Hexo从v3.9.0升级到了v4.0.0,Hexo本身的升级倒是不难,它由npm管理,改下package.json,运行npm update即可。但之后发现在archives的分页显示有问题……

分页显示图标消失

<i class="fa fa-angle-right" aria-label="Next page"></i>

乍看以为是fontawesome的问题,F12在浏览器中看了下fontawesome加载正常。看了下网页源码长这样:

<nav class="pagination">

<span class="page-number current">1</span><a class="page-number" href="[/archives/page/2/](http://finisky.github.io/archives/page/2/)">2</a><span class="space">&hellip;</span><a class="page-number" href="[/archives/page/4/](http://finisky.github.io/archives/page/4/)">4</a><a class="extend next" rel="next" href="[/archives/page/2/](http://finisky.github.io/archives/page/2/)">&lt;i class=&quot;fa fa-angle-right&quot; aria-label=&quot;Next page&quot;&gt;&lt;&#x2F;i&gt;</a>

</nav>

看起来像是页面渲染时的转义错误,搜了下有一个github issue已经解决了这个问题:pagination parsing error(分页编译错误) #3729。简单说是hexo-util v0.6.3版本造成的。

再一干脆把NexT主题也升级下,升到v7.5.0。这下捅了马蜂窝……

升级NexT主题手动解冲突

NexT主题升级只能通过手动git pull的方式,之前改了不少_config.yml,需要手动解决conflicts,坑爹之处在于许多section的位置在master上也调整了,conflicts比较多。

之前还添加了个categorycustom.swig的layout文件,除了conflicts之外,还要修改下swig文件:Hexo添加自定义分类菜单项并定制页面布局

hexo g不好使

更麻烦的是hexo-renderer的问题,看NexT在mathjax这块的配置:

# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.

hexo-renderer-pandoc

但卸载了hexo-renderer-marked装上hexo-renderer-pandoc之后,渲染不了页面:

$ hexo g
INFO  Start processing
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Error:
[ERROR][hexo-renderer-pandoc] On finisky/source/_posts/aimdapp.md
[ERROR][hexo-renderer-pandoc] pandoc exited with code null.
    at Hexo.pandocRenderer (finisky/node_modules/hexo-renderer-pandoc/index.js:114:11)
    at Hexo.tryCatcher (finisky/node_modules/bluebird/js/release/util.js:16:23)
    at Hexo.<anonymous> (finisky/node_modules/bluebird/js/release/method.js:15:34)
    at Promise.then.text (finisky/node_modules/hexo/lib/hexo/render.js:60:20)
    at tryCatcher (finisky/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (finisky/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (finisky/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromiseCtx (finisky/node_modules/bluebird/js/release/promise.js:606:10)
    at _drainQueueStep (finisky/node_modules/bluebird/js/release/async.js:142:12)
    at _drainQueue (finisky/node_modules/bluebird/js/release/async.js:131:9)
    at Async._drainQueues (finisky/node_modules/bluebird/js/release/async.js:147:5)
    at Immediate.Async.drainQueues [as _onImmediate] (finisky/node_modules/bluebird/js/release/async.js:17:14)
    at processImmediate (timers.js:632:19)

hexo-renderer-kramed

好的,那么再试下hexo-renderer-kramed。一切OK,打开页面傻眼:

hexo-renderer-marked + hexo-math

所以只好用老方法hexo-renderer-marked + hexo-math解决问题,但发现hexo-math的依赖hexo-inject已不再维护,且报错:

ERROR [hexo-inject] Error injecting: undefined
ERROR (finisky/node_modules/hexo-math/asset/inject.swig) [Line 2, Column 38]
  Error: Unable to call `JSON["stringify"]`, which is undefined or falsey
Template render error: (finisky/node_modules/hexo-math/asset/inject.swig) [Line 2, Column 38]
  Error: Unable to call `JSON["stringify"]`, which is undefined or falsey
    at Object._prettifyError (finisky/node_modules/nunjucks/src/lib.js:36:11)
    at finisky/node_modules/nunjucks/src/environment.js:567:19
    at Template.root [as rootRenderFunc] (eval at _compile (finisky/node_modules/nunjucks/src/environment.js:637:18), <anonymous>:21:3)
    at Template.render (finisky/node_modules/nunjucks/src/environment.js:556:10)
    at Hexo.njkRenderer (finisky/themes/next/scripts/renderer.js:24:27)
    at Promise.then.text (finisky/node_modules/hexo/lib/hexo/render.js:60:20)
    at tryCatcher (finisky/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (finisky/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (finisky/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (finisky/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (finisky/node_modules/bluebird/js/release/promise.js:694:18)
    at _drainQueueStep (finisky/node_modules/bluebird/js/release/async.js:138:12)
    at _drainQueue (finisky/node_modules/bluebird/js/release/async.js:131:9)
    at Async._drainQueues (finisky/node_modules/bluebird/js/release/async.js:147:5)
    at Immediate.Async.drainQueues [as _onImmediate] (finisky/node_modules/bluebird/js/release/async.js:17:14)
    at processImmediate (timers.js:632:19)

心中一万匹艹泥马奔过……但好在虽然hexo-inject报错,但生成出来的页面暂时没发现有问题,数学公式也可正常渲染。只是这些ERROR在每次生成时都报满屏,非常annoying。

重回hexo-renderer-kramed

hexo-renderer-kramed毕竟是hexo-renderer-marked支持mathjax的升级版,理论上不应该有问题。又试了一次hexo g,发现一行有意思的日志:

$ hexo g
INFO  Start processing
INFO  Files loaded in 3.79 s
INFO  Deleted: css/main.css

再Debug下之前的秃页面查看网络发现确实是缺少了css文件所致页面显示异常。搜了下 public/ missing css #995 发现css需要hexo-renderer-stylus生成,之前为了干净,把一众认为不用的包删掉了……

$ npm install hexo-renderer-stylus --save

装上之后css/main.css成功恢复,no error,no warnings,功德圆满。

可兼容的package.json

贴下最终的npm package.json供参考:

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "4.0.0"
  },
  "dependencies": {
    "applicationinsights": "^1.6.0",
    "constantinople": "^4.0.1",
    "hexo": "^4.0.0",
    "hexo-deployer-git": "^1.0.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-baidu-sitemap": "^0.1.6",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-sitemap": "^1.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-lazyload-image": "^1.0.4",
    "hexo-related-popular-posts": "^3.0.6",
    "hexo-renderer-kramed": "^0.1.4",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-server": "^0.3.1"
  }
}