Nginx autoindex 页面美化需启用 autoindex on 和 autoindex_format html，配合 sub_filter 注入 CSS 或反向代理增强，辅以文件类型图标、响应式布局和安全限制。
默认的 Nginx autoindex 页面非常简陋，只显示文件列表和基础信息。要让它更美观、实用，核心是通过 autoindex on 启用索引，再结合前端资源（CSS/JS）和 Nginx 的响应头控制来实现自定义样式。
启用并配置基础 autoindex
在 server 或 location 块中开启目录索引，并设置格式为 HTML（便于后续注入样式）：
-
autoindex on;—— 必须开启 -
autoindex_format html;—— 强制输出 HTML 格式（Nginx 1.7.9+ 支持，旧版本默认就是 HTML） -
autoindex_exact_size off;—— 显示易读文件大小（如 2.4K、15M） -
autoindex_localtime on;—— 使用服务器本地时间，更直观
注入自定义 CSS 和 HTML 结构
Nginx 本身不支持直接修改 autoindex 的 HTML 模板，但可通过以下两种方式实现美化：
- 方案一：使用第三方模块 ngx_http_autoindex_module 增强版（如 nginx-autoindex），支持自定义模板、图标、排序等，需重新编译 Nginx
-
方案二（推荐）：用反向代理 + 静态 HTML 替换——将 autoindex 输出代理到一个中间服务（如 Python Flask / Node.js），解析原始 HTML 并插入 CSS/JS，再返回给浏览器；或用 Nginx 的
sub_filter模块动态注入样式链接
例如，在 location 中添加：
sub_filter '<head>' '<head><link rel="stylesheet" href="/css/autoindex.css">';<br>sub_filter_once on;<br>sub_filter_types text/html;
确保 /css/autoindex.css 已通过静态文件服务正确提供。
编写简洁实用的 autoindex CSS
无需复杂框架，几段 CSS 就能大幅提升可读性与体验：
- 隐藏默认的“Name”、“Last modified”等表头文字，用更清晰的中文或图标替代
- 为不同文件类型添加小图标（通过
background-image+ 文件后缀选择器，如a[href$=".pdf"]） - 增加 hover 效果、条纹背景、合理间距和字体大小
- 适配移动端：用媒体查询让表格变为垂直堆叠布局
示例片段：
table { width: 100%; border-collapse: collapse; }<br>td, th { padding: 8px 12px; text-align: left; }<br>tr:nth-child(even) { background-color: #f8f9fa; }<br>a[href$=".zip"]:before { content: "? "; }<br>a[href$=".md"]:before { content: "? "; }
增强功能建议（可选）
进一步提升实用性：
- 添加搜索框（需 JS 支持，配合
sub_filter注入脚本） - 支持按名称/大小/时间点击排序（需 JS 动态处理 DOM）
- 限制目录遍历范围，避免敏感路径泄露：
location ^~ /files/ { autoindex on; autoindex_exact_size off; } - 搭配 Basic Auth 或 IP 白名单保护私有索引页
不复杂但容易忽略细节，关键是让 autoindex 输出可控、可扩展、符合实际使用场景。
