integrate comment with component, try css transmit

src/.vuepress/client.ts

@@ -1,12 +1,11 @@
-// import { defineClientConfig, useRoute } from 'vuepress/client'
-// import { onMounted } from 'vue'
+import { defineClientConfig } from 'vuepress/client'
+import DiscourseComments from './component/DiscourseComments.vue'
 
-// export default defineClientConfig({
-//     setup() {
-//         // useRoute().path
-        // window.location.href
-//     }
-// })
+export default defineClientConfig({
+    enhance({ app }) {
+      app.component('DiscourseComments', DiscourseComments)
+    },
+})
 
 declare global {
     interface Window {

src/.vuepress/component/DiscourseComments.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="discourse-comments"></div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useRoute } from 'vuepress/client'
+
+onMounted(() => {
+  window.DiscourseEmbed = {
+    discourseUrl: 'https://bbs.scutosc.cn/', 
+    discourseEmbedUrl: window.location.origin + useRoute().path.split('#')[0],
+    className: 'vp-bg',
+  };
+  
+  (function() {
+    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
+    d.src = window.DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
+    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
+  })();
+})
+</script>

src/guide/student/github.md

@@ -3,4 +3,6 @@ title: GitHub (Copilot)
 icon: "mdi:github"
 ---
 
-TODO: 介绍 GitHub 学生优惠。
+TODO: 介绍 GitHub 学生优惠。
+
+<DiscourseComments />

src/guide/student/matlab.md

@@ -5,4 +5,6 @@ icon: vscode-icons:file-type-matlab
 
 ::: tip
 点此进入 [MatLab正版化文档](https://web.scut.edu.cn/2023/0316/c31531a494035/page.htm)
-:::
+:::
+
+<DiscourseComments />

src/guide/student/ms-office.md

@@ -39,3 +39,5 @@ SCUT学生可以 **下载学校提供的微软正版软件**，并 **通过学
 #### MacOS
 
 [Microsoft_Office_16.59.22031300_Installer.pkg](https://mswebdl.scut.edu.cn/download/office/Microsoft_Office_16.59.22031300_Installer.pkg)
+
+<DiscourseComments />

src/guide/tools/README.md

@@ -3,4 +3,6 @@ title: Tools
 icon: mdi:toolbox
 ---
 
-<Catalog />
+<Catalog />
+
+<DiscourseComments />

src/guide/tools/code-share.md

@@ -23,3 +23,5 @@ author: { name: Samuka007, url: https://github.com/Samuka007 }
 [Code Explorer](https://compiler-explorer.com) from [godbolt](https://godbolt.org)，是一个在线编译器，可以将 C/C++ 代码转换为汇编代码，查看结果，支持多种编译器、优化等设置，还能生成链接分享。
 
 ![compiler-explorer.com](https://github.com/compiler-explorer/compiler-explorer/raw/main/docs/images/brief_overview.png)
+
+<DiscourseComments />

src/guide/tools/vscode/README.md

@@ -3,4 +3,6 @@ title: Visual Studio Code
 icon: "fa-solid fa-code"
 ---
 
-<Catalog />
+<Catalog />
+
+<DiscourseComments />

src/guide/tools/vscode/install_vscode_on_windows.md

@@ -36,4 +36,6 @@ summary: Install Visual Studio Code on Windows
 同时，也会提示你是否将VS Code添加到右键菜单中。这里推荐你选择添加，这样你可以在文件夹中直接右键打开VS Code。
 <!-- link to using_vscode -->
 
-[WinGet]: https://learn.microsoft.com/en-us/windows/package-manager/winget/
+[WinGet]: https://learn.microsoft.com/en-us/windows/package-manager/winget/
+
+<DiscourseComments />

src/guide/tools/vscode/using_vscode.md

@@ -22,4 +22,6 @@ draft: false
 ## 工作区 Workspace
 
 > - [Workspaces in Visual Studio Code](https://code.visualstudio.com/docs/editor/workspaces)
-> - 中文：[Visual Studio Code 中的工作区](https://vscode.github.net.cn/docs/editor/workspaces)
+> - 中文：[Visual Studio Code 中的工作区](https://vscode.github.net.cn/docs/editor/workspaces)
+
+<DiscourseComments />

src/guide/tools/vscode/vscode_cpp_common.md

@@ -187,3 +187,5 @@ $ xmake project -k compile_commands .vscode
 ```
 
 如果配置后，还是没生效，可以尝试重启 vscode 和 clangd 进程，再验证下。
+
+<DiscourseComments />

src/guide/windows_cpp.md

@@ -107,23 +107,4 @@ $ code test
 ## 配置Clangd
 TODO
 
-<div id='discourse-comments'></div>
-
-<script setup>
-import { onMounted } from 'vue'
-import { useRoute } from 'vuepress/client'
-
-onMounted(() => {
-  window.DiscourseEmbed = {
-    discourseUrl: 'https://bbs.scutosc.cn/', 
-    discourseEmbedUrl: window.location.origin + useRoute().path.split('#')[0],
-    // className: 'CLASS_NAME',
-  };
-
-  (function() {
-    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
-    d.src = window.DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
-    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
-  })();
-})
-</script>
+<DiscourseComments />