Nginx配置目录浏览及美化

March 26, 2025

环境依赖

Module：[ngx_http_autoindex_module][1]
Nginx Version： Openresty 1.27.1.1

模块说明

命令	默认值	值	作用域	说明
autoindex	off	on：开启目录浏览； off：关闭目录浏览	http, server, location	`autoindex on;`打开目录浏览功能
autoindex_format	html	html、xml、json、jsonp 分别用这几个风格展示目录	http, server, location	`autoindex_format html;` 以网页的风格展示目录内容。该属性在1.7.9及以上适用
autoindex_exact_size	on	on：展示文件字节数； off：以可读的方式显示文件大小	http, server, location	`autoindex_exact_size off;` 以可读的方式显示文件大小，单位为 KB、MB 或者 GB，autoindex_format为html时有效
autoindex_localtime	off	on、off：是否以服务器的文件时间作为显示的时间	http, server, location	`autoindex_localtime on;` 以服务器的文件时间作为显示的时间,autoindex_format为html时有效

配置目录浏览

location /
{
    root /home/wwwroot/download/; #指定目录所在路径
    autoindex on; #开启目录浏览
    autoindex_format html; #以html风格将目录展示在浏览器中
    autoindex_exact_size off; #切换为 off 后，以可读的方式显示文件大小，单位为 KB、MB 或者 GB
    autoindex_localtime on; #以服务器的文件时间作为显示的时间
    charset utf-8,gbk; #展示中文文件名
}

进阶美化

Nginx自身提供的目录浏览的UI太丑了，我们可以借助三方模块[ngx-fancyindex]来美化一下。

ngx-fancyindex: [ngx-fancyindex]

查看当掐nginx编译了那些模块

2>&1 nginx -V | tr ' ' '\n'|grep module
或者
nginx -V

编译fancyindex模块

./configure --user=www --group=www --prefix=/usr/local/nginx ... {其他模块} --add-module=/data/software/ngx-fancyindex 
make # 只编译不安装
/usr/local/openresty/nginx/sbin/nginx -s stop
mv /usr/local/openresty/nginx/sbin/nginx /usr/local/openresty/nginx/sbin/nginx.bak
cp objs/nginx /usr/local/openresty/nginx/sbin/
chown www:www /usr/local/openresty/nginx/sbin/nginx
nginx -t && nginx -s reload

下载主题
主题一：使用自定义的页眉和页脚主题二：使用自定义页眉和页脚，页眉包含搜索字段，可使用JavaScript按文件名过滤主题三：使用Material Design元素的响应主题主题四：基于Bootstrap 4和FontAwesome的简单扁平主题
修改配置

location / {

       # Fancyindex
       fancyindex             on;
       fancyindex_header      "/theme/header.html";
       fancyindex_footer      "/theme/footer.html";
       fancyindex_show_path   off;
       fancyindex_name_length 255;
       fancyindex_exact_size  off;
       fancyindex_localtime   on;
       fancyindex_time_format "%Y-%b-%d %H:%M";  # 显示的时间格式，默认为%Y-%b-%d %H:%M

location /theme/{
    alias /home/wwwroot/fancyindex/theme/;
}
    }
 }

重载配置
```
nginx -t && nginx -s reload
```

效果预览

nginx配置目录浏览-fancyindex