Create Giscus.astro

src/components/Giscus.astro

@@ -0,0 +1,42 @@
+---
+// src/components/Giscus.astro
+---
+
+<div class="giscus"></div>
+
+<script>
+  function loadGiscus() {
+    const script = document.createElement('script');
+    script.src = 'https://giscus.app/client.js';
+    script.setAttribute('data-repo', 'ChenQihan666/MyBlog-Next'); // 改成你的仓库
+    script.setAttribute('data-repo-id', 'R_kgDOS5hWlA'); // 改成你的repo-id
+    script.setAttribute('data-category', 'Comments');
+    script.setAttribute('data-category-id', 'DIC_kwDOS5hWlM4C_IEh'); // 改成你的category-id
+    script.setAttribute('data-mapping', 'pathname');
+    script.setAttribute('data-reactions-enabled', '1');
+    script.setAttribute('data-emit-metadata', '0');
+    script.setAttribute('data-input-position', 'bottom');
+    script.setAttribute('data-theme', 'preferred_color_scheme');
+    script.setAttribute('data-lang', 'zh-CN');
+    script.setAttribute('crossorigin', 'anonymous');
+    script.async = true;
+
+    const container = document.querySelector('.giscus');
+    if (container) {
+      container.innerHTML = ''; // 清空容器，避免重复加载
+      container.appendChild(script);
+    }
+  }
+
+  // 页面首次加载时初始化
+  loadGiscus();
+
+  // 【关键】监听Astro的视图过渡事件，页面切换时重新加载评论
+  document.addEventListener('astro:page-load', loadGiscus);
+</script>
+
+<style>
+  .giscus {
+    margin-top: 2rem;
+  }
+</style>