释放双眼,带上耳机,听听看~!
🤖 由 ChatGPT 生成的文章摘要
默认清下,我们直接开启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;
}
}