Nginx使用fancyindex模块美化Index下载页

释放双眼,带上耳机,听听看~!
🤖 由 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 下载页面还没有进行美化,效果图如下

Nginx使用fancyindex模块美化Index下载页

自定义主题

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/;
}

Nginx使用fancyindex模块美化Index下载页

https://github.com/TheInsomniac/Nginx-Fancyindex-Theme
使用自定义的页眉和页脚
Nginx使用fancyindex模块美化Index下载页
Nginx使用fancyindex模块美化Index下载页
Nginx使用fancyindex模块美化Index下载页

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";

Nginx使用fancyindex模块美化Index下载页

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使用fancyindex模块美化Index下载页
Nginx使用fancyindex模块美化Index下载页

给TA打赏
共{{data.count}}人
人已打赏
NGINX

Nginx Ngx_http_proxy_connect_module模块实现SSL正向代理

2023-4-14 14:35:48

NGINX

Nginx宝塔反向代理OpenAI接口

2023-6-1 14:41:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索