ArtalkJS / Artalk

🌌 自托管评论系统 | Your Self-hosted Comment System.
https://artalk.js.org
MIT License
1.48k stars 120 forks source link

[Help]: 配合Pjax刷新页面使用 #909

Open everfu opened 3 weeks ago

everfu commented 3 weeks ago

可以帮我看看,当我在一个页面加载评论后,转到两外一个页面,获取到的评论仍是上一个路径的评论信息

地址:https://www.efu.me/

qwqcode commented 3 weeks ago

以下这个 Pjax 案例可以参考:

<div id="content">
  <!-- Your website content -->
  <div id="artalk-container"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/artalk/dist/Artalk.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var pjax = new Pjax({
      elements: "a",
      selectors: ["title", "#content"]
    });

    var artalk = Artalk.init({
      el: '#artalk-container',
      pageKey: window.location.pathname,
      pageTitle: document.title,
      server: 'http://your-artalk-server.com',
      site: 'Your Site'
    });

    document.addEventListener('pjax:complete', function() {
      artalk.update({
        pageKey: window.location.pathname,
        pageTitle: document.title
      });
      artalk.reload();
    });
  });
</script>
  1. 初始化 Pjax:监听 Pjax 的 pjax:complete 事件,以便在页面切换后进行相应的操作。
  2. 初始化 Artalk:在页面加载时初始化 Artalk,并设置初始配置。
  3. 更新 Artalk 配置:在 Pjax 切换页面后,使用 artalk.update 方法更新 Artalk 的配置。这包括更新 pageKey 和 pageTitle。
  4. 重新加载评论列表:调用 artalk.reload() 方法来重新加载评论列表。
everfu commented 2 weeks ago

不太行,不知道什么原因 可以看看我的代码:https://github.com/everfu/hexo-theme-solitude/blob/main/layout/includes/widgets/third-party/comments/artalk.pug