From 309cb5d36952bb76291eed59a86e1f4412c14514 Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Fri, 10 Oct 2025 23:30:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=AF=84=E8=AE=BA?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/theme/layout/CustomLayout.vue |  2 +
 docs/.vitepress/theme/layout/PageComments.vue | 89 +++++++++++++++++++
 2 files changed, 91 insertions(+)
 create mode 100644 docs/.vitepress/theme/layout/PageComments.vue

diff --git a/docs/.vitepress/theme/layout/CustomLayout.vue b/docs/.vitepress/theme/layout/CustomLayout.vue
index 38d86f8..daabb41 100644
--- a/docs/.vitepress/theme/layout/CustomLayout.vue
+++ b/docs/.vitepress/theme/layout/CustomLayout.vue
@@ -1,6 +1,7 @@
 <script setup>
 import DefaultTheme from 'vitepress/theme';
 import ContentFooter from './ContentFooter.vue';
+import PageComments from './PageComments.vue';
 import SiteFooter from './SiteFooter.vue';
 
 const { Layout } = DefaultTheme;
@@ -11,6 +12,7 @@ const { Layout } = DefaultTheme;
     <template #doc-footer-before>
       <hr class="custom__divider" />
       <ContentFooter />
+      <PageComments />
     </template>
     <template #layout-bottom>
       <SiteFooter />
diff --git a/docs/.vitepress/theme/layout/PageComments.vue b/docs/.vitepress/theme/layout/PageComments.vue
new file mode 100644
index 0000000..b7a5322
--- /dev/null
+++ b/docs/.vitepress/theme/layout/PageComments.vue
@@ -0,0 +1,89 @@
+<script setup>
+import { useData, useRoute } from 'vitepress';
+import { shallowRef, onBeforeUnmount, onMounted, watch } from 'vue';
+
+import Artalk from 'artalk';
+import 'artalk/Artalk.css';
+
+/** 页面数据 */
+const pageData = useData();
+
+/** 路由 */
+const route = useRoute();
+
+/**
+ * @desc Artalk 实例
+ * @type {ReturnType<typeof shallowRef<ReturnType<typeof Artalk.init> | null>}
+ */
+const artalk = shallowRef(null);
+
+/**
+ * @desc 评论区容器
+ * @type {ReturnType<typeof shallowRef<HTMLElement | null>}
+ */
+const commentWrapper = shallowRef(null);
+
+/** 销毁 */
+function destroyComments() {
+
+  console.debug('[Artalk] destroyComments');
+
+  if (artalk.value) {
+    artalk.value.destroy();
+    artalk.value = null;
+  }
+
+}
+
+/** 初始化 */
+function initComments() {
+
+  console.debug('[Artalk] initComments');
+
+  let instance = Artalk.init({
+    el: commentWrapper.value,
+    pageKey: location.pathname,
+    pageTitle: pageData.title.value,
+    server: 'https://comment.frost-zx.top',
+    site: 'frost-zx-blog',
+  });
+
+  artalk.value = instance;
+
+}
+
+/** 更新 */
+function updateComments() {
+
+  console.debug('[Artalk] updateComments');
+
+  if (artalk.value) {
+    artalk.value.update({
+      pageKey: location.pathname,
+      pageTitle: pageData.title.value,
+    });
+    artalk.value.reload();
+  }
+
+}
+
+watch(() => route.path, updateComments);
+
+onMounted(() => {
+  initComments();
+});
+
+onBeforeUnmount(() => {
+  destroyComments();
+});
+</script>
+
+<template>
+  <div ref="commentWrapper" class="page-comments"></div>
+</template>
+
+<style lang="less">
+.page-comments {
+  margin-top: 12px;
+}
+</style>