fix(twikoo): clicking the like reply button will return to the top (t…

…wikoojs/twikoo#628)
Theo-Messi · Aug 31, 2024 · 7a97d7d · 7a97d7d
1 parent 3aec9a1
commit 7a97d7d
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 2 deletions.
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -31,5 +31,6 @@ export default {
     app.component('BoxCube', DocBoxCube)
     app.component('Home', HomeUnderline)
     app.component('VideoLink', DocVideoLink)
+    app.component('Twikoo', Twikoo)
   }
 }
diff --git a/docs/guide/twikoo.md b/docs/guide/twikoo.md
@@ -47,3 +47,34 @@ export default {
   ...
 }
 ```
+
+## 在首页使用
+
+```ts
+//.vitepress/theme/index.ts
+import DefaultTheme from 'vitepress/theme'
+import { h } from 'vue'// [!code ++]
+
+import { Twikoo } from '@theojs/lumen'// [!code ++]
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp: ({ app }) => {// [!code ++]
+    app.component('Twikoo', Twikoo)// [!code ++]
+  }// [!code ++]
+  ...
+}
+```
+
+```md
+<!-- index.md -->
+
+---
+
+layout: home
+
+---
+
+<Twikoo :Twikoo_Data="{ envId: 'https://xxxxxx'  }" /> 
+<!-- 修改成部署的Twikoo地址 -->
+```
diff --git a/docs/index.md b/docs/index.md
@@ -48,3 +48,5 @@ features:
     --vp-home-hero-image-background-image: none !important;
   }
 </style>
+
+<!-- <Twikoo :Twikoo_Data="{ envId: 'https://share-twikoo.netlify.app/.netlify/functions/twikoo' }" /> -->
diff --git a/packages/Lumen/components/DocTwikoo.vue b/packages/Lumen/components/DocTwikoo.vue
@@ -58,5 +58,14 @@ watch(
 </script>
 
 <template>
-  <div :key="key" id="twikoo"></div>
+  <div class="comment-container vp-raw">
+    <div id="twikoo"></div>
+    <component
+      :is="'script'"
+      src="https://cdn.jsdelivr.net/npm/twikoo@1.6.39/dist/twikoo.min.js"
+      crossorigin="anonymous"
+      ref="twikooJs"
+    ></component>
+  </div>
+  <!-- <div :key="key" id="twikoo"></div> -->
 </template>
diff --git a/packages/Solis/components/Twikoo.vue b/packages/Solis/components/Twikoo.vue
@@ -71,5 +71,16 @@ watch(
 
 <template>
   <!-- 仅在路径为 /posts/ 开头时渲染评论组件 -->
-  <div v-if="isPostPage" :key="key" id="twikoo"></div>
+  <div v-if="isPostPage" class="comment-container vp-raw">
+    <div id="twikoo"></div>
+    <component
+      :is="'script'"
+      src="https://cdn.jsdelivr.net/npm/twikoo@1.6.39/dist/twikoo.min.js"
+      crossorigin="anonymous"
+      ref="twikooJs"
+    ></component>
+  </div>
+  <!-- <template>
+    <div v-if="isPostPage" :key="key" id="twikoo"></div>
+  </template> -->
 </template>