vuepress-plugin-twikoo 1.0.4 → 1.0.5

package/Comment.vue

@@ -3,32 +3,28 @@
 </template>
 
 <script>
+
 export default {
   mounted() {
-    // 检查是否在浏览器环境中
+    // 页面刷新/组件挂载时，直接执行初始化+移动逻辑
     if (typeof window !== 'undefined') {
-      // 如果指定了容器，将评论组件移动到指定位置
-      this.$nextTick(() => {
-        // 这里操作 DOM 更安全，能确保组件相关的 DOM 全部渲染
-        this.moveContainer()
-        this.initTwikoo()
-      })
+      this.$nextTick(async () => {
+        // 先初始化 Twikoo（异步）
+        await this.initTwikoo();
+      });
     }
 
-    this.$router.afterEach((to, from) => {
-      if (to && from && to.path === from.path) {
-        return
-      }
-      // 检查是否在浏览器环境中
-      if (typeof window !== 'undefined') {
-        // 重新定位评论组件
-        this.$nextTick(() => {
-          // 这里操作 DOM 更安全，能确保组件相关的 DOM 全部渲染
-          this.moveContainer()
-          this.initTwikoo()
-        })
-      }
-    })
+    // 监听路由变化（仅处理路由跳转，刷新不触发）
+    this.$watch(
+      () => this.$route,
+      async (to, from) => {
+        if (to.path === from.path) return; // 仅 hash 变化时跳过
+        if (typeof window !== 'undefined') {
+          await this.initTwikoo();
+        }
+      },
+      { immediate: false }
+    );
   },
 
   methods: {
@@ -37,38 +33,94 @@ export default {
         to: {},
         from: {},
         ...this.$frontmatter
-      }
+      };
 
       if (!this.needComment(frontmatter)) {
-        return
+        return;
+      }
+
+      // 第一步：带重试查找 #tcomment 容器（解决 DOM 渲染慢的问题）
+      const tcommentEl = await this.findElementWithRetry('#tcomment', 20, 100);
+      if (!tcommentEl) {
+        console.error('多次重试后仍未找到 #tcomment 容器，Twikoo 初始化失败');
+        return;
       }
 
-      const twikoo = await import('twikoo')
-      twikoo.init({
+      // 异步加载 Twikoo 并初始化
+      const twikoo = await import('twikoo');
+      // 初始化后返回 Promise，确保 DOM 生成完成
+      await twikoo.init({
         ...TWIKOO_OPTIONS,
         el: TWIKOO_OPTIONS.el || '#tcomment'
-      })
+      });
+
+      this.moveContainerWithRetry();
     },
 
     needComment(frontmatter) {
-      return frontmatter.twikoo !== false
+      return frontmatter.twikoo !== false;
     },
 
+    // 基础移动逻辑（抽离成独立函数）
     moveContainer() {
-      if (TWIKOO_CONTAINER) {
-        const targetContainer = document.querySelector(TWIKOO_CONTAINER)
-        if (targetContainer) {
-          // 将评论容器移动到目标位置
-          const tkComments = document.querySelector('.tk-comments')
-          const el = tkComments.parentElement
-          const commentContainer = el || document.querySelector(TWIKOO_OPTIONS.el)
-          if (commentContainer) {
-            targetContainer.appendChild(commentContainer)
-          }
-        }
+      if (!TWIKOO_CONTAINER) return; // 无目标容器则直接返回
+
+      const targetContainer = document.querySelector(TWIKOO_CONTAINER);
+      if (!targetContainer) return; // 目标容器不存在则返回
+
+      const commentContainer = document.querySelector(TWIKOO_OPTIONS.el);
+      if (commentContainer) {
+        targetContainer.appendChild(commentContainer);
+        return true; // 移动成功，返回 true
       }
-    }
+      return false;
+    },
+
+    // 带重试机制的移动逻辑（解决异步 DOM 生成问题）
+    moveContainerWithRetry(maxRetries = 5, interval = 100) {
+      let retries = 0;
+
+      const retry = () => {
+        const success = this.moveContainer();
+        retries++;
+
+        // 移动成功 或 达到最大重试次数，终止重试
+        if (success || retries >= maxRetries) {
+          if (!success) console.warn('Twikoo 容器移动失败：未找到 .tk-comments 元素');
+          return;
+        }
+
+        // 继续重试
+        setTimeout(retry, interval);
+      };
+
+      retry();
+    },
+
+    // 新增：通用的「带重试查找 DOM 元素」函数（可复用）
+    findElementWithRetry(selector, maxRetries = 20, interval = 100) {
+      return new Promise((resolve) => {
+        let retries = 0;
+
+        const checkElement = () => {
+          const el = document.querySelector(selector);
+          retries++;
+
+          // 找到元素 或 达到最大重试次数，终止并返回结果
+          if (el || retries >= maxRetries) {
+            resolve(el);
+            return;
+          }
+
+          // 未找到则继续重试
+          setTimeout(checkElement, interval);
+        };
+
+        // 立即执行第一次检查
+        checkElement();
+      });
+    },
 
   }
-}
-</script>
+};
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-plugin-twikoo",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Twikoo comment plugin for vuepress 1.x",
   "main": "index.js",
   "scripts": {