如何在网站中嵌入GitHub仓库？Repo.js使用遇加载问题求助

先快速排查Repo.js的常见问题 #

• 确认是否正确引入Repo.js的CDN资源，比如https://cdn.jsdelivr.net/npm/repo-js@latest/dist/repo.min.js
• 检查仓库地址格式是否正确，比如元素上的data-repo属性是否为用户名/仓库名格式（例如octocat/Hello-World）
• 查看浏览器控制台报错信息，排查是否存在CORS限制或资源加载失败问题

替代方案推荐 #

1. GitHub Readme Stats #

可直接嵌入仓库统计卡片，支持展示星标数、fork数、语言占比等信息，无需复杂配置：

<img src="https://github-readme-stats.vercel.app/api/pin?username=你的用户名&repo=你的仓库名&theme=dark" alt="仓库统计卡片">

还可通过添加参数自定义样式，比如&show_owner=true显示仓库所有者，&hide_border=true隐藏卡片边框。

2. Repo Cards #

轻量级仓库卡片组件，支持自定义样式与交互：

<div class="repo-card" data-user="你的用户名" data-repo="你的仓库名"></div>
<script src="https://unpkg.com/repo-cards@latest/dist/repo-cards.min.js"></script>

初始化后会自动渲染仓库名称、描述、星标等信息，你也可以通过CSS完全自定义卡片的外观样式。

3. 自制轻量组件（基于GitHub API） #

如果不想依赖第三方库，几行代码就能实现基础仓库信息展示，完全可控：

<div id="repo-display"></div>
<script>
async function loadRepo() {
  const username = '你的用户名';
  const repoName = '你的仓库名';
  const response = await fetch(`https://api.github.com/repos/${username}/${repoName}`);
  const repo = await response.json();
  
  const display = document.getElementById('repo-display');
  display.innerHTML = `
    <h3>${repo.name}</h3>
    <p>${repo.description || '无描述'}</p>
    <div style="margin-top: 8px;">
      <span style="margin-right: 16px;">⭐ ${repo.stargazers_count}</span>
      <span>🍴 ${repo.forks_count}</span>
    </div>
  `;
}
loadRepo();
</script>

你可以根据需求扩展展示内容（比如更新时间、主语言），注意GitHub API非认证请求每小时最多60次，若流量较大可添加认证令牌提升限额。

内容的提问来源于stack exchange，提问作者Amir Nakhoda