docs: add how to use utterances

demo/yun/App.vue

@@ -2,6 +2,24 @@
 
 <script lang="ts" setup>
 // do script
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  const utterScript = document.createElement('script')
+
+  utterScript.src = 'https://utteranc.es/client.js'
+  utterScript.async = true
+  utterScript.crossOrigin = 'anonymous'
+
+  utterScript.setAttribute('repo', 'YunYouJun/valaxy')
+  utterScript.setAttribute('issue-term', 'pathname')
+  utterScript.setAttribute('label', 'utterances')
+  utterScript.setAttribute('theme', 'github-light')
+
+  const commentContainer = document.querySelector('.comment')
+  if (commentContainer)
+    commentContainer.appendChild(utterScript)
+})
 </script>
 
 <template>

docs/pages/guide/third-party/comment-system.md

@@ -0,0 +1,86 @@
+---
+title: Third Comment System
+title_zh-CN: 第三方评论系统
+categories:
+  - third
+---
+
+存在许多第三方评论系统，下面简要介绍下各评论系统集成方式。
+
+> [第三方评论系统之我见](https://www.yunyoujun.cn/posts/third-party-comment-system)
+
+## Waline
+
+> [Waline](https://waline.js.org/) 是一个依赖服务端实现的评论系统，它可以托管在 Vercel 等平台上。
+
+使用 [valaxy-addon-waline](https://github.com/YunYouJun/valaxy/blob/main/packages/valaxy-addon-waline/README.md) 集成。
+
+> valaxy-addon-waline 是基于 Waline 的一个 Valaxy 插件。
+
+### 安装
+
+```bash
+npm i valaxy-addon-waline
+# pnpm add valaxy-addon-waline
+```
+
+```ts
+// valaxy.config.ts
+import { defineValaxyConfig } from 'valaxy'
+import { addonWaline } from 'valaxy-addon-waline'
+
+export default defineValaxyConfig({
+  // or write it in site.config.ts
+  siteConfig: {
+    // 启用评论
+    comment: {
+      enable: true
+    },
+  },
+  // 设置 valaxy-addon-waline 配置项
+  addons: [
+    addonWaline({
+      // Waline 配置项，参考 https://waline.js.org/reference/client/props.html
+      serverURL: 'https://your-waline-url',
+    }),
+  ],
+})
+```
+
+### Utterances
+
+> [Utterances](https://utteranc.es/) 是一个基于 GitHub Issues 实现的评论系统。
+
+它可以直接通过挂载 JS 脚本集成。
+
+在博客根目录下新建 `App.vue`，添加挂载脚本:
+
+```vue
+<script lang="ts" setup>
+// do script
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  const utterScript = document.createElement('script')
+
+  utterScript.src = 'https://utteranc.es/client.js'
+  utterScript.async = true
+  utterScript.crossOrigin = 'anonymous'
+
+  utterScript.setAttribute('repo', 'YunYouJun/valaxy')
+  utterScript.setAttribute('issue-term', 'pathname')
+  utterScript.setAttribute('label', 'utterances')
+  utterScript.setAttribute('theme', 'github-light')
+
+  // 挂载至 .comment，你也可以通过修改 selector 挂载至其他地方
+  const commentContainer = document.querySelector('.comment')
+  if (commentContainer)
+    commentContainer.appendChild(utterScript)
+})
+</script>
+
+<template>
+  <!-- try it -->
+  <div />
+</template>
+```

packages/valaxy-theme-yun/components/YunComment.vue

@@ -5,10 +5,11 @@ const runtimeConfig = useRuntimeConfig()
 </script>
 
 <template>
-  <YunCard w="full" p="4" class="comment sm:p-6 lg:px-12 xl:px-16">
+  <YunCard w="full" p="4" class="yun-comment sm:p-6 lg:px-12 xl:px-16">
     <ClientOnly>
       <YunWaline v-if="runtimeConfig.addons['valaxy-addon-waline']" />
       <YunTwikoo v-if="runtimeConfig.addons['valaxy-addon-twikoo']" />
+      <slot />
     </ClientOnly>
   </YunCard>
 </template>

packages/valaxy/client/composables/features/copy-code.ts

@@ -3,7 +3,7 @@ import { isClient } from '@vueuse/core'
 
 export function useCopyCode() {
   if (isClient) {
-    const timeoutIdMap: WeakMap<HTMLElement, NodeJS.Timeout> = new WeakMap()
+    const timeoutIdMap: WeakMap<HTMLElement, ReturnType<typeof setTimeout>> = new WeakMap()
     window.addEventListener('click', (e) => {
       const el = e.target as HTMLElement
       if (el.matches('div[class*="language-"] > button.copy')) {