修复 Twikoo 评论错误 twikoo is not defined

248 字

1 分钟

修复 Twikoo 评论错误 twikoo is not defined

2025-10-22

折腾

Fuwari

/

Twikoo

在之前引入 Twikoo 评论的教程中，由于脚本加载顺序，直接引入 CDN 脚本并立即调用 twikoo.init() 可能因加载顺序导致错误 twikoo is not defined

1
<script is:inline src="https://cdn.starryfrp.com/libs/twikoo/1.6.44/twikoo.all.min.js"></script>
2
<script is:inline define:vars={{ config }}>
3
  twikoo.init(config) <!-- ❌ 这里可能会报错 -->
4
</script>

为了解决这个问题，可以采用 动态加载 + Swup 兼容 的方式。

首先，创建事件通知函数#

打开 /src/layouts/Layout.astro 文件，添加以下内容：

1
function initCommentComponent() {
2
  const event = new Event("loadComment");
3
  document.dispatchEvent(event);
4
}

接着，在 Swup 生命周期中和页面初始化时调用它#

1
function init() {
2
  // ... 其他初始化
3
  initCommentComponent(); // 首次加载
4
}
5
window.swup.hooks.on('content:replace', initCustomScrollbar)
6
window.swup.hooks.on("content:replace", () => {
7
  initCustomScrollbar();
8
  initCommentComponent();
9
});

最后，修改 Twikoo 评论组件#

1
<div id="tcomment"></div>
2
<script is:inline src="https://cdn.starryfrp.com/libs/twikoo/1.6.44/twikoo.all.min.js"></script>
3
<script is:inline define:vars={{ config }}>
4
  twikoo.init(config)
5
</script>
6
<script define:vars={{ config }}>
7
  function loadTwikoo() {
8
    const script = document.createElement("script");
9
    script.src =
10
      "https://cdn.starryfrp.com/libs/twikoo/1.6.44/twikoo.all.min.js";
11
    script.defer = true;
12
    script.onload = () => {
13
      twikoo.init(config); // 传入配置信息
14
    };
15
    document.body.appendChild(script);
16
  }
17
  document.addEventListener("loadComment", loadTwikoo, { once: true });
18
</script>