当前位置:首页-文章-教程分享-正文

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

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

一、开启目录浏览功能

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

命令默认值值域作用域EG
autoindexoff;on:开启目录浏览;
off:关闭目录浏览
http, server, locationautoindex on; 打开目录浏览功能
autoindex_formathtml;html、xml、json、jsonp 分别用这几个风格展示目录http, server, locationautoindex_format html; 以网页的风格展示目录内容。该属性在1.7.9及以上适用
autoindex_exact_sizeon;on:展示文件字节数;
off:以可读的方式显示文件大小;
http, server, locationautoindex_exact_size off; 以可读的方式显示文件大小,单位为 KB、MB 或者 GB,autoindex_format为html时有效
autoindex_localtimeoff;on、off:是否以服务器的文件时间作为显示的时间http, server, locationautoindex_localtime on; 以服务器的文件时间作为显示的时间,autoindex_format为html时有效
目录浏览功能表

二、浏览目录基本配置

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

location /{
    root /www/wwwroot/cdn.iox7.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里面找到了两个开源的主题,分别是:

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

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.iox7.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; #以字节为单位的最大文件名长度,可以随意更改。
本文原创,作者:鸭鸭吖,其版权均为技术园所有。
如需转载,请注明出处:https://iox7.com/17.html