修复 Giscus 与 Pjax 不兼容的问题

发表于 分类于 ， 阅读次数： 本文字数： 917 阅读时长 ≈ 2 分钟
5年了，终于找到了Utterances/Giscus和Pjax不兼容的原因。

历史

在18年那次博客大改中，因为Disqus无法使用，我把评论系统切换成了基于GitHub Issue的utterances。 但是，它最大的问题在于和Pjax无法兼容。在开启Pjax之后，当我们点进下一个网页的时候，显示的依然是上一个页面对应的评论。因此，当我发现DisqusJS支持自建之后，就切换成了DisqusJS，一直沿用至今。

但是，由于Disqus不支持Markdown和MathJax，所以我其实一直希望能够切换回来。NexT曾宣称解决了Pjax的兼容性问题，但是我当时实际测试之后发现还是不行。

而且令人奇怪的是，utterance和其它评论系统引入的方式是完全一样的，但就是它和gitalk不能支持Pjax，其它的都没有问题。乃至于后来许多文章在对比NexT的几个评论系统的时候，就直接将Utterances说成无法支持Pjax。

在Github Discussion出现之后，又诞生了基于discussion的giscus。结果我试了之后，还是同样的问题，切换页面后评论不变。这个问题从21年一直拖到23年，NexT的插件终于宣称支持了Pjax。但是我实测之后发现，表现和原来是一摸一样的。😢

曙光

直到最近，我无意中搜到了这篇文章，里面提到了通过搜索关键字 new Pjax({ 找到出问题的地方。于是我也试着在NexT主题中尝试寻找，终于发现了问题所在。

在 source/js/pjax.js 中，定义了Pjax需要刷新的内容，其中就包括了加载评论的部分。这个时候我突然意识到，giscus确实在新的页面刷新了，但是我设置的是通过 og:title 来对应文章和评论，而在新的页面中， og:title 并没有更新！​​

这也就解释了为什么插件宣称支持Pjax而我实测不行了。因为插件默认通过文章的链接路径来对应文章和评论，因此在进入新的页面之后，链接自动刷新，评论就能够正常加载了。另外如果通过 title 来对应也没有问题，因为 <title> 会被Pjax刷新。而唯独我是用的 og:title 这个方法不行。😠

终章

找到了问题所在，解决方法也就很简单了，只需要在 pjax.js 中加一行，把 og:title 也刷新就可以了~😅