配置github仓库

新建一个公开仓库，在设置将Discussions开启，我们的评论将存储在这里

在你的仓库安装 giscus

配置你的网站

打开giscus官网

选择好你的想要的参数，他会自动输出script

你可以在网站任意部分插入这个脚本即可使用

fuwari的主题自适应

在\src\components\下创建一个astro组件，爱叫啥叫啥

写入以下内容

---  
// GiscusComment.astro  
interface Props {  
  repo: string;  
  repoId: string;  
  category: string;  
  categoryId: string;  
  mapping?: string;  
  reactionsEnabled?: boolean;  
  emitMetadata?: boolean;  
  inputPosition?: 'top' | 'bottom';  
  lang?: string;  
}  
  
const {  
  repo,  
  repoId,  
  category,  
  categoryId,  
  mapping = 'pathname',  
  reactionsEnabled = true,  
  emitMetadata = false,  
  inputPosition = 'bottom',  
  lang = 'zh-CN'  
} = Astro.props;  
---  
  
<div id="giscus-container"></div>  
  
<script define:vars={{ repo, repoId, category, categoryId, mapping, reactionsEnabled, emitMetadata, inputPosition, lang }}>  
  function loadGiscus() {  
    const container = document.getElementById('giscus-container');  
    if (!container) return;  
  
    // 获取当前主题  
    const isDark = document.documentElement.classList.contains('dark');  
    const theme = isDark ? 'dark' : 'light';  
  
    // 创建Giscus脚本  
    const script = document.createElement('script');  
    script.src = 'https://giscus.app/client.js';  
    script.setAttribute('data-repo', repo);  
    script.setAttribute('data-repo-id', repoId);  
    script.setAttribute('data-category', category);  
    script.setAttribute('data-category-id', categoryId);  
    script.setAttribute('data-mapping', mapping);  
    script.setAttribute('data-strict', '0');  
    script.setAttribute('data-reactions-enabled', reactionsEnabled ? '1' : '0');  
    script.setAttribute('data-emit-metadata', emitMetadata ? '1' : '0');  
    script.setAttribute('data-input-position', inputPosition);  
    script.setAttribute('data-theme', theme);  
    script.setAttribute('data-lang', lang);  
    script.setAttribute('data-loading', 'lazy');  
    script.crossOrigin = 'anonymous';  
    script.async = true;  
  
    container.appendChild(script);  
  }  
  
  // 监听主题变化  
  function updateGiscusTheme() {  
    const giscusFrame = document.querySelector('iframe[src*="giscus"]');  
    if (giscusFrame) {  
      const isDark = document.documentElement.classList.contains('dark');  
      const theme = isDark ? 'dark' : 'light';  
        
      giscusFrame.contentWindow.postMessage({  
        giscus: {  
          setConfig: {  
            theme: theme  
          }  
        }  
      }, 'https://giscus.app');  
    }  
  }  
  
  // 监听DOM变化来检测主题切换  
  const observer = new MutationObserver((mutations) => {  
    mutations.forEach((mutation) => {  
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {  
        updateGiscusTheme();  
      }  
    });  
  });  
  
  // 页面加载时初始化  
  if (document.readyState === 'loading') {  
    document.addEventListener('DOMContentLoaded', loadGiscus);  
  } else {  
    loadGiscus();  
  }  
  
  // 开始观察主题变化  
  observer.observe(document.documentElement, {  
    attributes: true,  
    attributeFilter: ['class']  
  });  
</script>

然后想在哪里引入，比如文章页

那就在src\pages\posts[...slug].astro开头引入这个文件

import Giscus from "../../components/misc/Giscus.astro";

然后在想要的地方添加（例如协议下面）

<GiscusComment   
  repo="your-username/your-repo"  
  repoId="your-repo-id"  
  category="General"  
  categoryId="your-category-id"  
/>