From 1c9f1546524b6914aebf818205dc7722102ae0ab Mon Sep 17 00:00:00 2001
From: joyzhao <zhaoguiyang18@gmail.com>
Date: Fri, 9 Jan 2026 09:07:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20GiscusComments=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E8=AF=84=E8=AE=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/blog/GiscusComments.tsx | 52 ++++++++++++++++++++++++++
 src/layouts/BlogPostLayout.astro       |  6 +++
 2 files changed, 58 insertions(+)
 create mode 100644 src/components/blog/GiscusComments.tsx

diff --git a/src/components/blog/GiscusComments.tsx b/src/components/blog/GiscusComments.tsx
new file mode 100644
index 0000000..71286af
--- /dev/null
+++ b/src/components/blog/GiscusComments.tsx
@@ -0,0 +1,52 @@
+import Giscus from '@giscus/react';
+import type { Lang } from '@/types/i18n';
+import { useEffect, useState } from 'react';
+
+export interface GiscusCommentsProps {
+  lang?: Lang;
+}
+
+export default function GiscusComments({ lang = 'en' }: GiscusCommentsProps) {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+  const [term, setTerm] = useState<string>('');
+
+  const giscusLang = lang === 'zh' ? 'zh-CN' : lang;
+
+  useEffect(() => {
+    const getTheme = () => document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+
+    const pathname = window.location.pathname;
+    const postsMatch = pathname.match(/\/posts\/([^/]+)/);
+    const discussionTerm = postsMatch ? postsMatch[1] : pathname;
+
+    setTheme(getTheme());
+    setTerm(discussionTerm);
+
+    const observer = new MutationObserver(() => {
+      setTheme(getTheme());
+    });
+
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+
+    return () => observer.disconnect();
+  }, []);
+
+
+  return (
+    <Giscus
+      repo="zguiyang/blog-giscus"
+      repoId="R_kgDOQ2Wnxw"
+      category="Announcements"
+      categoryId="DIC_kwDOQ2Wnx84C0vSJ"
+      mapping="specific"
+      term={term}
+      strict="0"
+      reactionsEnabled="1"
+      emitMetadata="0"
+      inputPosition="top"
+      theme={theme}
+      lang={giscusLang}
+      loading="lazy"
+    />
+  );
+}
diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
index 9dafdb0..4fc3b07 100644
--- a/src/layouts/BlogPostLayout.astro
+++ b/src/layouts/BlogPostLayout.astro
@@ -11,6 +11,7 @@ import TableOfContents from '@/components/layout/TableOfContents.astro';
 import BlogNavigation from '@/components/layout/BlogNavigation.astro';
 import PostMeta from '@/components/blog/PostMeta.astro';
 import Container from '../components/ui/Container';
+import GiscusComments from '@/components/blog/GiscusComments';
 
 // Use Astro's MarkdownLayoutProps for proper type safety
 export type Props = MarkdownLayoutProps<FrontmatterProps>;
@@ -82,6 +83,11 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
             <div class="mt-8 sm:mt-12">
               <BlogNavigation />
             </div>
+
+            <!-- Comments Section -->
+            <div class="mt-10 sm:mt-16 border-t border-border pt-10">
+              <GiscusComments client:only="react" lang={lang} />
+            </div>
             
             <!-- Author Card moved to bottom with enhanced styling -->
             <div class="mt-10 sm:mt-16 border-t border-border pt-10">