1 nginx 安装 可以参考:Nginx(openresty) 通过lua结合Web前端 实现图片，文件，视频等静态资源 访问权限验证，进行鉴权 ，提高安全性-CSDN博客

2  开启目录浏览

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

3 查看

 

4 目录浏览美化,采用第三方插件ngx-fancyindex

#下载，解压ngx-fancyindex
wget https://github.com/aperezdc/ngx-fancyindex/releases/download/v0.5.2/ngx-fancyindex-0.5.2.tar.xz
tar xvf  ngx-fancyindex-0.5.2.tar.xz

5 nginx 重新编译

#编译
./configure --prefix=/usr/local/openresty  --user=www --group=www  --with-http_gzip_static_module --with-threads --with-http_ssl_module --with-http_image_filter_module --with-debug --with-http_stub_status_module --with-openssl=../openssl-1.0.2j --with-http_v2_module --with-stream --add-module=../ngx-fancyindex-0.5.2
make
#备份和升级
mv /usr/local/openresty/nginx/sbin/nginx /usr/local/openresty/nginx/sbin/nginx_0530
cp  ./build/nginx-1.1.9/objs/nginx  /usr/local/openresty/nginx/sbin/

 6 下载Nginx-Fancyindex-Theme主题

主题下载

#下载，解压
ll /usr/local/openresty/nginx/html/Nginx-Fancyindex-Theme-light/
total 216
-rw-r--r-- 1 root root  1088 Jan 12  2021 addNginxFancyIndexForm.js
-rw-r--r-- 1 root root   688 Jan 12  2021 fancyindex.conf
-rw-r--r-- 1 root root  1982 Jan 12  2021 footer.html
-rw-r--r-- 1 root root   707 Jan 12  2021 header.html
-rw-r--r-- 1 root root   114 Jan 12  2021 HEADER.md
-rw-r--r-- 1 root root 83667 Jan 12  2021 jquery.min.js
-rw-r--r-- 1 root root   117 Jan 12  2021 README.md
-rw-r--r-- 1 root root 99095 Jan 12  2021 showdown.min.js
-rw-r--r-- 1 root root  4417 Jan 12  2021 styles.css

7 nginx 配置修改

location /file
{
    include /usr/local/openresty/nginx/html/Nginx-Fancyindex-Theme-light/fancyindex.conf;
    alias /data/logs/online/log/; #指定目录所在路径
    charset utf-8,gbk; #显示中文文件名
}

#效果如下