之前介绍了在Hexo Butterfly主题中使用Artalk评论系统
结果最近发现有时不会正常工作

问题

主要是由Pjax造成的链接不更新问题，包括：

  • 评论后Artalk识别到的页面为根目录或上一页面
  • 进入某页面评论出现混淆
  • 评论不显示

分析与解决

Artalk后台信息

首先查看Artalk后台，进入 页面 选项，发现多出了个网站主页，而标题却是文章的页面标题，但此时我也不知道究竟是哪里出了问题。

意外收获

之后在浏览Butterfly 安装文档(四) 主题配置-2时发现其中这样说：

启用Pjax后不用重复加载相同的资源（css/js）， 从而提升网页的加载速度。
对于一些第三方插件，有些并不支持 pjax 。
使用pjax后，一些自己DIY的js可能会无效，跳转页面时需要重新调用，请参考Pjax文档
使用pjax后，一些个别页面加载的js/css，将会改为所有页面都加载

由此我基本知道了一切都是Pjax捣的鬼，关闭Pjax后就正常运行了

但Pjax带来的速度提升与流畅度确实是不可忽略的，特别是没有开启时进入任意页面屏幕都会黑一下（恼

缺一不可？共存！

查阅Pjax文档
后有了一些启发

[8月24日]警告：此处的内容为错误的，请勿使用。暂且留下错误当作记录
观察主题代码，所有有 js-pjax 类的块都会被Pjax重新加载，而主题的 warp-comments 位置刚好没有，于是加上后我重新生成页面。

再测试，从主页进入任何文章已经可以正常显示了，但 问题仍然存在：

  • 从某个 页面/文章 进入其他 页面/文章 会识别为上一页面的网址

遇事不懂看文档

Pjax的原理是通过ajax请求来更新页面指定部分，然后再更新浏览器上显示的网址。
仔细思考时序，我猜测：

用户点击页面-->Pjax更新Artalk及相关部分-->Pjax更新网址

由此我们需要使Artalk在网址更新后运行

修复

  1. 打开 主题目录/layout/includes/third-party/comments/ 目录

  2. 打开 Artalk.pug ,将27行的 if (typeof window.artalkItem === 'object') 后的 initArtalk() 改为 setTimeout(initArtalk, 50)

重新生成页面

来到博客根目录，执行

1
2
hexo clear
hexo d -g

自此，Artalk对Butterfly Pjax的不兼容问题就已经完全修复，可以正常使用！