Hugo 博客集成 Giscus 评论系统完全指南

<script src="https://giscus.app/client.js"
        data-repo="c-x-x/blog-comments"
        data-repo-id="R_kgDOS5n9Lw"
        data-category="Announcements"
        data-category-id="DIC_kwDOS5n9L84C_FGp"
        ...>
</script>

themes/你的主题名/layouts/partials/comments.html

<!-- Giscus Comments Component -->
{{ if .Site.Params.giscus.enabled }}
<div class="comments-section">
  <div class="container" style="max-width: 900px; margin: 3rem auto; padding: 2rem;">
    <h3 class="section-title" style="font-size: 1.5rem; margin-bottom: 2rem;">💬 评论</h3>

    <div class="comments-wrapper">
      <script src="https://giscus.app/client.js"
              data-repo="{{ .Site.Params.giscus.repo }}"
              data-repo-id="{{ .Site.Params.giscus.repoId }}"
              data-category="{{ .Site.Params.giscus.category }}"
              data-category-id="{{ .Site.Params.giscus.categoryId }}"
              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>
      </script>
    </div>
  </div>
</div>

<style>
.comments-section {
  margin-top: 4rem;
}

.comments-wrapper {
  background: var(--color-bg-card, #ffffff);
  border-radius: 16px;
  border: 1px solid var(--color-border, #e5e7eb);
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 如果你的主题支持毛玻璃效果 */
.comments-wrapper {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.giscus, .giscus-frame {
  width: 100%;
}

@media (max-width: 768px) {
  .comments-wrapper {
    padding: 1rem;
  }
}
</style>

<script>
// 监听主题切换，同步 Giscus 主题
function updateGiscusTheme() {
  const theme = document.documentElement.getAttribute('data-theme');
  const iframe = document.querySelector('iframe.giscus-frame');

  if (!iframe) return;

  const giscusTheme = theme === 'dark' ? 'dark' : 'light';

  iframe.contentWindow.postMessage(
    {
      giscus: {
        setConfig: {
          theme: giscusTheme
        }
      }
    },
    'https://giscus.app'
  );
}

// 监听主题变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === 'data-theme') {
      setTimeout(updateGiscusTheme, 500);
    }
  });
});

observer.observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['data-theme']
});

// 首次加载后更新主题
window.addEventListener('load', () => {
  setTimeout(updateGiscusTheme, 1000);
});
</script>
{{ end }}

themes/你的主题名/layouts/_default/single.html

<article>
  <!-- 文章内容 -->
  <div class="article-content">
    {{ .Content }}
  </div>

  <!-- 添加评论组件 -->
  {{ partial "comments.html" . }}
</article>

[params.giscus]
  enabled = true
  repo = "你的用户名/blog-comments"
  repoId = "R_kgDOS5n9Lw"  # 替换为你的 repo-id
  category = "Announcements"
  categoryId = "DIC_kwDOS5n9L84C_FGp"  # 替换为你的 category-id

hugo server -D

// 假设你的主题切换按钮会改变 data-theme 属性
document.querySelector('.theme-toggle').addEventListener('click', () => {
  // 切换主题
  const newTheme = toggleTheme();
  
  // 同步到 Giscus
  const iframe = document.querySelector('iframe.giscus-frame');
  if (iframe) {
    iframe.contentWindow.postMessage({
      giscus: {
        setConfig: {
          theme: newTheme === 'dark' ? 'dark' : 'light'
        }
      }
    }, 'https://giscus.app');
  }
});

// 仅当评论区进入视口时加载
const commentsSection = document.querySelector('.comments-section');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 加载 Giscus 脚本
      loadGiscus();
      observer.unobserve(entry.target);
    }
  });
});

observer.observe(commentsSection);

/* 调整评论区背景 */
.comments-wrapper {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
}

/* 调整评论框边距 */
.giscus {
  padding: 1rem;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .comments-section {
    padding: 1rem;
  }
}