Nginx文件浏览目录配置及美化

一、开启目录浏览功能

Nginx 提供了相应的 ngx_http_autoindex_module 模块
该模块有以下几个命令：

命令	默认值	值域	作用域	EG
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时有效

二、浏览目录基本配置

根据上面的命令，一个简单的Nginx浏览目录的配置如下：

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

三、目录浏览美化

我们使用开源的Fancy Index来美化页面：Github

在美化之前，需要安装Nginx FancyIndex模块。安装模块步骤如下。

1、查看完整编译参数

查看完整的编译参数 nginx -V 如下：

nginx version: nginx/1.13.8
built by clang 9.0.0 (clang-900.0.39.2)
built with OpenSSL 1.1.0f  25 May 2017
TLS SNI support enabled
configure arguments: --prefix=/usr/local/nginx --with-http_ssl_module --with-pcre --sbin-path=/usr/local/nginx/bin/nginx --with-cc-opt='-I/usr/local/opt/pcre/include -I/usr/local/opt/openssl@1.1/include' --with-ld-opt='-L/usr/local/opt/pcre/lib -L/usr/local/opt/openssl@1.1/lib' --conf-path=/usr/local/etc/nginx/nginx.conf --pid-path=/usr/local/var/run/nginx.pid --lock-path=/usr/local/var/run/nginx.lock --http-client-body-temp-path=/usr/local/var/run/nginx/client_body_temp --http-proxy-temp-path=/usr/local/var/run/nginx/proxy_temp --http-fastcgi-temp-path=/usr/local/var/run/nginx/fastcgi_temp --http-uwsgi-temp-path=/usr/local/var/run/nginx/uwsgi_temp --http-scgi-temp-path=/usr/local/var/run/nginx/scgi_temp --http-log-path=/usr/local/var/log/nginx/access.log --error-log-path=/usr/local/var/log/nginx/error.log --with-http_gzip_static_module --with-http_v2_module

2、动态编译添加Nginx模块

1）非宝塔用户

在GitHub下载最新源码：ngx-fancyindex

Nginx-Index源码下载下来后，解压，放到nginx源码目录 /usr/local/nginx 中，重命名为 ngx-fancyindex ，nginx -V 参数添加 --add-module=ngx-fancyindex 执行以下代码，编译：

./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-pcre --sbin-path=/usr/local/nginx/bin/nginx --with-cc-opt='-I/usr/local/opt/pcre/include -I/usr/local/opt/openssl@1.1/include' --with-ld-opt='-L/usr/local/opt/pcre/lib -L/usr/local/opt/openssl@1.1/lib' --conf-path=/usr/local/etc/nginx/nginx.conf --pid-path=/usr/local/var/run/nginx.pid --lock-path=/usr/local/var/run/nginx.lock --http-client-body-temp-path=/usr/local/var/run/nginx/client_body_temp --http-proxy-temp-path=/usr/local/var/run/nginx/proxy_temp --http-fastcgi-temp-path=/usr/local/var/run/nginx/fastcgi_temp --http-uwsgi-temp-path=/usr/local/var/run/nginx/uwsgi_temp --http-scgi-temp-path=/usr/local/var/run/nginx/scgi_temp --http-log-path=/usr/local/var/log/nginx/access.log --error-log-path=/usr/local/var/log/nginx/error.log --with-http_gzip_static_module --with-http_v2_module --add-module=ngx-fancyindex

make 这里不要 make install！！

2）宝塔用户

在GitHub下载最新源码：ngx-fancyindex

Nginx-Index源码下载下来后，解压，放到nginx源码目录 /usr/local/src 中，重命名为 ngx-fancyindex

编辑nginx的安装脚本

vi /www/server/panel/install/nginx.sh

找到267行（根据自己安装的版本查找 ./configure 字段所在行数），在 ./configure 后面添加

--add-module=/usr/local/src/ngx-fancyindex

:wq 保存退出，执行安装命令（注意自己的nginx版本号）

sh /www/server/panel/install/nginx.sh install 2.3.3

安装完成输入 nginx -V 检查编译参数，已经出现 --add-module=/usr/local/src/ngx-fancyindex 参数

3、选择Fancy Index主题

在Github里面找到了两个开源的主题，分别是：

• https://github.com/Naereen/Nginx-Fancyindex-Theme
• https://github.com/TheInsomniac/Nginx-Fancyindex-Theme

选一个自己喜欢的就好了，这里我选的是第一个。

4、Fancy Index 配置

进入Nginx安装的web目录（可通过 nginx -V 查看，--prefix=/www/server/nginx 就是安装目录）

下载主题到当前目录（我选择第一个），也可以手动下载上传到此目录：

git clone https://github.com/lanffy/Nginx-Fancyindex-Theme.git

在站点对应的 nginx location 模块中添加 Fancy Index 配置，如下：

location /{
    include /www/server/nginx/Nginx-Fancyindex-Theme/fancyindex.conf; # 目录美化配置
    root /www/wwwroot/cdn.ikunl.com/; #指定目录所在路径
    autoindex on; #开启目录浏览
    autoindex_format html; #以html风格将目录展示在浏览器中
    autoindex_exact_size off; #切换为 off 后，以可读的方式显示文件大小，单位为 KB、MB 或者 GB
    autoindex_localtime on; #以服务器的文件时间作为显示的时间
    charset utf-8,gbk; #展示中文文件名，防止乱码
}

将主题文件移动到数据存储根目录 Nginx-Fancyindex-Theme-light，重启Nginx即可

到这一步就完成配置了，该主题有两种风格，一种是light风格，一种是dark风格，风格在：

/www/server/nginx/Nginx-Fancyindex-Theme/fancyindex.conf

配置文件中进行修改，修改后将对应的风格文件移动到数据站点根目录

5、配置文件注释

fancyindex on;#开启索引
fancyindex_localtime on;#使用本地时间
fancyindex_exact_size off;#显示文件大小
fancyindex_default_sort "name_desc";#默认排序方式（以上传时间倒序）
fancyindex_header "/Nginx-Fancyindex-Theme-light/header.html";#把当前路径下的header.html内容作为顶部
fancyindex_footer "/Nginx-Fancyindex-Theme-light/footer.html";#把当前路径下的footer.html内容作为底部
fancyindex_ignore "examplefile.html"; #被忽略的文件不会显示在目录列表中，但仍然是公共文件。
fancyindex_ignore "Nginx-Fancyindex-Theme-light";
fancyindex_ignore "favicon.ico";#确保文件所在的文件夹不会出现在列表中。
fancyindex_name_length 255; #以字节为单位的最大文件名长度，可以随意更改。