如何在用户交互时懒加载Giscus评论脚本？

云上老周

2026-7-1

动态加载Giscus脚本的可行方案

常见问题排查点

未设置加载标记：多次触发鼠标移动/滚动事件时，重复创建script标签导致加载异常
脚本属性配置错误：Giscus的data-repo、data-repo-id等核心属性未正确设置
事件未及时移除：加载完成后仍保留监听器，造成不必要的资源消耗

修复后的实现代码

// 标记脚本是否已加载
let giscusLoaded = false;

function loadGiscus() {
  if (giscusLoaded) return;

  // 创建Giscus脚本标签
  const script = document.createElement('script');
  script.src = 'https://giscus.app/client.js';
  // 替换为你自己的Giscus配置参数
  script.setAttribute('data-repo', '你的GitHub仓库名');
  script.setAttribute('data-repo-id', '你的仓库ID');
  script.setAttribute('data-category', '评论分类名');
  script.setAttribute('data-category-id', '分类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.crossOrigin = 'anonymous';
  script.async = true;

  // 插入到页面中
  document.body.appendChild(script);

  // 更新加载状态并移除事件监听器
  giscusLoaded = true;
  document.removeEventListener('mousemove', loadGiscus);
  document.removeEventListener('scroll', loadGiscus);
}

// 绑定触发事件
document.addEventListener('mousemove', loadGiscus);
document.addEventListener('scroll', loadGiscus);