如何用JavaScript获取GitHub仓库所有文件并生成可访问的index.html

1. 修复变量大小写错误 #

你的代码里定义的是小写url变量，但xhr.open调用时用了大写URL——JavaScript是大小写敏感的，这会直接导致URL未定义的报错。把xhr.open('GET', URL, true);改成xhr.open('GET', url, true);即可解决这个语法问题。

2. 处理跨域与API限制 #

直接在前端用XHR调用GitHub API会遇到CORS跨域限制，浏览器会拦截这类跨域请求。此外，未认证的GitHub API请求每小时只有60次调用额度，很容易耗尽。

解决方式：

• 如果你的页面部署在GitHub Pages上，GitHub Pages允许与GitHub API的跨域请求，可以正常使用；
• 可以给请求添加Accept头指定API返回格式，若需要提升请求额度，还可以添加个人访问令牌认证（替换成自己的令牌）：

  xhr.setRequestHeader('Accept', 'application/vnd.github.v3+json');
  // 可选：添加认证令牌，提升请求次数限制
  // xhr.setRequestHeader('Authorization', 'token YOUR_GITHUB_TOKEN');
  

3. 过滤Markdown文件并生成可访问链接 #

拿到API返回的数据后，需要筛选出.md后缀的文件，再利用download_url字段生成可直接访问的文件链接。

修复后的完整代码 #

const xhr = new XMLHttpRequest();
const url = "https://api.github.com/repos/gitblanc/Obsidian-Notes/contents/";

xhr.open('GET', url, true);
// 指定GitHub API返回格式
xhr.setRequestHeader('Accept', 'application/vnd.github.v3+json');

xhr.onload = function() {
    if (this.status >= 200 && this.status < 300) {
        try {
            const data = JSON.parse(this.response);
            // 过滤出所有Markdown文件
            const mdFiles = data.filter(item => item.name.endsWith('.md'));
            // 生成移动端友好的链接列表
            const linkList = mdFiles.map(file => {
                return `<a href="${file.download_url}" target="_blank">${file.name}</a>`;
            }).join('<br>');
            // 将列表插入到页面中（假设页面有id为mdList的容器）
            document.getElementById('mdList').innerHTML = linkList;
        } catch (err) {
            console.error('JSON解析失败:', err);
        }
    } else {
        console.error('请求失败，状态码:', this.status);
    }
};

// 捕获网络请求错误
xhr.onerror = function() {
    console.error('网络请求出错');
};

xhr.send();

额外优化提示 #

• 如果需要遍历子文件夹里的Markdown文件，GitHub API的contents端点仅返回当前目录内容，需要递归请求子文件夹的contents地址；
• 给链接列表添加简单CSS，适配移动端阅读：

  #mdList {
      max-width: 100%;
      padding: 1rem;
      font-size: 1.1rem;
  }
  #mdList a {
      display: block;
      margin: 0.5rem 0;
      color: #24292f;
      text-decoration: none;
  }
  #mdList a:hover {
      text-decoration: underline;
  }
  

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