From 2e98a35105507d27dc64d63757deb68d4f4b8d88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E5=8F=89=E6=A0=91=E6=A0=91?= <acofork@qq.com>
Date: Fri, 9 Jan 2026 19:05:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=AF=84=E8=AE=BA):=20=E6=94=B9=E8=BF=9BG?=
 =?UTF-8?q?iscus=E8=AF=84=E8=AE=BA=E5=8C=BA=E7=9A=84=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构Giscus评论区加载逻辑，支持动态切换主题并适配暗黑模式
添加MutationObserver监听主题变化，实时更新评论界面
支持Swup页面切换时的评论组件重新加载
更新文章文档中的注意事项说明
---
 src/content/posts/warden-worker.md |  4 +-
 src/pages/posts/[...slug].astro    | 73 ++++++++++++++++++++++++------
 2 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/src/content/posts/warden-worker.md b/src/content/posts/warden-worker.md
index 6e5c4be71..856b78a90 100644
--- a/src/content/posts/warden-worker.md
+++ b/src/content/posts/warden-worker.md
@@ -97,4 +97,6 @@ Build结束，全绿
 
 > [!CAUTION]
 >  ~~值得注意的是，该项目似乎仅实现了手机端的大部分API，而针对于电脑浏览器插件使用的API暂未支持，我们目前正在尝试用AI补全... Just a moment...~~
->  已支持电脑端浏览器插件
\ No newline at end of file
+>  更多注意事项请参阅仓库README
+>  已支持电脑端浏览器插件
+>  
\ No newline at end of file
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 7fe359976..037e28c60 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -166,21 +166,64 @@ const jsonLd = {
 
             
             <!-- Giscus 评论区 -->
-            <script src="https://giscus.app/client.js"
-                    data-repo="afoim/giscus-fuwari"
-                    data-repo-id="R_kgDOOi8quw"
-                    data-category="Announcements"
-                    data-category-id="DIC_kwDOOi8qu84CprDV"
-                    data-mapping="pathname"
-                    data-strict="0"
-                    data-reactions-enabled="1"
-                    data-emit-metadata="0"
-                    data-input-position="top"
-                    data-theme="preferred_color_scheme"
-                    data-lang="zh-CN"
-                    data-loading="lazy"
-                    crossorigin="anonymous"
-                    async>
+            <div id="giscus-container"></div>
+            <script is:inline>
+                function loadGiscus() {
+                    const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+                    
+                    const script = document.createElement('script');
+                    script.src = "https://giscus.app/client.js";
+                    script.setAttribute("data-repo", "afoim/giscus-fuwari");
+                    script.setAttribute("data-repo-id", "R_kgDOOi8quw");
+                    script.setAttribute("data-category", "Announcements");
+                    script.setAttribute("data-category-id", "DIC_kwDOOi8qu84CprDV");
+                    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", theme);
+                    script.setAttribute("data-lang", "zh-CN");
+                    script.setAttribute("data-loading", "lazy");
+                    script.setAttribute("crossorigin", "anonymous");
+                    script.async = true;
+                    
+                    const container = document.getElementById('giscus-container');
+                    if (container) {
+                        container.innerHTML = '';
+                        container.appendChild(script);
+                    }
+                }
+
+                // 监听主题变化
+                const observer = new MutationObserver((mutations) => {
+                    mutations.forEach((mutation) => {
+                        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                            const iframe = document.querySelector('iframe.giscus-frame');
+                            if (iframe) {
+                                const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+                                iframe.contentWindow.postMessage({
+                                    giscus: {
+                                        setConfig: {
+                                            theme: theme
+                                        }
+                                    }
+                                }, 'https://giscus.app');
+                            }
+                        }
+                    });
+                });
+
+                observer.observe(document.documentElement, {
+                    attributes: true,
+                    attributeFilter: ['class']
+                });
+
+                // 初始加载
+                loadGiscus();
+
+                // 支持 Swup 页面切换
+                document.addEventListener('swup:contentReplaced', loadGiscus);
             </script>
     <br>