feat: add article title display and Giscus comments

Author: fonghehe

docs/.vitepress/theme/ArchiveYear.vue

@@ -59,7 +59,9 @@ function formatDate(d: string) {
         <ul class="posts-in-month">
           <li v-for="post in group.posts" :key="post.url" class="post-item">
             <time class="post-date">{{ formatDate(post.date) }}</time>
-            <a :href="withBase(post.url)" class="post-title">{{ post.title }}</a>
+            <a :href="withBase(post.url)" class="post-title">{{
+              post.title
+            }}</a>
           </li>
         </ul>
       </div>

docs/.vitepress/theme/ArticleTitle.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useData } from "vitepress";
+
+const { frontmatter } = useData();
+</script>
+
+<template>
+  <h1 v-if="frontmatter.title" class="article-h1">
+    {{ frontmatter.title }}
+  </h1>
+</template>
+
+<style scoped>
+.article-h1 {
+  font-size: 1.9rem;
+  font-weight: 700;
+  line-height: 1.35;
+  margin-bottom: 1rem;
+  color: var(--vp-c-text-1);
+  letter-spacing: -0.01em;
+}
+</style>

docs/.vitepress/theme/Giscus.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { onMounted, watch, ref } from "vue";
+import { useData, useRoute } from "vitepress";
+
+const { isDark } = useData();
+const route = useRoute();
+const container = ref<HTMLElement>();
+
+const GISCUS_REPO = "fonghehe/blog";
+const GISCUS_REPO_ID = "MDEwOlJlcG9zaXRvcnkyMTUxOTg3MTQ=";
+const GISCUS_CATEGORY = "Announcements";
+const GISCUS_CATEGORY_ID = "DIC_kwDODNOr-s4C8kR_";
+
+function loadGiscus() {
+  if (!container.value) return;
+  container.value.innerHTML = "";
+
+  const script = document.createElement("script");
+  script.src = "https://giscus.app/client.js";
+  script.setAttribute("data-repo", GISCUS_REPO);
+  script.setAttribute("data-repo-id", GISCUS_REPO_ID);
+  script.setAttribute("data-category", GISCUS_CATEGORY);
+  script.setAttribute("data-category-id", GISCUS_CATEGORY_ID);
+  script.setAttribute("data-mapping", "pathname");
+  script.setAttribute("data-strict", "0");
+  script.setAttribute("data-reactions-enabled", "1");
+  script.setAttribute("data-emit-metadata", "0");
+  script.setAttribute("data-input-position", "top");
+  script.setAttribute("data-theme", isDark.value ? "dark" : "light");
+  script.setAttribute("data-lang", "zh-CN");
+  script.setAttribute("data-loading", "lazy");
+  script.crossOrigin = "anonymous";
+  script.async = true;
+  container.value.appendChild(script);
+}
+
+onMounted(loadGiscus);
+
+// 路由切换时重新加载（SPA 导航）
+watch(() => route.path, loadGiscus);
+
+// 切换深色/浅色主题时同步通知 giscus iframe
+watch(isDark, (dark) => {
+  const iframe = container.value?.querySelector<HTMLIFrameElement>(
+    "iframe.giscus-frame",
+  );
+  if (iframe) {
+    iframe.contentWindow?.postMessage(
+      { giscus: { setConfig: { theme: dark ? "dark" : "light" } } },
+      "https://giscus.app",
+    );
+  }
+});
+</script>
+
+<template>
+  <div ref="container" class="giscus-wrapper" />
+</template>
+
+<style scoped>
+.giscus-wrapper {
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--vp-c-divider);
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -1,10 +1,19 @@
+import { h } from "vue";
 import DefaultTheme from "vitepress/theme";
 import PostList from "./PostList.vue";
 import ArchiveYear from "./ArchiveYear.vue";
+import ArticleTitle from "./ArticleTitle.vue";
+import Giscus from "./Giscus.vue";
 import type { Theme } from "vitepress";
 
 export default {
   extends: DefaultTheme,
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      "doc-before": () => h(ArticleTitle),
+      "doc-after": () => h(Giscus),
+    });
+  },
   enhanceApp({ app }) {
     app.component("PostList", PostList);
     app.component("ArchiveYear", ArchiveYear);