add giscus

.vitepress/config.mts

@@ -36,6 +36,7 @@ export default defineConfig({
     outline: {
       label: 'TOC'
     },
+    returnToTopLabel: 'returnToTopLabel',
     docFooter: {
       prev: '上一篇',
       next: '下一篇'

.vitepress/theme/custom.css

@@ -0,0 +1,7 @@
+* {
+    scrollbar-width: thin;
+}
+*::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }

.vitepress/theme/giscusLayout.vue

@@ -1,11 +1,27 @@
 <!-- .vitepress/theme/Layout.vue -->
 
 <script setup lang="ts">
-import { useData } from 'vitepress'
+import { useData, useRoute, useRouter } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
-import { nextTick, provide } from 'vue'
+import { nextTick, onMounted, ref, watch, provide } from 'vue';
+const { Layout } = DefaultTheme
+const { frontmatter, isDark } = useData()
 
-const { isDark } = useData()
+const route = useRoute()
+const router = useRouter()
+
+const NoCommentPages = ['/', '/pyqt/', '/blog/']
+const mountComment = ref(false)
+
+// const 
+onMounted(() => {
+  import('giscus');
+  handleCommentComponent()
+});
+
+const handleCommentComponent = () => {
+  mountComment.value = !NoCommentPages.includes(route.path) || frontmatter.value?.comment
+}
 
 const enableTransitions = () =>
   'startViewTransition' in document &&
@@ -39,10 +55,65 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
     }
   )
 })
+
+
+router.onAfterRouteChanged = () => {
+
+}
+// onAfterRouteChanged((to) => {
+//   console.log(1111, to)
+// })
+
+
+// onBeforeRouteChange((to) => {
+//   console.log(2222, to)
+//   return true
+// })
+
+watch(() => route.path, () => {
+  nextTick().then(() => {
+    handleCommentComponent()
+  })
+})
+
+watch([isDark], () => {
+  // console.log(1111, isDark, document.querySelector('#giscus'), document.querySelector('#giscus').getAttribute('theme'))
+  document.querySelector('#giscus').setAttribute('theme', isDark.value ? 'dark' : 'light')
+  nextTick().then(() => {
+  })
+})
+
+// todo 1, 上面俩监听是不是可以去掉一个
+// todo 2, 为啥官方的vue包装不用 v-pre
+// todo 3, 为啥官方的vue包装可以直接使用v-if
+// todo 4, 换肤，不使用重新渲染的方式试试看
 </script>
 
 <template>
-  <DefaultTheme.Layout />
+  <Layout>
+    <template #doc-bottom>
+      <div v-if="mountComment">
+        <giscus-widget
+          v-pre
+          id="giscus"
+          repo="maicss/website"
+          repoid="R_kgDOKnduBQ"
+          category="Announcements"
+          categoryid="DIC_kwDOKnduBc4Cas0c"
+          mapping="pathname"
+          term="Welcome to Maicss' site"
+          strict="0"
+          :reactionsenabled="true"
+          emitmetadata="0"
+          inputposition="top"
+          theme="light"
+          lang="zh-CN"
+        >
+        <p>Loading comments...</p>
+      </giscus-widget>
+      </div>
+    </template>
+  </Layout>
 </template>
 
 <style>

.vitepress/theme/index.mts

@@ -1,12 +1,12 @@
 import DefaultTheme from 'vitepress/theme'
 import type { Theme } from 'vitepress'
-// import './custom.css'
+import './custom.css'
 import GiscusLayout from './giscusLayout.vue'
 
 export default {
     extends: DefaultTheme,
     Layout: GiscusLayout,
     enhanceApp({app}) {
-        // app.component()
+        // app.component('giscus-widget', )
     }
 } satisfies Theme

package.json

@@ -16,5 +16,8 @@
         "search-insights"
       ]
     }
+  },
+  "dependencies": {
+    "giscus": "^1.3.0"
   }
 }

pages/pyqt/index.md

@@ -13,22 +13,6 @@
         <span>PyQt6 教程</span>
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" preserveAspectRatio="xMidYMid meet" data-rnwibasecard--161t3wu-hover="true" data-rnwi-handle="nearest" class="r-1rasi3h" style="width: 24px; height: 24px;"><path fill="currentColor" fill-rule="evenodd" d="M9.076 3.576a.6.6 0 0 1 .848 0l4 4a.6.6 0 0 1 0 .848l-4 4a.6.6 0 0 1-.848-.848L12.052 8.6H2.5a.6.6 0 0 1 0-1.2h9.552L9.076 4.424a.6.6 0 0 1 0-.848Z" clip-rule="evenodd"></path></svg>
     </a>
-<script src="https://giscus.app/client.js"
-        data-repo="maicss/website"
-        data-repo-id="R_kgDOKnduBQ"
-        data-category="Announcements"
-        data-category-id="DIC_kwDOKnduBc4Cas0c"
-        data-mapping="pathname"
-        data-strict="0"
-        data-reactions-enabled="1"
-        data-emit-metadata="0"
-        data-input-position="bottom"
-        data-theme="preferred_color_scheme"
-        data-lang="zh-CN"
-        data-loading="lazy"
-        crossorigin="anonymous"
-        async>
-</script>
 </div>
 
 <script setup>

pages/pyqt/v6/index.md

@@ -5,6 +5,7 @@ prev:
 next:
   text: '日期和时间'
   link: '/pyqt/v6/datetime'
+comment: true
 ---
 # 简介