javascript - 使用 JavaScript 从文件夹/子文件夹动态加载所有图像

Question

我的 Github Pages 网站上有一个 /img 目录。 /img 和子文件夹中有大约 50 张图像，我想在页面上的网格中显示它们。我没有兴趣为每张图片输入以下 50 次...

  <a href="...">
     <img alt=".." src="img/...">
  </a>

...特别是因为我会随着时间的推移添加和删除图像。

如何使用 JavaScript 动态创建 HTML 代码？我显然不能使用 PHP，因为这是 Github Pages。

我已经尝试过 AJAX 和 requirejs，但无法正常工作。

Answer 1

您可以使用 Github Actions 来完成此操作

在您的存储库中，在路径 .github/workflows/ 下添加一个新文件 update-image-list.yml(您可能需要创建文件夹)

将这段代码放入文件中:

name: Update Image List
on:
  push
jobs:
  updateImageList: # you can put any name here
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2 # Checkout repo
      - shell: bash
        run: ls -Rpm1 ./img/ > images.txt # Saving file list into a file
      - name: Save changes
        uses: actions-go/push@v1 # pushing the changes to the repo
        with:
          force: true
          commit-files: images.txt
          commit-message: Updating image list

现在，每次您将内容推送到您的存储库时，都会执行此脚本，使用 ls 将图像文件的最新列表保存到 images.txt 文件中> 命令行，然后将文件推送到 repo。内容将类似于:

图片.txt

./img/:
image1.jpg
child-folder/
image2.png
image3.jpg

./img/child-folder:
image4.jpg

既然您已将图像文件列表放入images.txt，您只需将文件发送到前端并处理其内容

类似这样的东西:

在您的 HTML 中:

<div class="images" id="images"></div>

<script>
function loadImages() {
    const xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            const fileList = this.responseText.split('\n'); // Split by lines
            let currentFolder = '';

            const filePaths = fileList
                .map(f => { // Build correct path for each file
                    let filePath = '';

                    if (f) {
                        if (f[0] === '.') {
                            currentFolder = f.replace('.', '').replace(':', '/');
                        }
                        else if (f[f.length - 1] !== '/') {
                            filePath = `${location.href}${currentFolder}${f}`;
                        }
                    }
          
                    return filePath;
                })
                .filter(f => f); // Remove empty lines
      
            const imagesContainer = document.getElementById('images');
      
            filePaths.map(f => { // Create and put images to the DOM
                const img = document.createElement('IMG');
                img.src = f;
                imagesContainer.appendChild(img);
            });
        }
    };

    xhttp.open("GET", "images.txt", true);
    xhttp.send();
}

loadImages();
</script>

当然你可以使用任何库/框架来做同样的事情