美化nginx目录浏览页面首选fancyindex模块,需配置charset utf-8、autoindex_localtime on、autoindex_exact_size off三要素;次选sub_filter注入css或xslt转换xml输出。

直接启用 autoindex on 只能输出极简列表,要让目录浏览页面真正可用、美观,关键不在“模块管理”本身,而在于选对方案并配准细节。原生 autoindex 不支持模板、无图标、不带样式,美化必须借助外部手段——目前最实用的是 fancyindex 模块(推荐)或 sub_filter + 自定义 CSS(轻量但有局限)。
用 fancyindex 模块(Debian/Ubuntu 一键安装)
这是目前落地最快、效果最稳的方案,自带排序、搜索、文件图标、响应式布局,且中文支持良好。
- 执行
sudo apt install libnginx-mod-http-fancyindex安装模块(注意包名,不是 nginx-module-fancyindex) - 检查是否加载成功:
nginx -V 2>&1 | grep fancyindex,有输出即生效 - 配置中替换原生指令:把
autoindex on;改为fancyindex on;,其他参数前缀也同步改,例如:fancyindex_exact_size off;fancyindex_localtime on;charset utf-8; -
fancyindex_header和fancyindex_footer必须指向真实存在的 HTML 文件路径,且该路径需在root或alias范围内,否则 404
用 sub_filter 注入 CSS(无需重编译,适合简单美化)
适用于不想装第三方模块、只需基础样式调整的场景。注意:原生 autoindex 输出不含 ,不能直接插 link 标签,得靠 add_before_body 或 add_after_body 加载包装页。
- 先确保
autoindex_format html;已开启(Nginx 1.7.9+ 才有效) - 准备一个美化页,比如
/autoindex.html,包含完整 HTML 结构和 CSS 样式,放在 Nginx 可服务的路径下(如/usr/share/nginx/html/autoindex.html) - 在目标 location 中添加:
add_after_body /autoindex.html; - 同时务必设置:
charset utf-8;防止中文文件名乱码
避坑要点:三处必配,否则白忙活
无论用哪种方案,以下三项配置漏掉任一,都会导致显示异常:
-
charset utf-8;—— 否则中文文件名变成 %E6%96%87%E4%BB%B6 或方块 -
autoindex_localtime on;—— 否则时间默认是 UTC,比本地晚 8 小时 -
autoindex_exact_size off;—— 否则文件大小显示为字节,不直观(如 15243216 而非 14.5M)
进阶可选:XSLT 转换 XML 输出(适合定制强、有 XML 处理能力)
若你熟悉 XSLT,可让 autoindex 输出 XML,再用 xslt_stylesheet 渲染成自定义 HTML 页面。好处是结构完全可控,支持长文件名省略、时区偏移计算等。
- 配置:
autoindex_format xml;+xslt_stylesheet /path/to/autoindex.xslt cpath="$uri"; - XSLT 文件里用
date:add等 EXSLT 函数处理时间,TIMEDIFF变量控制时区偏移(如'PT8H') - 注意:Nginx 需编译时启用
--with-http_xslt_module,且只支持 XSLT 1.0











