【Node】自动生成HTML目录脚本分享

一个人丶99

2025-02-13 08:53

阅读391

一个人丶99

2025-02-13 08:53

阅读 391

本文为 AI 生成内容对众多 HTML 文件进行管理今天，我将为大家分享一个 Node.js 脚本，它能够自动化地生成 HTML 文件目录，极大地提升我们管理多个 HTML 文件的效率。

脚本功能概述

这个脚本能够扫描指定目录（默认为当前目录），获取所有的HTML文件（不包括index.html）和一级子目录中的index.html文件，并按照文件的创建时间倒序排列，最后生成一个包含文件列表和创建时间的index.html文件。通过这个index.html文件，我们可以方便地查看和访问项目中的各个HTML页面，同时了解它们的创建时间，便于管理和维护。

效果

如何使用

确保环境准备：确保你的系统已经安装了Node.js。如果没有安装，可以从Node.js官方网站下载并安装。
获取脚本：将下面的代码复制到一个新的文件中，例如generateHtmlIndex.js。这代码

▼
javascript
复制代码
const fs = require("fs");
const path = require("path");

const directoryPath = path.join(__dirname);

// 获取当前目录下的所有文件和子目录
fs.readdir(directoryPath, { withFileTypes: true }, (err, files) => {
  if (err) {
    return console.log("Unable to scan directory: " + err);
  }

  // 过滤出 HTML 文件和一级子目录
  const htmlFiles = files.filter(
    (file) =>
      file.isFile() &&
      path.extname(file.name).toLowerCase() === ".html" &&
      file.name!== "index.html"
  );

  const subDirectories = files.filter(
    (file) => file.isDirectory() && file.name!== "node_modules"
  );

  // 获取每个 HTML 文件的创建时间
  const fileStats = htmlFiles.map((file) => {
    const filePath = path.join(directoryPath, file.name);
    const stats = fs.statSync(filePath);
    return {
      name: file.name,
      birthtime: stats.birthtime, // 使用 birthtime 获取创建时间
      isDirectory: false,
    };
  });

  // 获取每个子目录中的 index.html 文件的创建时间
  subDirectories.forEach((dir) => {
    const indexPath = path.join(directoryPath, dir.name, "index.html");
    if (fs.existsSync(indexPath)) {
      const stats = fs.statSync(indexPath);
      fileStats.push({
        name: dir.name,
        birthtime: stats.birthtime, // 使用 birthtime 获取创建时间
        isDirectory: true,
      });
    }
  });

  // 按照创建时间倒序排列
  fileStats.sort((a, b) => b.birthtime - a.birthtime);

  // 生成 HTML 内容
  const htmlContent = `
        <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>HTML 目录</title>
            <style>
                body {
                    display: flex;
                    justify-content: center;
                    align-items: flex-start;
                    min-height: 100vh;
                    margin: 0;
                    font-family: Arial, sans-serif;
                    background-color: #f4f4f4;
                    overflow-y: auto;
                }
               .container {
                    background-color: #fff;
                    padding: 20px;
                    border-radius: 8px;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                    max-width: 80%;
                    width: 100%;
                    margin: 20px 0;
                }
                h1 {
                    text-align: center;
                    margin-bottom: 20px;
                }
                ul {
                    list-style-type: none;
                    padding-left: 20px;
                }
                li {
                    margin: 10px 0;
                    display: flex;
                    align-items: center;
                }
                a {
                    text-decoration: none;
                    color: #333;
                    font-size: 18px;
                    flex-grow: 1;
                }
                a:hover {
                    color: #007bff;
                }
               .file-info {
                    font-size: 14px;
                    color: #777;
                    margin-left: 10px;
                }
               .file-number {
                    font-size: 18px;
                    color: blue;
                    margin-right: 10px;
                }
            </style>
        </head>
        <body>
            <div class="container">
                <h1>HTML 目录</h1>
                <ul>
                    ${fileStats
                     .map(
                        (file, index) => `
                        <li>
                            <span class="file-number">${
                              fileStats.length - index
                            }</span>
                            <a href="${
                              file.isDirectory
                               ? `${file.name}/index.html`
                                : file.name
                            }" target="_blank">${
                          file.isDirectory
                           ? file.name
                            : file.name.replace(".html", "")
                        }</a>
                            <span class="file-info">${formatDate(
                              file.birthtime // 使用 birthtime 显示创建时间
                            )}</span>
                        </li>
                    `
                      )
                     .join("")}
                </ul>
            </div>
        </body>
        </html>
    `;

  // 写入 index.html 文件
  fs.writeFile(path.join(directoryPath, "index.html"), htmlContent, (err) => {
    if (err) {
      return console.log("Error writing file: " + err);
    }
    console.log("index.html 文件已生成");
  });
});

// 格式化日期
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

运行脚本：打开命令行工具，进入到保存generateHtmlIndex.js文件的目录，执行以下命令：

▼
bash
复制代码
node generateHtmlIndex.js

查看结果：运行脚本后，在当前目录下会生成一个index.html文件，打开这个文件，你就可以看到按照创建时间倒序排列的HTML文件目录。

注意事项

脚本默认扫描当前目录，如果需要扫描其他目录，需要修改directoryPath变量的值。
脚本会忽略node_modules目录，如果你有其他需要忽略的目录，可以在subDirectories过滤条件中添加。
生成的index.html文件中的样式可以根据自己的需求进行修改，以适应不同的项目风格。

希望这个脚本能对你的项目开发和管理有所帮助，让我们的工作更加高效和便捷！如果在使用过程中有任何问题或建议，欢迎留言交流。

问答助学