在我的项目中有一个性能须要在浏览器页面中浏览服务器的目录。服务器应用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模块
在GitHub下载最新源码:ngx-fancyindex
源码下载下来后,解压,放到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
make 这里不要make install!!!
进入nginx源码目录下的objs目录,执行2>&1 ./nginx -V | tr ' ' 'n'|grep fan
用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 配置
进入Nginx装置的web目录,执行nginx -V,输入configure arguments: --prefix=/usr/local/nginx,就是这个目录
git clone https://github.com/lanffy/Nginx-Fancyindex-Theme.git
在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; #展现中文文件名
}
重启Nginx即可
到这一步就实现配置了,最终页面展现如下:
该主题有两种格调,下面一种是light格调,上面的是dark格调:
格调在/usr/local/nginx/html/Nginx-Fancyindex-Theme/fancyindex.conf;配置文件中进行批改。
参考资料
配置 Nginx 的目录浏览性能
Nginx-Fancyindex-Theme