我想在 github 存储库中显示图像供人们查看

Question

我目前正在为同人游戏社区创建存储库。这个存储库将提供人们可以用来修改他们的游戏的可下载资源。这些包括肖像、动画和其他类似的东西。

我目前正在从 Gdrive 切换到 Github，因为它不再适合我的目的。这是我的存储库：

https://github.com/Klokinator/Fire-Emblem-Graphics-Repository

举个例子，如果您导航到 Portrait Repository 文件夹，您可以看到人们提交的各种用户创建的图像。但是，由于 github 的限制，您一次只能单击一个来查看图像。

https://github.com/Klokinator/Fire-Emblem-Graphics-Repository/tree/main/Portrait%20Repository/FE10%20Mugs%20(Radiant%20Dawn)

而不是像这样看到一个列表：

https://i.imgur.com/nrpZvYH.png

我希望人们一眼就能看到并浏览这些图像，就像这样：

https://i.imgur.com/vEzA4vq.png

是否有 github 浏览器扩展程序或其他工具可以实现此目的？当然，高级用户可以克隆存储库并以这种方式浏览图像，但有些人生活在下载图像会占用大量带宽的国家，可能还有其他问题，等等。我想为他们提供任何可能的替代方案。

我已经有了一些可以使用的扩展 link，它们可以让人们一个一个地下载单个文件夹或文件，而不是下载整个存储库。它只是查看导致我出现问题的图像。

Answer 1

您可以在每个文件夹中自动生成一个 README.md Markdown 文件，显示所有图像。

Markdown 文件将由 GitHub 自动显示，但在当前文件夹的文件列表之后。

这里有一个示例 Node.js 脚本来生成这个：

#!/usr/bin/env node

const fs = require('fs');
const path = require('path');

const ROOT_DIR = './Portrait Repository/FE10 Mugs (Radiant Dawn)/';
const README_FILENAME = 'README.md';
const NB_IMAGES_PER_LINE = 4;
let nbImages = 0;
let mdContent = '<table><tr>';

fs.readdirSync(ROOT_DIR).forEach((image) => {
  if (image !== README_FILENAME) {
    if (!(nbImages % NB_IMAGES_PER_LINE)) {
      if (nbImages > 0) {
        mdContent += `
</tr>`;
      }
      mdContent += `
<tr>`;
    }
    nbImages++;
    mdContent += `
<td valign="bottom">
<img src="./${image}" width="200"><br>
${image}
</td>
`;
  }
});
mdContent += `
</tr></table>`;

fs.writeFileSync(path.join(ROOT_DIR, README_FILENAME), mdContent);

下面是它生成的示例： https://github.com/nhoizey/nicolas-hoizey.com/tree/main/src/assets/logos#readme

我想在 github 存储库中显示图像供人们查看

I want to display images in a github repo for people to view

image

repository

responsive-images