如何通过GitHub API获取用户仓库语言及占比并展示到HTML页面

实现方案 #

1. 新增语言统计逻辑 #

这里提供两种统计维度，按需选择：

按仓库数统计占比（无需额外请求，直接用现有返回字段）

直接在代码中新增统计函数即可：

// 输入仓库数组，返回按占比倒序排序的语言统计结果
function calculateLangRatio(repos) {
  const langCount = {};
  let validRepoTotal = 0;

  repos.forEach(repo => {
    const lang = repo.language;
    // 过滤语言为空的仓库
    if (!lang) return;
    langCount[lang] = (langCount[lang] || 0) + 1;
    validRepoTotal++;
  });

  return Object.entries(langCount)
    .map(([langName, count]) => ({
      langName,
      ratio: ((count / validRepoTotal) * 100).toFixed(2)
    }))
    .sort((a, b) => b.ratio - a.ratio);
}

按实际代码字节数统计占比（精度更高，需额外请求接口）

在你的Github类中新增如下方法：

async getExactLangRatio(username, repos) {
  const langByteTotal = {};
  // 遍历请求每个仓库的语言详情接口
  for (const repo of repos) {
    const res = await fetch(`${this.url}${username}/repos/${repo.name}/languages`);
    const langData = await res.json();
    Object.entries(langData).forEach(([langName, bytes]) => {
      langByteTotal[langName] = (langByteTotal[langName] || 0) + bytes;
    });
  }
  const allByteTotal = Object.values(langByteTotal).reduce((sum, val) => sum + val, 0);
  return Object.entries(langByteTotal)
    .map(([langName, bytes]) => ({
      langName,
      ratio: ((bytes / allByteTotal) * 100).toFixed(2)
    }))
    .sort((a, b) => b.ratio - a.ratio);
}

2. 修改UI类的渲染逻辑 #

修改你原有的showRepoInfo方法，新增语言统计区域的渲染：

showRepoInfo(repos, langRatioList) { 
  this.profile.innerHTML = "";
  // 先渲染语言统计板块
  let renderHtml = `<div class="lang-stat-card"><h3>用户语言占比</h3>`;
  langRatioList.forEach(lang => {
    renderHtml += `
      <div class="lang-item">
        <span class="lang-name">${lang.langName}</span>
        <span class="lang-percent">${lang.ratio}%</span>
        <div class="lang-progress" style="width: ${lang.ratio}%; height: 8px; background: #2385bb; margin: 4px 0;"></div>
      </div>
    `;
  });
  renderHtml += `</div><h3>仓库列表</h3>`;

  // 再渲染原有仓库列表
  repos.forEach(repo => {
    renderHtml += `
    <div class="lang">
      <span class="badge">${repo.language || '未标注'}</span>
      <span class="badgee">${repo.size} KB</span>
    </div>
    `;
  });

  this.profile.innerHTML = renderHtml;
}

3. 调整调用逻辑 #

在你原有调用getGithubData的位置，补充统计逻辑的调用即可：

const github = new Github();
const ui = new UI();
const targetUsername = "要查询的用户名";

github.getGithubData(targetUsername).then(res => {
  // 用按仓库数统计的话直接调用方法即可
  const langRatio = calculateLangRatio(res.repo);
  ui.showRepoInfo(res.repo, langRatio);

  // 要使用按字节数统计的话，替换上面两句为下面代码即可
  // github.getExactLangRatio(targetUsername, res.repo).then(langRatio => {
  //   ui.showRepoInfo(res.repo, langRatio);
  // })
})

如果需要调整展示样式，直接给对应的DOM元素加CSS规则即可。

内容的提问来源于stack exchange，提问作者Berke Özbek