要实现 nginx 目录列表美化，需先启用 autoindex on 并配置 root/alias、charset utf-8、autoindex_exact_size off 等基础项；推荐安装 fancyindex 模块替换原生功能，或用 sub_filter 注入 css/js，亦可反向代理至静态前端服务实现高级功能。
直接启用 autoindex on 只能输出原始、无样式的 HTML 列表，要实现自定义美化，核心在于替换或增强 Nginx 原生生成的 HTML 输出。原生模块不提供模板路径，因此必须借助外部手段注入样式、结构或功能。
基础配置必须到位
美化前先确保列表能正常显示且可读：
- location 块中必须配对 root 或 alias，路径真实存在且 Nginx 有读取权限（含 SELinux 上下文）
- 显式开启
autoindex on和autoindex_format html（Nginx 1.7.9+ 才生效） - 加
charset utf-8;防中文文件名乱码（不能只写utf-8，需带分号） - 设
autoindex_exact_size off显示 2.4M 而非 2512345 字节，autoindex_localtime on用本地时间而非 UTC - 确保请求 URL 以
/结尾，否则可能 404；同时注释或删除目录内index.html，避免覆盖列表
推荐方案：安装并启用 fancyindex 模块
这是最省事、效果最稳的美化方式，尤其适合 Debian/Ubuntu 系统：
- 执行
sudo apt install libnginx-mod-http-fancyindex（包名注意不是 nginx-module-fancyindex） - 检查是否加载：
nginx -V 2>&1 | grep fancyindex，有输出即成功 - 把配置中的
autoindex on替换为fancyindex on，其余参数前缀同步改为fancyindex_，如fancyindex_exact_size off - 指定
fancyindex_header /path/to/header.html和fancyindex_footer /path/to/footer.html，这两个文件需在root范围内、可被 Nginx 读取，且自身也需声明charset utf-8
轻量替代：用 sub_filter 注入 CSS/JS
适用于无法安装第三方模块的环境（如 CentOS/RHEL），但需确认 Nginx 编译时含 --with-http_sub_module：
- 准备一个外部 CSS 文件（如
/usr/share/nginx/html/autoindex.css），包含响应式布局、图标类、文件类型颜色等 - 在 location 块中添加：
sub_filter '' '<link rel="stylesheet" href="/autoindex.css">'; - 务必加
sub_filter_once off;，否则只替换第一个匹配项 - 注意：原生 autoindex HTML 不含
标签，所以实际需用sub_filter '<title>' '<link rel="stylesheet" href="/autoindex.css"> <title>';</title> </title>这类变通写法 - 搭配
add_header Content-Security-Policy "default-src 'self'; style-src 'self'; script-src 'self'";避免浏览器拦截外链资源
进阶可控：反向代理 + 静态前端渲染
适合需要搜索、整目录下载、缩略图等功能的场景：
- 用 Python Flask / Node.js / Nginx + Lua 写一个轻量服务，接收 Nginx 的 autoindex JSON 输出（
autoindex_format json） - 该服务解析 JSON，套用自定义 HTML 模板（含 JSZip 实现前端 ZIP 打包、FileSaver 下载、面包屑导航等）
- Nginx 将请求反向代理至此服务，用户看到的是完全自定义页面，后端仍由 Nginx 提供文件服务
- 优势是逻辑彻底解耦，CSS/JS 可按需更新，无需重启 Nginx；缺点是多一层服务依赖
