vuepress-plugin-twikoo 1.0.4 → 1.0.6

package/Comment.vue

@@ -1,34 +1,30 @@
 <template>
-  <div id="tcomment"></div>
+  <div></div>
 </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,62 @@ export default {
         to: {},
         from: {},
         ...this.$frontmatter
-      }
+      };
 
       if (!this.needComment(frontmatter)) {
-        return
+        return;
       }
 
-      const twikoo = await import('twikoo')
-      twikoo.init({
-        ...TWIKOO_OPTIONS,
-        el: TWIKOO_OPTIONS.el || '#tcomment'
-      })
+      // 异步加载 Twikoo 并初始化
+      const twikoo = await import('twikoo');
+      // 初始化后返回 Promise，确保 DOM 生成完成
+      await twikoo.init({
+        ...TWIKOO_OPTIONS
+      });
+
+      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');
+      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 容器移动失败：未找到 Twikoo 评论容器元素');
+          return;
+        }
+
+        // 继续重试
+        setTimeout(retry, interval);
+      };
+
+      retry();
+    },
 
   }
-}
-</script>
+};
+</script>

package/package.json

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