✨ Support giscus

docs/guide/2024/index.md

@@ -2,6 +2,7 @@
 title: 赛事信息
 titleTemplate: ":title - NewStar CTF 2024"
 aside: false
+comments: false
 ---
 
 <script setup>

docs/guide/2024/promotion.md

@@ -1,5 +1,6 @@
 ---
 titleTemplate: ":title | 参考文档 - NewStar CTF 2024"
+comments: false
 ---
 
 <script setup>

docs/learn/credits.md

@@ -1,5 +1,6 @@
 ---
 titleTemplate: ":title | 快速入门 - NewStar CTF"
+comments: false
 ---
 
 <script setup>

docs/wp/2024/index.md

@@ -1,6 +1,7 @@
 ---
 title: WriteUp
 titleTemplate: ":title - NewStar CTF 2024"
+comments: false
 ---
 
 <script setup>

docs/wp/2024/week1/index.md

@@ -1,6 +1,7 @@
 ---
 title: WriteUp
 titleTemplate: ":title - NewStar CTF 2024"
+comments: false
 ---
 
 # WriteUp - NewStar CTF 2024

docs/wp/2024/week2/index.md

@@ -1,6 +1,7 @@
 ---
 title: WriteUp
 titleTemplate: ":title - NewStar CTF 2024"
+comments: false
 ---
 
 # WriteUp - NewStar CTF 2024

docs/wp/2024/week3/index.md

@@ -1,6 +1,7 @@
 ---
 title: WriteUp
 titleTemplate: ":title - NewStar CTF 2024"
+comments: false
 ---
 
 # WriteUp - NewStar CTF 2024

docs/wp/2024/week4/index.md

@@ -1,6 +1,7 @@
 ---
 title: WriteUp
 titleTemplate: ":title - NewStar CTF 2024"
+comments: false
 ---
 
 # WriteUp - NewStar CTF 2024

docs/wp/2024/week5/index.md

@@ -1,6 +1,7 @@
 ---
 title: WriteUp
 titleTemplate: ":title - NewStar CTF 2024"
+comments: false
 ---
 
 # WriteUp - NewStar CTF 2024

package.json

@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
+    "@giscus/vue": "^3.1.1",
     "@types/bun": "latest",
     "@types/node": "^22.1.0",
     "@vueuse/core": "^11.0.3",

theme/Layout.vue

@@ -7,9 +7,11 @@ import { nextTick, provide } from "vue";
 import LayoutIndex from "@/layouts/LayoutIndex.vue";
 import "element-plus/theme-chalk/dark/css-vars.css";
 
+import Comments from "./components/Comments.vue";
+
 const { isDark, frontmatter } = useData();
 
-const DefaultLayoutList = ["home", "page", "docs", false, undefined];
+// const DefaultLayoutList = ["home", "page", "docs", false, undefined];
 
 // Theme transition
 
@@ -44,11 +46,15 @@ provide("toggle-appearance", async ({ clientX: x, clientY: y }: MouseEvent) => {
 </script>
 
 <template>
-  <template v-if="DefaultLayoutList.includes(frontmatter.layout)">
-    <DefaultTheme.Layout />
+  <template v-if="frontmatter.layout === 'index'">
+    <LayoutIndex />
   </template>
   <template v-else>
-    <LayoutIndex v-if="frontmatter.layout === 'index'" />
+    <DefaultTheme.Layout>
+      <template #doc-after>
+        <Comments />
+      </template>
+    </DefaultTheme.Layout>
   </template>
 </template>
 

theme/components/Comments.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useData } from "vitepress";
+import Giscus from "@giscus/vue";
+
+// const { frontmatter, title } = useData();
+const { site, frontmatter, page } = useData();
+
+const PREFIX = "comments+";
+
+const p2k = (str: string) => {
+  const type = typeof frontmatter.value.comments;
+  if (type === "string" || type === "number") {
+    return PREFIX + frontmatter.value.comments.toString().replace(/\s/g, "-");
+  }
+  return PREFIX + str.replace(/\.\w+$/, "");
+};
+</script>
+
+<template>
+  <div
+    class="giscus comments-box"
+    :key="p2k(page.filePath)"
+    :data-key="p2k(page.filePath)"
+    v-if="frontmatter.comments !== false"
+  >
+    <Giscus
+      repo="lumishell/newstar-docs"
+      repoId="R_kgDOMqjJaA"
+      category="Comments"
+      categoryId="DIC_kwDOMqjJaM4CnZZo"
+      mapping="specific"
+      :term="p2k(page.filePath)"
+      strict="1"
+      reactionsEnabled="1"
+      emitMetadata="0"
+      inputPosition="top"
+      theme="preferred_color_scheme"
+      :lang="site.lang"
+      loading="lazy"
+      crossorigin="anonymous"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+.comments-box {
+  border-top: 1px solid var(--vp-c-divider);
+  margin-top: 24px;
+  padding-top: 2rem;
+}
+</style>