如何创建一个列出所有文件/目录的简单index.html文件？

Question

我们使用不允许目录列表的Web服务器。

我希望允许列出的特定目录。

如何制作一个包含此目录内容的简单HTML文件？

Answer 1

有足够的正当理由在apache或其他Web服务器中显式禁用自动目录索引。或者，例如，您可能希望仅在索引中包含某些文件类型。在这种情况下，您可能仍希望为特定文件夹创建静态生成的 index.html 文件。

这可以通过tree轻松实现 - 这是一个在大多数Linux发行版（例如ubuntu / debian：sudo apt install tree）上都可用的简约实用程序，它可以生成纯文本，XML，JSON或HTML输出

生成一层深度的HTML目录索引：

tree -H '.' -L 1 --noreport --charset utf-8 > index.html

仅包含与glob模式匹配的特定文件类型，例如*.zip个文件：

tree -H '.' -L 1 --noreport --charset utf-8 -P "*.zip" > index.html

  

^{-H的参数将用作基本href，因此您可以传递相对路径（如.）或来自Web根目录的绝对路径，例如/files。 -L 1仅将列表限制为当前目录。}

我想要一个索引生成器，我可以按照我想要的方式设置样式，最后使用this script - 除了具有可自定义的样式之外，该脚本还将递归生成所有的index.html文件嵌套子目录。

Answer 2

对我来说，PHP是最简单的方法：

<?php
echo "Here are our files";
$path = ".";
$dh = opendir($path);
$i=1;
while (($file = readdir($dh)) !== false) {
    if($file != "." && $file != ".." && $file != "index.php" && $file != ".htaccess" && $file != "error_log" && $file != "cgi-bin") {
        echo "<a href='$path/$file'>$file</a><br /><br />";
        $i++;
    }
}
closedir($dh);
?> 

将其放在您的目录中，并设置您希望它在$ path上搜索的位置。第一个if语句将隐藏您的php文件和.htaccess以及错误日志。然后它将显示带有链接的输出。这是非常简单的代码，易于编辑。

Answer 3

你可以： 编写服务器端脚本页面，如PHP，JSP，ASP.net等，以动态生成此HTML

或

设置您正在使用的Web服务器（例如Apache），以便为不包含welcome-page的目录（例如index.html）自动执行此操作

特别是在apache中，请阅读更多内容： 编辑httpd.conf： http://justlinux.com/forum/showthread.php?s=&postid=502789#post502789

或添加autoindex mod： http://httpd.apache.org/docs/current/mod/mod_autoindex.html

Answer 4

有一个由 Celeron Dude 制作的免费 php 脚本可以做到这一点，称为 Celeron Dude Indexer 2。它不需要 .htaccess 源代码易于理解并提供了一个很好的起点。

这是一个下载链接：https://gitlab.com/desbest/celeron-dude-indexer/

Answer 5

您是否尝试通过.htaccess允许此目录？

Options +Indexes

我在我的某些目录中使用它，其中我的提供程序禁用了目录列表

Answer 6

使用纯HTML无法做到这一点。

但是，如果您可以在Apache服务器上访问PHP（您标记了帖子“apache”），那么可以轻松完成 - se the PHP glob function。如果没有 - 你可能会尝试服务器端包含 - 它是一个Apache的东西，我不太了解它。

Answer 7

如果您的登台服务器已启用目录列表，则可以将index.html复制到生产服务器。

例如：

wget https://staging/dir/index.html

# do any additional processing on index.html

scp index.html prod/dir

Answer 8

如果您有 import Foundation import UIKit import CoreImage extension UIImage { static let defaultImage = UIImage(systemName: "person.circle.fill")! func colorInverted() -> UIImage { guard let ciImage = CIImage(image: self) else { print("UIImage: Failed to get CIImage!") return UIImage.defaultImage } guard let filter = CIFilter(name: "CIColorInvert") else { print("UIImage: Failed to get filter!") return UIImage.defaultImage } filter.setValue(ciImage, forKey: kCIInputImageKey) guard let image = filter.outputImage else { print("UIImage: Failed to get output image!") return UIImage.defaultImage } return UIImage(ciImage: image) } } ，那么您可以使用 this answer 中的 node 来获取所有文件：

fs

你可以这样使用它：

const { resolve } = require('path'),
  { readdir } = require('fs').promises;

async function getFiles(dir) {
  const dirents = await readdir(dir, { withFileTypes: true });
  const files = await Promise.all(dirents.map((dirent) => {
    const res = resolve(dir, dirent.name);
    return dirent.isDirectory() ? getFiles(res) : res;
  }));
  return Array.prototype.concat(...files);
}

您可以在命令行中使用如下方式调用它：

const directory = "./Documents/";
  
getFiles(directory).then(results => {
  const html = `<ul>` +
  results.map(fileOrDirectory => `<li>${fileOrDirectory}</li>`).join('\n') +
  `</ul>`;

  process.stdout.write(html);
  // or you could use something like fs.writeFile to write the file directly
});

Answer 9

要了解HTML非常重要，因为我们可以根据需要创建自己的网站。您可以创建一个简单的index.html文件 DirectoryIndex index.html DirectoryIndex index.php

单一指令

DirectoryIndex index.html index.php

在这里查看一种在HTML Beautifier工具中学习HTML的简便方法，它可以帮助您美化或格式化不整洁，不清晰的HTML代码，以便清楚地阅读它。此外，它有助于在给定空间中练习更多的编码集。如果您在修改时出错，它将以正确的格式纠正您。对于开发人员来说，它是非常有用的工具，可以在嵌套的html代码中查找并更正执行错误。