Nginx autoindex需结合前端美化与客户端ZIP打包实现目录列表优化。通过sub_filter注入CSS/JS美化界面，用JSZip+FileSaver在浏览器端动态打包下载，辅以搜索、面包屑、IP白名单等增强功能。
Nginx 自带的 autoindex 指令能开启目录列表功能，但默认样式简陋、不支持下载（尤其整目录）、无搜索、无响应式，直接用于内网文件共享体验较差。要实现“美化 + 目录下载”，需结合 Nginx 配置、轻量前端资源和少量服务端增强，无需额外后端程序。
启用并基础美化 autoindex 列表
先确保 Nginx 编译时启用了 --with-http_autoindex_module（主流发行版默认开启）。在 server 或 location 块中配置：
location /files/ {
alias /data/shared/;
autoindex on;
autoindex_format html; # 输出 HTML（非 json/xml）
autoindex_exact_size off; # 显示易读大小（1.2M 而非 1234567）
autoindex_localtime on; # 使用本地时间而非 GMT
}此时访问 /files/ 可看到原始列表。美化关键在于替换 Nginx 默认的 HTML 模板——它不提供自定义入口，所以采用「反向代理 + 前端注入」方式：
- 用
sub_filter模块动态注入 CSS/JS（需编译含--with-http_sub_module） - 或更推荐：用
alias指向一个含自定义 index.html 的静态目录，再用 Lua/NJS 生成列表（见下文） - 简单方案：部署一个轻量前端（如 nginx-autoindex-theme），将 CSS/JS 放入
/usr/share/nginx/html/autoindex/，再用sub_filter替换默认 head
实现整目录下载（ZIP 打包）
Nginx 本身不支持动态 ZIP 打包，但可通过以下低侵入方式实现：
- 客户端 ZIP（推荐）：用 JavaScript 在浏览器端打包。引入 JSZip 和 FileSaver.js，监听目录页的「下载此目录」按钮，遍历当前 HTML 中的链接，发起多个 GET 请求获取文件内容，合并为 ZIP。适合小文件、目录结构扁平、内网带宽充足场景
-
服务端预生成（稳定）：用定时脚本（如 cron + zip）为每个目录生成
dirname.zip，Nginx 直接提供该文件。缺点是实时性差、磁盘占用高 -
CGI/Proxy 中转（灵活）：配一个轻量 CGI（Python Flask/PHP）接收
/download?path=/abc，服务端实时 zip 并流式返回。需启用fastcgi_pass或proxy_pass，注意权限与超时设置（proxy_read_timeout 300）
增强实用性：搜索、面包屑、权限控制
纯 autoindex 缺乏搜索和导航。可叠加以下改进：
- 前端搜索：用 JavaScript 抓取页面表格数据，实现客户端过滤（无需后端）
-
面包屑导航：通过解析 URL 路径（如
/files/a/b/c/）动态生成链接，提升多层目录体验 -
基础权限：用
auth_basic做简单密码保护；敏感目录用allow/deny限制 IP 段（如allow 192.168.1.0/24; deny all;） -
隐藏特定文件：用
autoindex_ignore（Nginx 1.19.10+）排除.git、README.md等，或用map指令结合location ~屏蔽
完整示例：简洁可部署配置
假设文件根目录为 /data/shared，使用 JSZip 客户端打包，并注入美化样式：
location /files/ {
alias /data/shared/;
autoindex on;
autoindex_format html;
autoindex_exact_size off;
autoindex_localtime on;
<pre class="brush:php;toolbar:false;"># 注入自定义 head（需启用 sub_filter）
sub_filter '<head>' '<head><link rel="stylesheet" href="/autoindex/style.css"><script src="/autoindex/main.js"></script>';
sub_filter_once on;
# 允许跨域（若 JS 需 fetch 同域文件）
add_header 'Access-Control-Allow-Origin' '*';}
location /autoindex/ { alias /usr/share/nginx/html/autoindex/; expires 1h; }
其中 main.js 实现：解析当前页所有 <a href="xxx"></a> 链接 → 过滤出文件（排除 / 和 ..）→ 逐个 fetch → 用 JSZip 打包 → 触发下载。内网环境通常毫秒级完成，体验接近原生。
