<script
  is:inline
  src="https://cdn.staticfile.org/twikoo/1.6.32/twikoo.all.min.js"
></script>
<script is:inline define:vars={{ config }}>
  twikoo.init(config);
</script>

<div id="comment"></div>
<script>
  function loadTwikoo() {
    const script = document.createElement("script");
    script.src =
      "https://cdn.jsdelivr.net/npm/twikoo@1.6.41/dist/twikoo.all.min.js";
    script.defer = true;
    script.onload = () => {
      twikoo.init(); //在这里传入你的Twikoo配置信息
    };
    document.body.appendChild(script);
  }
</script>
<!--Twikoo.astro-->

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

window.swup.hooks.on("content:replace", () => {
  initCustomScrollbar();
  initCommentComponent(); // 添加代码调用
});

---
interface Props {
  path: string;
}

const config = {
  el: "#comment",
  path: Astro.props.path,
};
---

<!-- 简化了配置部分的代码，实际上可以把配置文件统一写入fuwari的配置文件统一读取 -->
<div id="comment"></div>
<script define:vars={{ config }}>
  function loadTwikoo() {
    const script = document.createElement("script");
    script.src =
      "https://cdn.jsdelivr.net/npm/twikoo@1.6.41/dist/twikoo.all.min.js";
    script.defer = true;
    script.onload = () => {
      twikoo.init({
        ...config,
        envId: "", // 你的envId，获取方法请参照Twikoo文档
        lang: "zh-CN", // 评论区语言
      }); // 传入配置信息
    };
    document.body.appendChild(script);
  }
  document.addEventListener("loadComment", loadTwikoo, { once: true }); // 监听加载评论事件，但是我们只能监听一次，从而避免多次触发。
</script>

<!--16行左右，不要忘了引入组件-->
import Twikoo from '@components/comment/Twikoo.astro'

<!--- 111行左右新增 -->
<div class="card-base p-6 mb-4"><Twikoo path={`/posts/${entry}`} /></div>

<div
  class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full"
>
  <!--原有的代码，方便参照代码插入位置-->
</div>