如何自动生成文件夹内页面的动态字母排序列表？

纯前端JS的局限 #

首先明确：浏览器端的纯JS受安全策略限制，无法直接读取服务器上的文件夹内容。所以得根据你的站点类型选择不同方案：

方案一：Node.js预生成静态列表（适合静态站点，用你熟悉的JS就能搞定） #

如果你的站点是静态托管（比如静态服务器、GitHub Pages），可以用Node.js写个脚本，提前生成好页面列表，之后每次新增页面重新跑一遍脚本就行：

1. 安装Node.js（没装的话先装）
2. 在项目根目录创建generate-list.js脚本，代码如下：

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

// 配置目标文件夹和要插入列表的页面路径
const targetDir = path.join(__dirname, 'example/things');
const outputPage = path.join(__dirname, 'example/index.html');

// 递归查找所有index.html文件
function collectIndexFiles(dir, result = []) {
  const files = fs.readdirSync(dir);
  files.forEach(file => {
    const fullPath = path.join(dir, file);
    const stats = fs.statSync(fullPath);
    if (stats.isDirectory()) {
      collectIndexFiles(fullPath, result);
    } else if (file === 'index.html') {
      // 计算相对链接和显示名称（用文件夹名作为显示文本）
      const relativeLink = path.relative(path.dirname(outputPage), fullPath);
      const displayName = path.basename(path.dirname(fullPath));
      result.push({ name: displayName, link: relativeLink });
    }
  });
  return result;
}

// 获取文件列表并按字母排序
const sortedFiles = collectIndexFiles(targetDir).sort((a, b) => a.name.localeCompare(b.name));

// 生成HTML列表代码
const listHtml = sortedFiles.map(item => `<li><a href="${item.link}">${item.name}</a></li>`).join('');
const listSection = `<ul>${listHtml}</ul>`;

// 将列表插入到目标页面的指定容器（需要先在index.html里加<div id="page-list"></div>）
fs.readFile(outputPage, 'utf8', (err, htmlContent) => {
  if (err) throw err;
  const updatedHtml = htmlContent.replace('<div id="page-list"></div>', `<div id="page-list">${listSection}</div>`);
  fs.writeFile(outputPage, updatedHtml, 'utf8', () => {
    console.log('页面列表已自动生成！');
  });
});

3. 在root/example/index.html里添加一个容器：<div id="page-list"></div>
4. 终端运行node generate-list.js，脚本会自动读取目标文件夹下的所有index.html，生成按字母排序的列表并插入到页面中

方案二：PHP动态生成（如果服务器支持PHP） #

如果你的站点有PHP环境，直接把root/example/index.html改成index.php，添加以下代码即可实现访问时动态生成列表：

<div id="page-list">
  <ul>
    <?php
    $targetDir = './things/';
    $fileList = [];

    // 递归遍历文件夹收集index.html
    function scanFolder($dir, &$list) {
      $items = scandir($dir);
      foreach ($items as $item) {
        if ($item === '.' || $item === '..') continue;
        $fullPath = $dir . $item;
        if (is_dir($fullPath)) {
          scanFolder($fullPath . '/', $list);
        } elseif ($item === 'index.html') {
          $displayName = basename(dirname($fullPath));
          $list[] = ['name' => $displayName, 'path' => $fullPath];
        }
      }
    }

    scanFolder($targetDir, $fileList);
    // 按名称排序
    usort($fileList, function($a, $b) {
      return strcmp($a['name'], $b['name']);
    });

    // 输出列表
    foreach ($fileList as $file) {
      echo "<li><a href='{$file['path']}'>{$file['name']}</a></li>";
    }
    ?>
  </ul>
</div>

用户每次访问该页面时，PHP会自动读取文件夹内容并生成排序后的列表，无需手动更新。

方案选择建议 #

• 静态站点选方案一，完全用JS技术栈，符合你的熟悉范围
• 有PHP环境选方案二，动态生成更省心，不用每次新增页面都跑脚本

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