默认清下，我们直接开启autoindex就可以启动nginx的浏览目录功能，但是默认的页面比较丑。接下来我们通过fancyindex模块来美化浏览目录功能
首先我们需要先下载这个模块
wget -O fancyindex.zip https://github.com/aperezdc/ngx-fancyindex/releases/download/v0.5.2/ngx-fancyindex-0.5.2.tar.xz #为了防止下载地址失效，下面地址永久保留 wget -O fancyindex.zip https://d.frps.cn/file/tools/nginx/model/index/ngx-fancyindex-0.5.2.tar.xz
下载nginx
[root@abcdocker ~]# wget https://nginx.org/download/nginx-1.24.0.tar.gz #备份下载地址 wget https://d.frps.cn/file/tools/nginx/model/index/nginx-1.24.0.tar.gz
我们需要解压fancyindex模块
unzip fancyindex.zip tar xf nginx-1.24.0.tar.gz
软件包依赖问题,通过下面的命令解决99%软件包问题
yum -y install gcc gcc-c++ make autoconf libtool-ltdl-devel gd-devel freetype-devel libxml2-devel libjpeg-devel libpng-devel openssh-clients openssl-devel curl-devel bison patch libmcrypt-devel libmhash-devel ncurses-devel binutils compat-libstdc++-33 elfutils-libelf elfutils-libelf-devel glibc glibc-common glibc-devel libgcj libtiff pam-devel libicu libicu-devel gettext-devel libaio-devel libaio libgcc libstdc++ libstdc++-devel unixODBC unixODBC-devel numactl-devel glibc-headers sudo bzip2 mlocate flex lrzsz sysstat lsof setuptool system-config-network-tui system-config-firewall-tui ntsysv ntp pv lz4 dos2unix unix2dos rsync dstat iotop innotop mytop telnet iftop expect cmake nc gnuplot screen xorg-x11-utils xorg-x11-xinit rdate bc expat-devel compat-expat1 tcpdump sysstat man nmap curl lrzsz elinks finger bind-utils traceroute mtr ntpdate zip unzip vim wget net-tools
编译nginx
[root@web01 ~]# cd nginx-1.24.0 ./configure --prefix=/opt/nginx --with-http_ssl_module --with-http_stub_status_module --with-stream --add-module=/root/ngx-fancyindex-0.5.2 #fancyindex包 #编译 make && make install
验证模块
[root@abcdocker nginx-1.24.0]# /opt/nginx/sbin/nginx -V nginx version: nginx/1.24.0 built by gcc 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC) built with OpenSSL 1.0.2k-fips 26 Jan 2017 TLS SNI support enabled configure arguments: --prefix=/opt/nginx --with-http_ssl_module --with-http_stub_status_module --with-stream --add-module=/root/ngx-fancyindex-0.5.2
配置目录浏览
创建配置文件路径
[root@abcdocker ~]# mkdir /opt/nginx/conf/conf.d/
创建下载页数据目录
[root@abcdocker ~]# mkdir /data/nginx
2.修改主配置文件
[root@abcdocker ~]# vim /opt/nginx/conf/nginx.conf
http {
......
include /opt/nginx/conf/conf.d/*.conf;
......
}
3.编写目录索引配置文件
[root@abcdocker ~]# cd /opt/nginx/conf/conf.d/
[root@abcdocker conf.d]# vim down.conf
server {
listen 8888;
server_name localhost;
location /ftp {
alias /data/nginx;
charset utf-8,gbk;
fancyindex on; # 使用fancyindex
fancyindex_exact_size off; # 不显示精确大小
fancyindex_time_format "%Y-%m-%d %H:%M";# 文件日期
fancyindex_localtime on;# 使用用户本地时间
}
fancyindex其它功能
fancyindex_default_sort name; # 排序规则，默认name，可选项name、size、date、name_desc、size_des、date_desc fancyindex_directories_first on; # 是否将目录分组在一起并在所有常规文件之前对它们进行排序，默认启用 fancyindex_css_href ""; # 插入指向CSS样式表的链接 fancyindex_exact_size off; # 显示精确字节大小还是显示友好可读的大小 fancyindex_name_length 500; # 定义最大文件名长度限制（以字节为单位） fancyindex_footer ""; # 定义在目录列表的底部插入哪个文件 fancyindex_header ""; # 定义在目录列表的顶部插入哪个文件 fancyindex_show_path on; # 在标题之后是否输出路径和结束</ h1>标记，默认启用 fancyindex_show_dotfiles on; # 是否列出以点开头的文件，默认关闭 fancyindex_ignore ""; # 指定不显示的文件名列表 fancyindex_hide_symlinks off; # 是否隐藏符号链接，默认关闭 fancyindex_hide_parent_dir on; # 是否隐藏父目录，默认关闭 fancyindex_localtime on; # 时间显示为本地时间，默认关闭，显示为格林尼治标准时间
目前访问nginx 下载页面还没有进行美化，效果图如下
自定义主题
https://github.com/alehaa/nginx-fancyindex-flat-theme
基于Bootstrap 4和FontAwesome的简单扁平主题
配置
# 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;
location /theme/{
alias /srv/www/fileserver/theme/;
}
https://github.com/TheInsomniac/Nginx-Fancyindex-Theme
使用自定义的页眉和页脚
https://github.com/Naereen/Nginx-Fancyindex-Theme
使用自定义页眉和页脚，页眉包含搜索字段，可使用JavaScript按文件名过滤
配置
fancyindex on; fancyindex_localtime on; fancyindex_exact_size off; # Specify the path to the header.html and foother.html files, that are server-wise, # ie served from root of the website. Remove the leading '/' otherwise. fancyindex_header "/Nginx-Fancyindex-Theme-light/header.html"; fancyindex_footer "/Nginx-Fancyindex-Theme-light/footer.html"; # Ignored files will not show up in the directory listing, but will still be public. fancyindex_ignore "examplefile.html"; # Making sure folder where these files are do not show up in the listing. fancyindex_ignore "Nginx-Fancyindex-Theme-light";
https://github.com/fraoustin/Nginx-Fancyindex-Theme
使用Material Design元素的响应主题
配置
server {
listen 80 default_server;
client_max_body_size 1G;
location / {
root /<path_nginx_root>;
fancyindex on;
fancyindex_localtime on;
fancyindex_name_length 255; # Maximum file name length in bytes, change as you like.
# theme
fancyindex_header "/fancyindex/header.html";
fancyindex_footer "/fancyindex/footer.html";
fancyindex_ignore "fancyindex";
auth_basic "Access restricted";
auth_basic_user_file /etc/nginx/.htpasswd;
}
}
相关文章：
- [Nginx] – 性能优化 – 配置文件优化 [一]
- 阿里云SLB场景使用Nginx封用户真实IP
- Nginx upstream_check_module模块实现后端节点健康检查功能
- ngx_http_substitutions_filter_module 模块替换正文内容和URL
