Delete src/components/Giscus.astro

2026-08-14 11:29:33 +08:00 · 2026-06-14 17:46:32 +08:00
parent 0b3aa73412
commit 7a29ccef6e
1 changed files with 0 additions and 118 deletions
@@ -1,118 +0,0 @@
 ---
 // src/components/Giscus.astro
 ---
 <div class="giscus"></div>
 <script>
  let giscusIframe = null;
  // 获取当前博客的主题 ('dark' 或 'light')
  function getCurrentTheme() {
    // astro-paper 主题通常会在 <html> 上添加 class="dark" 或 data-theme="dark"
    const html = document.documentElement;
    const isDark =
      html.classList.contains('dark') ||
      html.getAttribute('data-theme') === 'dark' ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches &&
        !html.classList.contains('light') &&
        html.getAttribute('data-theme') !== 'light');
    return isDark ? 'dark' : 'light';
  }
  // 向 giscus iframe 发送主题变更消息
  function setGiscusTheme(theme) {
    if (giscusIframe && giscusIframe.contentWindow) {
      giscusIframe.contentWindow.postMessage(
        { giscus: { setConfig: { theme } } },
        'https://giscus.app'
      );
    }
  }
  // 当主题改变时调用
  function onThemeChange() {
    const newTheme = getCurrentTheme();
    setGiscusTheme(newTheme);
  }
  // 加载 Giscus 评论
  function loadGiscus() {
    const container = document.querySelector('.giscus');
    if (!container) return;
    container.innerHTML = ''; // 清空已有内容，避免重复加载
    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');
    script.setAttribute('data-category', 'Comments');
    script.setAttribute('data-category-id', 'DIC_kwDOS5hWlM4C_IEh');
    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', getCurrentTheme());
    script.setAttribute('data-lang', 'zh-CN');
    script.setAttribute('crossorigin', 'anonymous');
    script.async = true;
    // 脚本加载完成后，找到 giscus 生成的 iframe 并保存引用
    script.onload = () => {
      const findIframe = () => {
        const iframe = document.querySelector('.giscus iframe');
        if (iframe) {
          giscusIframe = iframe;
          // 确保 iframe 完全加载后再发送主题（防止过早）
          giscusIframe.addEventListener('load', () => onThemeChange());
          onThemeChange(); // 立即再同步一次
        } else {
          setTimeout(findIframe, 100);
        }
      };
      findIframe();
    };
    container.appendChild(script);
  }
  // 监听主题切换：观察 <html> 上 class 或 data-theme 属性的变化
  let observer = null;
  function startObservingTheme() {
    const target = document.documentElement;
    observer = new MutationObserver(() => onThemeChange());
    observer.observe(target, { attributes: true, attributeFilter: ['class', 'data-theme'] });
  }
  // 初始化：加载评论 + 启动主题监听
  loadGiscus();
  startObservingTheme();
  // 监听系统主题偏好变化（如果用户没有手动设置过主题，则跟随系统）
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    const html = document.documentElement;
    const hasManualTheme = html.classList.contains('dark') ||
                           html.classList.contains('light') ||
                           html.getAttribute('data-theme') === 'dark' ||
                           html.getAttribute('data-theme') === 'light';
    if (!hasManualTheme) {
      onThemeChange();
    }
  });
  // 处理 Astro 的视图过渡（SPA 导航）：每次页面切换后重新加载评论并重新监听
  document.addEventListener('astro:page-load', () => {
    loadGiscus();
    if (observer) {
      observer.disconnect();
      startObservingTheme();
    }
  });
 </script>
 <style>
  .giscus {
    margin-top: 2rem;
  }
 </style>