Update and rename TwikooComments.astro to Twikoo.astro

src/components/Twikoo.astro

@@ -0,0 +1,38 @@
+---
+// src/components/Twikoo.astro
+---
+
+<div id="twikoo"></div>
+
+<script>
+  function loadTwikoo() {
+    // 动态导入Twikoo，避免SSR问题
+    import('twikoo').then((twikoo) => {
+      twikoo.init({
+        envId: 'http://47.108.235.131:40063/', // 改成你的Worker域名
+        el: '#twikoo',
+        path: window.location.pathname,
+        lang: 'zh-CN',
+      });
+    });
+  }
+
+  // 页面首次加载
+  loadTwikoo();
+
+  // 【关键】视图过渡路由兼容
+  document.addEventListener('astro:page-load', () => {
+    // 清空容器，避免重复渲染
+    const container = document.getElementById('twikoo');
+    if (container) {
+      container.innerHTML = '';
+      loadTwikoo();
+    }
+  });
+</script>
+
+<style>
+  #twikoo {
+    margin-top: 2rem;
+  }
+</style>

src/components/TwikooComments.astro

@@ -1,96 +0,0 @@
----
-interface Props {
-  envId: string;
-  path?: string;
-}
-const { envId, path } = Astro.props;
----
-
-<div class="twikoo-wrapper mx-auto max-w-2xl">
-  <div id="tcomment" data-env-id={envId} data-path={path || 'auto'}></div>
-</div>
-
-<script is:inline src="/twikoo.all.min.js" defer></script>
-
-<script is:inline>
-  let initPromise = null;
-
-  async function initTwikoo() {
-    const container = document.getElementById('tcomment');
-    if (!container) return;
-
-    // 避免重复初始化（如果正在初始化则等待）
-    if (initPromise) return initPromise;
-
-    initPromise = (async () => {
-      const envId = container.dataset.envId;
-      let path = container.dataset.path;
-      if (path === 'auto' || !path) {
-        path = window.location.pathname;
-      }
-
-      // 等待 twikoo 脚本加载完成
-      let retries = 0;
-      while (typeof window.twikoo === 'undefined' && retries < 30) {
-        await new Promise(r => setTimeout(r, 200));
-        retries++;
-      }
-
-      if (typeof window.twikoo === 'undefined') {
-        container.innerHTML = '<p class="text-gray-500">评论系统加载失败，请刷新重试。</p>';
-        return;
-      }
-
-      // 清空容器，避免残留旧内容导致样式错乱
-      container.innerHTML = '';
-
-      // 调用 Twikoo 初始化
-      window.twikoo.init({
-        envId: envId,
-        el: '#tcomment',
-        path: path,
-        lang: 'zh-CN',
-      });
-    })();
-
-    return initPromise;
-  }
-
-  // 初始加载
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => initTwikoo());
-  } else {
-    initTwikoo();
-  }
-
-  // 处理 Astro 视图转换（页面切换）
-  document.addEventListener('astro:after-swap', () => {
-    // 重置初始化标记，重新执行
-    initPromise = null;
-    // 给新 DOM 一点时间渲染
-    setTimeout(() => initTwikoo(), 50);
-  });
-</script>
-
-<style is:global>
-  /* 确保评论区容器有最小高度，避免加载时塌陷 */
-  #tcomment {
-    min-height: 200px;
-  }
-
-  /* 强制页脚回到正常流（辅助解决位置问题，但主要靠插槽解决） */
-  footer,
-  .footer,
-  [class*="footer"] {
-    position: static !important;
-    margin-top: 2rem !important;
-  }
-
-  /* 暗色模式适配 */
-  .dark #tcomment .tk-content textarea,
-  .dark #tcomment .tk-input input {
-    background-color: rgb(39 39 42) !important;
-    border-color: rgb(63 63 70) !important;
-    color: rgb(228 228 231) !important;
-  }
-</style>