如何用JS访问GitHub仓库文件夹读取文件？本地正常GitHub Pages失效

GitHub Pages默认不支持目录索引功能，也就是说当你通过AJAX请求../images/photography/page这类文件夹路径时，服务器不会返回包含文件列表的HTML页面（本地环境的服务器通常默认开启了目录索引，所以能正常工作），反而会返回404页面，导致你的代码无法通过$(data).find("a")获取到图片链接。

下面提供三种可行的解决方法，按推荐程度排序：

方案一：静态生成页面（推荐） #

利用GitHub Pages原生支持的Jekyll静态生成能力，在构建阶段直接遍历文件夹生成内容，不需要前端动态请求。示例代码（放在你的HTML页面中）：

{% assign images = site.static_files | where_exp: "file", "file.path contains '/images/photography/page/' and (file.extname == '.jpg' or file.extname == '.png' or file.extname == '.gif')" %}
{% for image in images %}
  {% assign txt_path = image.path | replace: image.extname, ".txt" %}
  {% capture txt_content %}{% include_relative {{ txt_path }} %}{% endcapture %}
  {% assign text = txt_content | strip | split: "\n" %}
  <div class='gallery entry'>
    <div class='image-container'>
      <img src="{{ image.path | relative_url }}" alt="{{ text[0] }}">
    </div>
    <div class='text-container'>
      <h2>{{ text[1] }}</h2>
      <p>{{ text | slice: 2 | join: "\n" }}</p>
    </div>
  </div>
{% endfor %}

这种方式无需前端AJAX请求，页面加载时直接渲染完成，性能和稳定性都最优。

方案二：手动维护文件清单JSON #

在仓库根目录创建一个image-list.json文件，手动列出所有图片和对应txt文件的路径：

[
  {
    "image": "images/photography/page/photo1.jpg",
    "txt": "images/photography/page/photo1.txt"
  },
  {
    "image": "images/photography/page/photo2.png",
    "txt": "images/photography/page/photo2.txt"
  }
]

然后修改JS代码，直接请求这个JSON文件并遍历处理：

$.ajax({
  url: "image-list.json",
  dataType: "json",
  success: function(items) {
    items.forEach(function(item) {
      $.ajax({
        url: item.txt,
        success: function(txtData) {
          var text = txtData.trim().split("\n");
          // 用模板字符串拼接HTML，避免语法错误和XSS风险
          $(".gallery.content").append(`
            <div class='gallery entry'>
              <div class='image-container'>
                <img src="${item.image}" alt="${text[0]}">
              </div>
              <div class='text-container'>
                <h2>${text[1]}</h2>
                <p>${text.slice(2).join("\n")}</p>
              </div>
            </div>
          `);
        },
        error: function(err) {
          console.error("加载txt文件失败:", err);
        }
      });
    });
  },
  error: function(err) {
    console.error("加载图片清单失败:", err);
  }
});

方案三：调用GitHub API获取文件列表 #

通过GitHub API查询仓库内的文件列表，注意该方式有未认证请求每小时60次的限制，适合小流量站点：

// 替换为你的仓库名称，比如if4x/your-repo-name
const repoApiUrl = "https://api.github.com/repos/if4x/[你的仓库名]/contents/images/photography/page";

$.ajax({
  url: repoApiUrl,
  dataType: "json",
  success: function(files) {
    // 筛选出图片文件
    const imageFiles = files.filter(file => /\.(jpe?g|png|gif)$/.test(file.name));
    imageFiles.forEach(function(file) {
      const imageUrl = file.download_url;
      const txtUrl = imageUrl.replace(/\.(jpe?g|png|gif)$/, ".txt");
      
      $.ajax({
        url: txtUrl,
        success: function(txtData) {
          const text = txtData.trim().split("\n");
          $(".gallery.content").append(`
            <div class='gallery entry'>
              <div class='image-container'>
                <img src="${imageUrl}" alt="${text[0]}">
              </div>
              <div class='text-container'>
                <h2>${text[1]}</h2>
                <p>${text.slice(2).join("\n")}</p>
              </div>
            </div>
          `);
        },
        error: function(err) {
          console.error("加载txt文件失败:", err);
        }
      });
    });
  },
  error: function(err) {
    console.error("获取文件列表失败:", err);
  }
});

1. 重复声明了var folder，可以删除其中一个；
2. 拼接HTML时使用模板字符串（反引号`）替代字符串拼接，避免引号转义和语法错误；
3. 原代码用Text.splice(2)会修改原数组，应该用Text.slice(2).join("\n")获取从第3行开始的文本并保留换行。

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