修复 Giscus 与 Pjax 不兼容的问题

修复 Giscus 与 Pjax 不兼容的问题

💡 原文中文,约1200字,阅读约需3分钟。
📝

内容提要

本文讨论了修复 Giscus 与 Pjax 不兼容的问题。作者发现评论未随页面更新,经过研究发现是由于 og:title 未更新。最终,通过在 pjax.js 中添加一行代码,解决了该问题,使评论能够正常加载。

🔎

延伸解读

问题根源:og:title 未随 Pjax 更新

作者发现 Giscus 评论不随页面切换而更新的根本原因,在于其评论映射方式选择了 og:title。Pjax 在加载新页面时,会刷新链接路径和 <title> 标签,但不会自动更新 og:title 元标签。因此,当评论系统依赖 og:title 来匹配文章时,新页面仍沿用旧页面的 og:title,导致评论无法正确加载。这解释了为何插件宣称支持 Pjax 但实际测试无效。

映射方式决定兼容性表现

文章指出,Giscus 和 Utterances 等评论系统与 Pjax 的兼容性并非绝对,而是取决于评论与文章的映射方式。若使用链接路径或 <title> 进行映射,由于 Pjax 会刷新这些内容,评论可以正常加载;但若使用 og:title,则因 Pjax 不更新该标签而出现问题。这提醒读者,在排查类似兼容性问题时,应优先检查评论系统的映射配置。

修复思路:补充刷新 og:title

找到原因后,修复方法非常简单:在主题的 pjax.js 文件中,将 og:title 也加入 Pjax 需要刷新的内容列表。这样,每次页面切换时 og:title 会同步更新,Giscus 便能正确匹配并加载对应评论。作者通过这一行代码的改动,解决了困扰多年的问题,也验证了此前插件支持声明与实际表现不符的症结所在。

❓

Q&A

Giscus 与 Pjax 不兼容的主要原因是什么?

主要原因是 og:title 未更新,导致评论无法随页面更新。

如何解决 Giscus 与 Pjax 的不兼容问题?

通过在 pjax.js 中添加一行代码来刷新 og:title,解决了问题。

为什么作者希望切换回使用 Giscus?

因为 Disqus 不支持 Markdown 和 MathJax,作者希望使用更灵活的评论系统。

NexT 插件声称支持 Pjax,但实际情况如何?

实际测试中,NexT 插件并未解决 Giscus 与 Pjax 的兼容性问题。

Giscus 和其他评论系统相比有什么不同?

Giscus 和其他评论系统在引入方式上相似,但与 Pjax 的兼容性存在问题。

作者在寻找解决方案时发现了什么关键线索?

作者通过搜索关键字找到问题所在,意识到需要刷新 og:title。

🏷️

标签

➡️

继续阅读