关于nginx:Nginx浏览目录配置及美化

在我的项目中有一个性能须要在浏览器页面中浏览服务器的目录。服务器应用 Nginx，而 Nginx 提供了相应的 ngx_http_autoindex_module 模块，该模块提供了咱们想要的性能。

Nginx ngx_http_autoindex_module 模块

该模块有以下几个命令：

浏览目录根本配置

依据下面的命令，一个简略的 Nginx 浏览目录的配置如下：

location /download
{
    root /home/map/www/; #指定目录所在门路
    autoindex on; #开启目录浏览
    autoindex_format html; #以 html 格调将目录展现在浏览器中
    autoindex_exact_size off; #切换为 off 后，以可读的形式显示文件大小，单位为 KB、MB 或者 GB
    autoindex_localtime on; #以服务器的文件工夫作为显示的工夫
} 

能够看到页面中的展现信息和配置想要的统一，但还有个问题是中文文件名显示的时候乱码。

中文文件名乱码

要解决下面的问题，只须要增加如下配置即可：

charset utf-8,gbk; #展现中文文件名 

残缺配置如下：

location /download
{
    root /home/map/www/; #指定目录所在门路
    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 模块。装置模块步骤如下。

查看 Nginx 以后编译了哪些模块

要查看 Nginx 编译了哪些模块，执行以下命令：2>&1 nginx -V | tr '''n'|grep module，如下：

查看残缺的编译参数：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

动静编译增加 Nginx 模块

1. 在 GitHub 下载最新源码：ngx-fancyindex
2. 源码下载下来后，解压，放到 nginx 源码目录 (/usr/local/nginx) 中, 执行上面的代码，编译：

   ./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-0.4.2

3. make <font color=”red”> 这里不要 make install！！！</font>
4. 进入 nginx 源码目录下的 objs 目录，执行2>&1 ./nginx -V | tr '''n'|grep fan
5. 用 objs 目录下的 nginx 文件替换 /usr/bin 上面的 nginx 即可

抉择 Fancy Index 主题

在 Github 外面找到了两个开源的主题，别离是:

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

大家选一个本人喜爱的就好了，这里我选的是第一个。

然而在理论应用过程中，第一个代码有一些问题，我做了一些批改，想要间接能够应用的，能够用这个：https://github.com/lanffy/Nginx-Fancyindex-Theme

Fancy Index 配置

1. 进入 Nginx 装置的 web 目录，执行nginx -V，输入configure arguments: --prefix=/usr/local/nginx，就是这个目录
2. git clone https://github.com/lanffy/Nginx-Fancyindex-Theme.git

3. 在 nginx location 模块中增加 Fancy Index 配置，如下：

   location /download
   {

   include /usr/local/nginx/html/Nginx-Fancyindex-Theme/fancyindex.conf; # 目录丑化配置
   root /home/map/www/; #指定目录所在门路
   autoindex on; #开启目录浏览
   autoindex_format html; #以 html 格调将目录展现在浏览器中
   autoindex_exact_size off; #切换为 off 后，以可读的形式显示文件大小，单位为 KB、MB 或者 GB
   autoindex_localtime on; #以服务器的文件工夫作为显示的工夫
   charset utf-8,gbk; #展现中文文件名

   }

4. 重启 Nginx 即可

到这一步就实现配置了，最终页面展现如下：

该主题有两种格调，下面一种是 light 格调，上面的是 dark 格调：

格调在 /usr/local/nginx/html/Nginx-Fancyindex-Theme/fancyindex.conf; 配置文件中进行批改。

参考资料

1. 配置 Nginx 的目录浏览性能
2. Nginx-Fancyindex-Theme