如何通过index.html展示GitHub个人仓库列表：HTML与API调用-html教程-PHP中文网

使用 fetch 调用 github rest api 获取用户仓库列表需指定 sort=updated 和 per_page=50 参数，设置 accept: application/vnd.github.v3+json 请求头，用 textcontent 防 xss，处理 403/404 错误并检查速率限制。

如何通过index.html展示github个人仓库列表：html与api调用

用 fetch 调 GitHub REST API 获取用户仓库列表

GitHub 的 /users/{username}/repos 接口是公开的，无需 token 就能查个人仓库（限 60 次/小时未授权请求）。但注意：默认只返回前 30 个，且按创建时间倒序——如果你希望显示最新活跃的，得手动加 sort=updated 参数。

实操建议：

把 username 写死在 JS 里最简单，比如 fetch("https://api.github.com/users/octocat/repos?sort=updated&per_page=100")
必须设置 Accept: application/vnd.github.v3+json 请求头，否则可能返回 406 错误
跨域没问题，GitHub API 支持 CORS，但本地直接双击打开 index.html 会因 file:// 协议被浏览器拦截，得用 python3 -m http.server 或 VS Code Live Server 启服务

渲染仓库列表时别忽略 API 分页和字段取舍

GitHub 默认每页最多 100 项（per_page=100），但总条数可能超 100。如果只调一次接口，就只能显示前 100 个——而很多人仓库数不到 100，所以常被忽略分页逻辑。

更实际的做法是先查总数再决定是否分页，或直接取前 50 个够用：

响应头里有 Link 字段（含 rel="last"），但解析麻烦；对个人展示页，直接 per_page=50 + page=1 更稳
只渲染需要的字段：name、description、stargazers_count、html_url，别碰 license 或 topics——它们可能为 null，不判空会报错
description 可能含 HTML 特殊字符，用 textContent 赋值，别用 innerHTML，防 XSS

处理 403 或 404 错误时检查 rate limit 和用户名拼写

常见错误现象：Failed to fetch 或控制台报 403 Forbidden，但不是权限问题——大概率是触发了未授权请求的速率限制（60 次/小时），或者用户名输错了返回 404。

GitHub Actions Failure Spike Audit

通过对比近期与基线运行窗口，按工作流分组检测 GitHub Actions 失败率突增。

下载

调试步骤：

在浏览器地址栏直接访问 https://api.github.com/users/your-username-here/repos，看能否返回 JSON；返回 {"message":"Not Found"} 就说明用户名不对
响应头里检查 X-RateLimit-Remaining，如果是 0，等一小时或加 personal access token（只需 read:public_repo 权限）
加 catch 块打印 error.message，比只写 console.error("API failed") 有用得多

用纯 HTML + JS 实现，但别硬编码样式或忽略加载状态

一个可运行的最小闭环：HTML 容器 + JS 获取 + 动态插入列表项。别用内联样式堆砌，用 class 控制外观；也别让页面空白等几秒才出数据。

关键代码片段（无框架）：

<div id="repo-list"></div>
<script>
fetch("https://api.github.com/users/yourname/repos?sort=updated&per_page=50")
  .then(r => r.json())
  .then(data => {
    const list = document.getElementById("repo-list");
    list.innerHTML = data.map(repo =>
      `<article>
        <h3><a href="${repo.html_url}" target="_blank">${repo.name}
        <p>${repo.description || "–"}
        <small>★ ${repo.stargazers_count}
      `
    ).join("");
  })
  .catch(err => console.error("Fetch error:", err.message));
</script>

容易被忽略的点：没网络时页面完全空白；仓库名含特殊字符（如 &）没转义；移动端没设 viewport 导致文字挤成一团——这些不解决，第一眼体验就垮了。