这实际上是在很长一段时间内困扰我的一个 bug,在 hexo s 本地查看 markdown 文章后,会偶发性地出现部分文章渲染错误的情况,如下图:

就变成这个鬼样子了:文章底部有一定的概率渲染不出文字,而且把底部的 div 都给吞了…

查看源码后发现是一大堆莫名其妙的乱码,并且这种情况仅在打开本地服务器后查看的中文文章下出现。我一开始以为是自己主题的问题,于是更换了其它主题,发现问题依然存在。很长一段时间内没有在网上找到解决方案,鉴于这个 bug 只在本地服务器下才会出现,所以我也就暂时没管了(尽管很难受)。就这样过了一年…

结果,今天竟然有意外的发现!我发在 v2ex 的求助帖有人回复了,层主说他也遇到了一样的问题,建议我更新 hexo 的版本。我一想,确实很久没更新了,也许是 hexo 的问题,更新之后说不定可以解决。不过,在我更新完版本,满怀欣喜地查看文章的时候,发现很多文章还是渲染出错。

这时候我注意到一个问题,就是我使用的热更新插件 hexo-browsersync 在一些文章下没有热更新的提示,而且这些文章恰好就是渲染错误的文章。于是我来到插件的 issue 下,看有没有新的发现 —— 真的有。就是这篇 issue,大概浏览了一遍,发现大家都有和我一样的问题,不管是环境还是症状,都一模一样(流下了同病相怜的泪水)。

具体的原因,暂时还没有特别明确的解释,但 issue 里有人说是文件流传输过程中编码出错导致的。正常情况下不使用热更新插件还看不出这个错误,在使用之后就暴露这个问题了。按照帖子底下的做法,最终完美解决,所有的文章都正常显示了。

总结一下,如果你:

可以尝试:

  • 卸载 hexo-browsersync 插件。貌似新版的 hexo 已经支持热更新了,所以不再需要这个插件了

  • 保留插件,在 hexo 根目录的 config.yml 文件中添加配置(黑魔法):

server:
  compress: true 

完美解决!

参考:

https://github.com/hexojs/hexo-browsersync/issues/15

https://github.com/twoyao/beautiful-hexo/issues/6