如何使用HTML与JavaScript在网页中展示指定用户的GitHub仓库及Gist列表

之前查找相关实现方案时，发现网上多数现有方案都不适配最新版GitHub API，经过调试后整理出了可直接使用的实现方案，分享给有相同需求的开发者：

实现原理 #

• 直接调用GitHub公开REST API拉取数据，无需身份认证即可获取公开内容
• 用到的两个核心接口：
  • 公开仓库接口：https://api.github.com/users/{目标用户名}/repos
  • 公开Gists接口：https://api.github.com/users/{目标用户名}/gists
• 使用原生JavaScript的fetch方法发起请求，解析返回的JSON数据后直接插入页面DOM节点，无第三方框架依赖

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>GitHub作品展示</title>
    <style>
        .container {max-width: 1200px; margin: 0 auto; padding: 20px;}
        .section {margin-bottom: 40px;}
        .item {border: 1px solid #eee; border-radius: 6px; padding: 15px; margin-bottom: 10px;}
        .item h3 {margin: 0 0 8px 0;}
        .item p {margin: 0 0 5px 0; color: #666;}
        .meta {font-size: 14px; color: #999;}
    </style>
</head>
<body>
    <div class="container">
        <div class="section">
            <h2>公开仓库</h2>
            <div id="repos-list"></div>
        </div>
        <div class="section">
            <h2>公开Gists代码片段</h2>
            <div id="gists-list"></div>
        </div>
    </div>

    <script>
        // 替换为你需要展示的GitHub用户名
        const GITHUB_USERNAME = 'YOUR_GITHUB_USERNAME';

        // 加载仓库列表
        async function loadRepos() {
            const reposList = document.getElementById('repos-list');
            try {
                const res = await fetch(`https://api.github.com/users/${GITHUB_USERNAME}/repos?per_page=100&sort=updated`);
                const repos = await res.json();
                if (!Array.isArray(repos)) {
                    reposList.innerHTML = '<p>拉取仓库数据失败，请检查用户名是否正确</p>';
                    return;
                }
                repos.forEach(repo => {
                    const item = document.createElement('div');
                    item.className = 'item';
                    item.innerHTML = `
                        <h3>${repo.name}</h3>
                        <p>${repo.description || '暂无描述'}</p>
                        <div class="meta">
                            ⭐ ${repo.stargazers_count} | 最后更新：${new Date(repo.updated_at).toLocaleDateString()}
                        </div>
                    `;
                    reposList.appendChild(item);
                });
            } catch (e) {
                reposList.innerHTML = '<p>仓库列表加载失败</p>';
            }
        }

        // 加载Gists列表
        async function loadGists() {
            const gistsList = document.getElementById('gists-list');
            try {
                const res = await fetch(`https://api.github.com/users/${GITHUB_USERNAME}/gists?per_page=100`);
                const gists = await res.json();
                if (!Array.isArray(gists)) {
                    gistsList.innerHTML = '<p>拉取Gists数据失败，请检查用户名是否正确</p>';
                    return;
                }
                gists.forEach(gist => {
                    const item = document.createElement('div');
                    item.className = 'item';
                    item.innerHTML = `
                        <h3>${gist.description || '无标题代码片段'}</h3>
                        <div class="meta">
                            文件数量：${Object.keys(gist.files).length} | 创建时间：${new Date(gist.created_at).toLocaleDateString()}
                        </div>
                    `;
                    gistsList.appendChild(item);
                });
            } catch (e) {
                gistsList.innerHTML = '<p>Gists列表加载失败</p>';
            }
        }

        // 页面加载完成后执行
        window.addEventListener('DOMContentLoaded', () => {
            loadRepos();
            loadGists();
        });
    </script>
</body>
</html>

使用说明 #

• 将代码中的YOUR_GITHUB_USERNAME替换为你要展示的目标GitHub用户名即可直接运行
• 接口默认拉取最多100条最新更新的内容，如有更多展示需求可自行调整接口参数中的per_page数值，或添加分页逻辑
• 如果遇到GitHub API限流导致请求失败，可在fetch请求的header中添加自己的GitHub Personal Access Token提升请求限额，普通访问场景下无需额外配置即可正常使用

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