Nginx配置目录浏览及美化

环境依赖

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

模块说明

配置目录浏览

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]

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

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

2. 编译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

3. 下载主题

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

4. 修改配置

   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/;
   }
   }
    }

5. 重载配置

   nginx -t && nginx -s reload

   效果预览