✨ feat: 支持 Twikoo #16

.gitignore

@@ -22,6 +22,9 @@ test.html
 themeConfig.mjs
 !.vitepress/theme/assets/themeConfig.mjs
 
+posts/*
+!posts/2024/1010.md
+
 # Editor directories and files
 .vscode/*
 .vscode

.vitepress/theme/assets/themeConfig.mjs

@@ -300,12 +300,24 @@ export const themeConfig = {
   comment: {
     enable: false,
     // 评论系统选择
+    // artalk / twikoo
     type: "artalk",
-    // 评论系统配置
+    // artalk
+    // https://artalk.js.org/
     artalk: {
       site: "",
       server: "",
     },
+    // twikoo
+    // https://twikoo.js.org/
+    twikoo: {
+      // 必填，若不想使用 CDN，可以使用 pnpm add twikoo 安装并引入
+      js: "https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/twikoo/1.6.39/twikoo.all.min.js",
+      envId: "",
+      // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
+      region: "ap-shanghai",
+      lang: "zh-CN",
+    },
   },
   // 侧边栏
   aside: {

.vitepress/theme/components/Plugins/Comments/Twikoo.vue

@@ -0,0 +1,60 @@
+<template>
+  <div ref="commentRef" id="comment-dom" :class="['comment-content', 'twikoo', { fill }]" />
+</template>
+
+<script setup>
+import { jumpRedirect } from "@/utils/commonTools";
+import initComments from "@/utils/initComments";
+
+const props = defineProps({
+  // 填充评论区
+  fill: {
+    type: [Boolean, String],
+    default: false,
+  },
+});
+
+const { theme } = useData();
+const { comment } = theme.value;
+
+// 评论数据
+const twikoo = ref(null);
+const commentRef = ref(null);
+
+// 初始化 Twikoo
+const initTwikoo = async () => {
+  try {
+    await nextTick();
+    const Twikoo = await initComments(theme.value);
+    twikoo.value = Twikoo.init({
+      el: commentRef.value || "#comment-dom",
+      envId: comment.twikoo.envId,
+      onCommentLoaded: () => {
+        console.log("评论已加载完毕");
+        if (props.fill) fillComments(props.fill);
+        jumpRedirect(null, theme.value, true);
+      },
+    });
+    return twikoo.value;
+  } catch (error) {
+    console.error("初始化评论出错：", error);
+  }
+};
+
+// 填充评论区
+const fillComments = (data) => {
+  console.log("填充评论：", data);
+  // 获取评论元素
+  const commentDom = document.querySelector(".tk-input.el-textarea");
+  if (!commentDom) return false;
+  // 获取输入框
+  const commentInput = commentDom.querySelector("textarea");
+  // 写入内容
+  commentInput.value = data + "\n\n";
+  commentInput.focus();
+};
+
+onMounted(() => {
+  initTwikoo();
+});
+</script>

.vitepress/theme/components/Plugins/Comments/index.vue

@@ -1,6 +1,12 @@
 <!-- 评论 -->
 <template>
-  <div v-if="theme.comment.enable" ref="mainCommentRef" id="main-comment" class="comment">
+  <div
+    v-if="theme.comment.enable"
+    :key="router.route.path"
+    ref="mainCommentRef"
+    id="main-comment"
+    class="comment"
+  >
     <div v-if="!fill" class="title">
       <span class="name">
         <i class="iconfont icon-chat"></i>
@@ -10,6 +16,7 @@
     </div>
     <!-- 区分评论系统 -->
     <Artalk v-if="theme.comment.type === 'artalk'" :fill="fill" />
+    <Twikoo v-else-if="theme.comment.type === 'twikoo'" :fill="fill" />
   </div>
 </template>
 
@@ -23,7 +30,6 @@ const props = defineProps({
     default: false,
   },
 });
-
 const mainCommentRef = ref(null);
 
 // 滚动至评论

.vitepress/theme/components/RightMenu.vue

@@ -130,7 +130,7 @@
               <span class="name">复制选中文本</span>
             </div>
             <div
-              v-if="clickedType === 'text' && !commentCopyShow"
+              v-if="clickedType === 'text' && !commentCopyShow && theme.comment.type === 'artalk'"
               class="btn"
               @click="commentCopy(clickedTypeData)"
             >

.vitepress/theme/utils/initComments.mjs

@@ -23,12 +23,25 @@ const initComments = async (themeConfig) => {
             },
           });
         });
+      case "twikoo":
+        // 引入资源
+        return await new Promise((resolve, reject) => {
+          loadScript(option[commentType].js, {
+            callback: () => {
+              if (typeof twikoo === "object") {
+                resolve(twikoo);
+              } else {
+                reject(new Error("Twikoo 初始化失败"));
+              }
+            },
+          });
+        });
       default:
         return false;
     }
   } catch (error) {
     console.error(`${commentType} 初始化失败`, error);
-    return false;
+    throw error;
   }
 };
 

.vitepress/theme/views/Post.vue

@@ -41,12 +41,12 @@
         <!-- 热度 -->
         <span class="hot meta">
           <i class="iconfont icon-fire" />
-          <span class="artalk-pv-count">0</span>
+          <span id="twikoo_visitors" class="artalk-pv-count">0</span>
         </span>
         <!-- 评论数 -->
         <span class="chat meta hover" @click="commentRef?.scrollToComments">
           <i class="iconfont icon-chat" />
-          <span class="artalk-comment-count">0</span>
+          <span id="twikoo_comments" class="artalk-comment-count">0</span>
         </span>
       </div>
     </div>