教程 Fancyindex 美丽的autoindex

frankniubi · 2023/04/05

很多朋友都觉得AutoIndex实在是过于丑陋, 看不下去了怎么办?
今天给大家推荐 FancyIndex!!!
项目地址: https://github.com/aperezdc/ngx-fancyindex

在美化之前，需要安装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/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即可

adosazufaho · 2024/02/11

教程 Fancyindex 美丽的autoindex

frankniubi

大佬在此

adosazufaho

New member