升级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">…</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/)"><i class="fa fa-angle-right" aria-label="Next page"></i></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"
}
}