feat: 添加评论模块

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 />

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>