Update: 添加 Artalk 评论区

Author: T-miracle

.vitepress/themeConfig.ts

@@ -12,6 +12,14 @@ export default {
     ],
     // 左上角标题图标
     logo: '/logo-op0.png',
+    // 评论配置
+    comments: {
+        type: 'artalk',
+        options: {
+            server: 'http://artalk.namichong.com',
+            site: 'Hi! Tmiracle'
+        }
+    },
     search: {
         provider: 'local',
         options: {

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@vueuse/core": "^12.2.0",
+    "artalk": "^2.9.1",
     "element-plus": "^2.9.1",
     "floating-vue": "^5.2.2",
     "lodash-es": "^4.17.21",

package/components/NanoComment/index.vue

@@ -0,0 +1,53 @@
+<template>
+    <div v-if="type === 'artalk' && visible" class="relative w-full h-a my-12">
+        <div class="h-1px w-full bg-gray-300"/>
+        <strong class="block text-[calc(var(--base-size)*1.2)]! my-4!">大佬~留个评论吧~</strong>
+        <div id="comment"/>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+    import { useData, useRoute } from 'vitepress';
+    import 'artalk/Artalk.css';
+    import Artalk from 'artalk';
+
+    const route = useRoute();
+    const { site: _site, frontmatter } = useData();
+    const { type, options: { server, site } } = _site.value.themeConfig.comments;
+    const artalk = ref<Artalk | null>(null);
+    const visible = ref(false);
+
+    function init() {
+        artalk.value?.destroy();
+        if (frontmatter.value.comment === false) {
+            visible.value = false;
+        } else {
+            visible.value = true;
+            nextTick(() => {
+                artalk.value = Artalk.init({
+                    el: '#comment',
+                    pageKey: route.path,
+                    server,
+                    site
+                });
+            });
+        }
+    }
+
+    watch(() => route.path, () => {
+        init();
+    });
+
+    onMounted(() => {
+        init();
+    });
+
+    onUnmounted(() => {
+        artalk.value?.destroy();
+    });
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/components/NanoMain/index.vue

@@ -15,25 +15,26 @@
                 defer
                 @os-initialized="scrollbarInitialized"
             >
-                <article
-                    ref="article"
-                    class="vp-doc VPDoc text-[var(--base-size)]"
-                    :class="[ 'w-full' ]"
-                    style="white-space: wrap;"
-                    :style="{ padding: articlePadding }"
-                >
-                    <Content/>
-                </article>
-                <slot name="contentAfter">
-                    <!--<NanoGiscus/>-->
-                </slot>
+                <div :style="{ padding: articlePadding }">
+                    <article
+                        ref="article"
+                        class="vp-doc VPDoc text-[var(--base-size)]"
+                        :class="[ 'w-full' ]"
+                        style="white-space: wrap;"
+                    >
+                        <Content/>
+                    </article>
+                    <slot name="contentAfter">
+                        <NanoComment/>
+                    </slot>
+                </div>
             </OverlayScrollbarsComponent>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-    // import NanoGiscus from '@NanoUI/NanoGiscus/index.vue';
+    import NanoComment from '@NanoUI/NanoComment/index.vue';
     import 'overlayscrollbars/styles/overlayscrollbars.css';
     import scrollbarOptions from '../../config/scrollbarOptions';
     import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';

package/components/NanoSidebarDirItemTree/index.vue

@@ -2,10 +2,11 @@
     <div class="relative w-auto whitespace-nowrap">
         <div class="relative cursor-pointer select-none rounded-2">
             <div
-                class="flex items-center flex-nowrap gap-[calc(var(--base-size)*.25)] py-[calc(var(--base-size)*.125)] w-auto"
+                class="py-[calc(var(--base-size)*.15)] w-auto"
                 :class="setClass"
                 :style="{ paddingLeft: `calc(var(--base-size)*${ level })` }"
                 un-hover="bg-[var(--sidebar-hover-bg)]"
+                un-flex="~ items-center nowrap gap-[calc(var(--base-size)*.25)]"
                 @click.stop="collapse"
             >
                 <div class="w-[calc(var(--base-size)*1)] h-[calc(var(--base-size)*1)] shrink-0">
@@ -18,7 +19,7 @@
                 <div class="menu-icon flex-center" v-html="item.icon"/>
                 <div
                     class="text-[calc(var(--base-size)*.975)]!"
-                    :class="[ item.link ? '' : 'text-blue-500' ]"
+                    :class="[ item.link ? 'text-gray-6' : 'text-blue-500' ]"
                     v-text="item.text"
                 />
             </div>

package/theme/light/var.scss

@@ -8,7 +8,7 @@
 
 .nano-theme {
     --scale: 0;
-    --base-size: calc((var(--scale) * 1px) + 14px);
+    --base-size: calc((var(--scale) * 1px) + 16px);
 
     * {
         font-size: var(--base-size);

package/type.ts

@@ -1,5 +1,4 @@
 import { DefaultTheme } from 'vitepress/types/default-theme';
-import type { GiscusProps } from '@giscus/vue/dist/types';
 
 export type SidebarType = DefaultTheme.SidebarItem & { id?: string, icon?: string, items?: SidebarType[] };
 
@@ -8,5 +7,8 @@ export type ThemeConfig = DefaultTheme.Config & {
     motto: string;
     backgrounds?: string[];
     aboutMePath: string;
-    giscus?: GiscusProps;
+    comments?: {
+        type: 'custom' | 'artalk';
+        options: object;
+    }
 }

src/index.md

@@ -1,4 +1,5 @@
 ---
 layout: home
 title: 首页
+comment: false
 ---

src/nav/index.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: 资源导航
+comment: false
 ---
 
 <Nav/>

src/translation-docs/index.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: 文档翻译
+comment: false
 ---
 
 <Doc/>