docs: fix comment count page, close #2534

docs/package.json

@@ -11,6 +11,7 @@
     "@fancyapps/ui": "5.0.36",
     "@vuepress/bundler-vite": "2.0.0-rc.12",
     "@vuepress/helper": "2.0.0-rc.31",
+    "@vuepress/plugin-comment": "2.0.0-rc.31",
     "@vuepress/plugin-docsearch": "2.0.0-rc.31",
     "@vuepress/plugin-redirect": "2.0.0-rc.31",
     "@waline/client": "workspace:*",

docs/src/.vuepress/client.ts

@@ -1,7 +1,22 @@
 import { Fancybox } from '@fancyapps/ui/dist/fancybox/fancybox.esm.js';
+import {
+  type WalineOptions,
+  defineWalineConfig,
+} from '@vuepress/plugin-comment/client';
 import { onBeforeUnmount, onMounted } from 'vue';
 import { defineClientConfig } from 'vuepress/client';
 
+export const walineOptions: WalineOptions = {
+  login: 'force',
+  serverURL: 'https://walinejs.comment.lithub.cc',
+  recaptchaV3Key: '6Lfz4-shAAAAANgsYRR0datkzv6zLIaKrSqfHsiG',
+  comment: true,
+  pageview: true,
+  reaction: true,
+};
+
+defineWalineConfig(walineOptions);
+
 export default defineClientConfig({
   setup() {
     onMounted(() => Fancybox.bind('#vp-comment .wl-content img'));

docs/src/.vuepress/theme.ts

@@ -38,12 +38,6 @@ export default hopeTheme(
     plugins: {
       comment: {
         provider: 'Waline',
-        login: 'force',
-        serverURL: 'https://walinejs.comment.lithub.cc',
-        recaptchaV3Key: '6Lfz4-shAAAAANgsYRR0datkzv6zLIaKrSqfHsiG',
-        comment: true,
-        pageview: true,
-        reaction: true,
         locales: {
           '/': {
             admin: '可爱的管理员',

docs/src/en/guide/features/comment.md

@@ -40,13 +40,12 @@ Every time you call `WalineInstance.update()`, Waline will search the page conte
 ::: tip Examples
 
 ```html
-The current page has
-<span class="waline-comment-count" data-path="/en/cookbook/comment" />
-comments.
+The current page has <span class="waline-comment-count" /> comments, the home
+page has <span data-path="/en/" class="waline-comment-count" /> comments.
 ```
 
-The current page has
-<span data-path="/en/cookbook/comment" class="waline-comment-count" /> comments.
+The current page has <span class="waline-comment-count" /> comments, the home
+page has <span data-path="/en/" class="waline-comment-count" /> comments.
 
 :::
 
@@ -103,3 +102,20 @@ Sometimes, you may want to display the comment count of some pages in the articl
   });
 </script>
 ```
+
+<script setup>
+import { walineOptions } from '@source/.vuepress/client.ts'
+import { commentCount } from '@waline/client/comment'
+import { onMounted } from 'vue'
+import { useRoute } from 'vuepress/client'
+
+const { serverURL } = walineOptions
+const route = useRoute()
+
+onMounted(()=>{
+  commentCount({
+    serverURL: serverURL,
+    path: route.path,
+  })
+})
+</script>

docs/src/guide/features/comment.md

@@ -42,15 +42,12 @@ Waline 会在初始化以及每次 path 更新时，自动查找页面中 `class
 ::: tip 例子
 
 ```html
-当前页共有
-<span class="waline-comment-count" data-path="/cookbook/comment.html" />条评论。
+当前页共有 <span class="waline-comment-count" /> 条评论，主页共有
+<span class="waline-comment-count" data-path="/" /> 条评论。
 ```
 
-当前页共有
-<span
-  class="waline-comment-count"
-  data-path="/cookbook/comment.html"
-/>条评论。
+当前页共有 <span class="waline-comment-count" /> 条评论，主页共有
+<span class="waline-comment-count" data-path="/" /> 条评论。
 
 :::
 
@@ -107,3 +104,20 @@ setTimeout(() => abort(), 500);
   });
 </script>
 ```
+
+<script setup>
+import { walineOptions } from '@source/.vuepress/client.ts'
+import { commentCount } from '@waline/client/comment'
+import { onMounted } from 'vue'
+import { useRoute } from 'vuepress/client'
+
+const { serverURL } = walineOptions
+const route = useRoute()
+
+onMounted(()=>{
+  commentCount({
+    serverURL: serverURL,
+    path: route.path,
+  })
+})
+</script>

packages/client/package.json

@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.10.0",
-    "@waline/api": "workspace:1.0.0-alpha.7",
+    "@waline/api": "1.0.0-alpha.8",
     "autosize": "^6.0.1",
     "marked": "^12.0.2",
     "marked-highlight": "^2.1.1",