feat: Added twikoo comment component

Theo-Messi · Aug 31, 2024 · d3825c7 · d3825c7
1 parent 7006934
commit d3825c7
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 19 deletions.
diff --git a/packages/Lumen/components/DocTwikoo.vue b/packages/Lumen/components/DocTwikoo.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { useRoute } from 'vitepress'
 
+// 接受 Twikoo_Data 作为 prop
 const props = defineProps<{
   Twikoo_Data: {
     envId: string
@@ -9,15 +11,26 @@ const props = defineProps<{
 
 // 初始化 Twikoo
 async function initTwikoo() {
-  const twikoo = await import('twikoo')
-  twikoo.init({
-    envId: props.Twikoo_Data.envId,
-    el: '#twikoo'
-  })
+  try {
+    const twikoo = await import('twikoo')
+    if (twikoo && twikoo.init) {
+      twikoo.init({
+        envId: props.Twikoo_Data.envId,
+        el: '#twikoo'
+      })
+    } else {
+      console.error('Twikoo module or init function not found')
+    }
+  } catch (error) {
+    console.error('Failed to load Twikoo:', error)
+  }
 }
 
 onMounted(() => {
-  initTwikoo()
+  // 确保只在浏览器环境中执行
+  if (typeof window !== 'undefined') {
+    initTwikoo()
+  }
 })
 </script>
 

diff --git a/packages/Solis/components/Twikoo.vue b/packages/Solis/components/Twikoo.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { onMounted, watch, ref } from 'vue'
 import { useRoute } from 'vitepress'
-import { PropType } from 'vue'
 
 // 接受 Twikoo_Data 作为 prop
 const props = defineProps<{
@@ -15,15 +14,23 @@ const isPostPage = ref(route.path.startsWith('/posts/'))
 
 // 初始化 Twikoo
 async function initTwikoo() {
-  const twikoo = await import('twikoo')
-  twikoo.init({
-    envId: props.Twikoo_Data.envId,
-    el: '#twikoo'
-  })
+  try {
+    const twikoo = await import('twikoo')
+    if (twikoo && twikoo.init) {
+      twikoo.init({
+        envId: props.Twikoo_Data.envId,
+        el: '#twikoo'
+      })
+    } else {
+      console.error('Twikoo module or init function not found')
+    }
+  } catch (error) {
+    console.error('Failed to load Twikoo:', error)
+  }
 }
 
 onMounted(() => {
-  if (isPostPage.value) {
+  if (typeof window !== 'undefined' && isPostPage.value) {
     initTwikoo()
   }
 })
@@ -32,12 +39,14 @@ onMounted(() => {
 watch(
   () => route.path,
   (newPath) => {
-    isPostPage.value = newPath.startsWith('/posts/')
-    if (isPostPage.value) {
-      initTwikoo()
-    } else {
-      const twikooEl = document.getElementById('twikoo')
-      if (twikooEl) twikooEl.innerHTML = ''
+    if (typeof window !== 'undefined') {
+      isPostPage.value = newPath.startsWith('/posts/')
+      if (isPostPage.value) {
+        initTwikoo()
+      } else {
+        const twikooEl = document.getElementById('twikoo')
+        if (twikooEl) twikooEl.innerHTML = ''
+      }
     }
   }
 )