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

编程问答 2022-05-14

问题描述

我目前正在为同人游戏社区创建存储库。该存储库将提供人们可用于修改游戏的可下载资源。其中包括肖像、动画和其他类似内容。

我目前正在从 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 浏览器扩展或其他工具可以使这成为可能？当然，高级用户可以克隆存储库并以这种方式浏览图像，但有些人生活在下载图像会占用大量带宽的国家/地区，可能还有其他问题等。我想为他们提供任何可能的替代方案。

我已经有一些可以链接的扩展，它们可以让人们一个一个下载单个文件夹或文件，而不是下载整个存储库。只有查看图片才会给我带来问题。

解决方法

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

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

以下是生成此内容的示例 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

imageimageimagerepositoryrepositoryrepositoryresponsive-images