feat: 添加评论功能

Author: lhuans

.vitepress/config.mts

@@ -57,7 +57,7 @@ export default defineConfig({
       ],
     },
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/opentiny/tiny-agent' }
+      { icon: 'github', link: 'https://github.com/lhuans/docs' }
     ],
     search: {
       provider: 'local',

.vitepress/theme/Comment.vue

@@ -0,0 +1,61 @@
+//theme/Layout/comment
+<template>
+    <div class="content-container"></div>
+</template>
+
+<script setup lang="ts">
+import { watch, nextTick, onMounted, ref } from 'vue'
+import 'gitalk/dist/gitalk.css' //引入 gitalk 的 css 样式
+import Gitalk from 'gitalk'
+import { useRouter } from 'vitepress'
+import { inBrowser } from 'vitepress'
+
+let { route } = useRouter() // 页面路由对象
+const options = {
+    id: route.data.title, // 可选，推荐设置为页面标题，因为会作为标签传给Github issues，且issues标签有长度限制。
+    owner: 'lhuans', // GitHub repository 所有者
+    repo: 'https://github.com/lhuans/docs', // GitHub repository
+    clientID: 'Ov23li4JzHJFiyJQxL24', // 自己的clientID
+    clientSecret: '255695afc71cdd6ad613655866646311f5a763ec', // 自己的clientSecret
+    admin: ['lhuans'], // GitHub repository 所有者
+    labels: ['Gitalk'], // GitHub issue 的标签
+    createIssueManually: false //如果当前页面没有相应的 isssue 且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮。
+}
+const init = () => {
+    //如果在浏览器环境
+    if (inBrowser) {
+        watch(
+            () => route.path, // 监听路由变化，重新挂载评论组件
+            () => {
+                nextTick(() => {
+                    if (typeof window !== undefined) {
+                        const containerElement =
+                            document.querySelector('.content-container')
+                        if (containerElement) {
+                            const contentElement = document.getElementById(
+                                'gitalk-page-container'
+                            )
+                            if (contentElement) {
+                                //判断是否已有评论组件节点，有则删除，重新创建。
+                                contentElement.removeChild(containerElement)
+                            }
+                            const wrap = document.createElement('div')
+                            wrap.setAttribute('id', 'gitalk-page-container')
+                            const comment = document.querySelector(
+                                '.content-container'
+                            ) as HTMLElement
+                            comment.appendChild(wrap) // 把组件加入到想加载的地方
+                        }
+                        const gitTalk = new Gitalk(options)
+                        gitTalk.render('gitalk-page-container')
+                    }
+                })
+            },
+            { immediate: true }
+        )
+    }
+}
+onMounted(() => {
+    init()
+})
+</script>

.vitepress/theme/Layout.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import Comment from './Comment.vue'
+</script>
+
+<template>
+    <DefaultTheme.Layout>
+        <template #doc-after>
+            <Comment />
+        </template>
+    </DefaultTheme.Layout>
+</template>

.vitepress/theme/index.ts

@@ -0,0 +1,12 @@
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import Layout from './Layout.vue'
+
+
+export default {
+  Layout,
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    // 注册自定义全局组件
+  }
+} satisfies Theme

package.json

@@ -11,6 +11,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "gitalk": "^1.8.0",
     "vitepress": "^1.6.3",
     "vitepress-demo-plugin": "^1.4.1"
   }