nginx 开启目录浏览功能及主题美化

1.开启目录浏览功能

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

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

1.1 浏览目录基本配置

在 http 下添加参数即可

http {
    autoindex on;   #开启nginx目录浏览功能  
    autoindex_exact_size off;   #文件大小从KB开始显示  
    autoindex_localtime on;   #显示文件修改时间为服务器本地时间
    charset utf-8,gbk;     #防止中文目录出现乱码
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

1.2 使配置生效

重新加载 nginx 配置文件即可

nginx -s reload

注意：ubuntu 下的 nginx 配置文件有两个，一个是 /etc/nginx/nginx.conf，还有一个是 /etc/nginx/conf.d/default.conf

1.3 补充

若只想部分目录提供文件浏览功能，则：

location /downloads {
    autoindex on;   #开启nginx目录浏览功能
    autoindex_exact_size off;   #文件大小从KB开始显示
    autoindex_localtime on;   #显示文件修改时间为服务器本地时间
    charset utf-8,gbk;  #设置文件名编码，防止乱码
    root /usr/local/src; #文件目录
}

附目录结构：

注意：上面配置中的 root 一项可以改写为：

 alias /usr/local/src/downloads;

关于 alias 和 root 的区别参看：https://leif.fun/articles/2019/09/25/1569374756088.html

2.主题美化

nginx 开启文件浏览功能之后是这个样子的

感觉很丑有没有，而且字体很小，我们使用开源的 FancyIndex 来美化页面，然后默认安装的 nginx 是不支持 fancyindex 参数的，故需要重新编译安装 nginx。

2.1 查看编译参数

先弄清楚 nginx 已经编译了哪些模块，使用 2>&1 nginx -V | tr ' ' '\n'|grep module 命令查看：

[root@centos ~]# 2>&1 nginx -V | tr ' ' '\n'|grep module
--modules-path=/usr/lib64/nginx/modules
--with-http_auth_request_module
--with-http_ssl_module
--with-http_v2_module
--with-http_realip_module
--with-http_addition_module
--with-http_xslt_module=dynamic
--with-http_image_filter_module=dynamic
--with-http_geoip_module=dynamic
--with-http_sub_module
--with-http_dav_module
--with-http_flv_module
--with-http_mp4_module
--with-http_gunzip_module
--with-http_gzip_static_module
--with-http_random_index_module
--with-http_secure_link_module
--with-http_degradation_module
--with-http_slice_module
--with-http_stub_status_module
--with-http_perl_module=dynamic
--with-mail_ssl_module
--with-stream_ssl_module
--with-google_perftools_module
--add-module=ngx-fancyindex-0.4.3

查看完整的编译参数：nginx -V:

[root@entos ~]# nginx -V
nginx version: nginx/1.17.4
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-39) (GCC)
built with OpenSSL 1.0.2k-fips  26 Jan 2017
TLS SNI support enabled
configure arguments: --prefix=/usr/share/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --http-client-body-temp-path=/var/lib/nginx/tmp/client_body --http-proxy-temp-path=/var/lib/nginx/tmp/proxy --http-fastcgi-temp-path=/var/lib/nginx/tmp/fastcgi --http-uwsgi-temp-path=/var/lib/nginx/tmp/uwsgi --http-scgi-temp-path=/var/lib/nginx/tmp/scgi --pid-path=/run/nginx.pid --lock-path=/run/lock/subsys/nginx --user=nginx --group=nginx --with-file-aio --with-ipv6 --with-http_auth_request_module --with-http_ssl_module --with-http_v2_module --with-http_realip_module --with-http_addition_module --with-http_xslt_module=dynamic --with-http_image_filter_module=dynamic --with-http_geoip_module=dynamic --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_random_index_module --with-http_secure_link_module --with-http_degradation_module --with-http_slice_module --with-http_stub_status_module --with-http_perl_module=dynamic --with-mail=dynamic --with-mail_ssl_module --with-pcre --with-pcre-jit --with-stream=dynamic --with-stream_ssl_module --with-google_perftools_module --with-debug --with-cc-opt='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector-strong --param=ssp-buffer-size=4 -grecord-gcc-switches -specs=/usr/lib/rpm/redhat/redhat-hardened-cc1 -m64 -mtune=generic' --with-ld-opt='-Wl,-z,relro -specs=/usr/lib/rpm/redhat/redhat-hardened-ld -Wl,-E'

2.2 动态编译添加 Nginx 模块

1.下载最新 nginx 源码：nginx-download

wget https://nginx.org/download/nginx-1.17.4.tar.gz

2.在 github 上下载源码：ngx-fancyindex

wget https://github.com/aperezdc/ngx-fancyindex/archive/v0.4.3.zip

3.将 nginx 源码压缩包解压（目录随意）,然后将 fancyindex 的源码压缩包解压到 nginx 的源码目录里

4.到这里先暂时不要 make，先解决一下依赖问题(依赖包非常多，我当时也是一步一步找了好久)

yum -y install redhat-rpm-config pcre-devel zlib zlib-devel openssl openssl-devel perl-devel perl-ExtUtils-Embed gd-devel GeoIP GeoIP-devel GeoIP-data libxslt-devel gperftools

5.cd 进 nginx 源码目录，准备编译参数。因为上一步执行 nginx -V 的时候得到了众多参数，这次需要在上面的参数基础上新增一个 fancyindex 的参数，添加到末尾即可（实际上就是添加的目录文件夹）

./configure --prefix=/usr/share/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --http-client-body-temp-path=/var/lib/nginx/tmp/client_body --http-proxy-temp-path=/var/lib/nginx/tmp/proxy --http-fastcgi-temp-path=/var/lib/nginx/tmp/fastcgi --http-uwsgi-temp-path=/var/lib/nginx/tmp/uwsgi --http-scgi-temp-path=/var/lib/nginx/tmp/scgi --pid-path=/run/nginx.pid --lock-path=/run/lock/subsys/nginx --user=nginx --group=nginx --with-file-aio --with-ipv6 --with-http_auth_request_module --with-http_ssl_module --with-http_v2_module --with-http_realip_module --with-http_addition_module --with-http_xslt_module=dynamic --with-http_image_filter_module=dynamic --with-http_geoip_module=dynamic --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_random_index_module --with-http_secure_link_module --with-http_degradation_module --with-http_slice_module --with-http_stub_status_module --with-http_perl_module=dynamic --with-mail=dynamic --with-mail_ssl_module --with-pcre --with-pcre-jit --with-stream=dynamic --with-stream_ssl_module --with-google_perftools_module --with-debug --with-cc-opt='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector-strong --param=ssp-buffer-size=4 -grecord-gcc-switches -specs=/usr/lib/rpm/redhat/redhat-hardened-cc1 -m64 -mtune=generic' --with-ld-opt='-Wl,-z,relro -specs=/usr/lib/rpm/redhat/redhat-hardened-ld -Wl,-E' --add-module=ngx-fancyindex-0.4.3

注意:若你的 fancyindex 是直接用 git clone 的，则最后的参数不会有 -0.4.3，直接 clone 是不会有版本号的。

6.编译

make

7.安装

make install

8.停止正在运行的 nginx 服务

systemctl stop nginx

9.进入 nginx 源码目录下的 objs 目录，执行 2>&1 ./nginx -V | tr ' ' '\n'|grep fan

[root@centos objs]# 2>&1 ./nginx -V | tr ' ' '\n'|grep fan
--add-module=ngx-fancyindex-0.4.3

10.查看 nginx 的可执行文件路径

[root@centos nginx-1.17.4]# which nginx
/usr/sbin/nginx

11.用 objs 目录下的 nginx 文件替换 /usr/sbin 下面的 nginx 即可

[root@centos objs]# cp nginx /usr/sbin/nginx

2.3 Fancy Index 配置

1.不使用主题
走到这一步，你已经成功一大半了，若你不想使用第三方 fancyindex 主题，可以直接在 nginx 中这样设置：

        location /downloads {
            fancyindex on;
            fancyindex_localtime on;
            fancyindex_exact_size off;
#            autoindex on;   #开启nginx目录浏览功能
#            autoindex_exact_size off;   #文件大小从KB开始显示
#            autoindex_localtime on;   #显示文件修改时间为服务器本地时间
            charset utf-8,gbk;  #设置文件名编码，防止乱码
	    alias /usr/local/src/downloads;
        }

注意：安装 fancyindex 过后是可以直接替换掉 autoindex 配置的，它们的功能一样，只不过是主题样式不同而已。

重启 nginx(上一步因为替换 nginx 可执行文件将 nginx 服务停止了)

systemctl start nginx

效果如下：

细心的同学可能会发现，由于 Linux 这本书名字太长，导致了文件名出现截断现象，原因是 Ngx-FancyIndex 将文件名截断为 50 个字符减去 3，然后在截断的名称后附加了 ..> 符号，解决办法是指定最大文件名长度:

fancyindex_name_length 500;

效果：

2.使用主题
下载主题：

git clone  https://github.com/TheInsomniac/Nginx-Fancyindex-Theme.git

将下载好的主题复制到 /usr/share/nginx/html 中并重命名为 fancyindex

cp -r Nginx-Fancyindex-Theme /usr/share/nginx/html/fancyindex

3.配置 nginx
方法一：

        location /downloads {
            fancyindex on;
            fancyindex_localtime on;
            fancyindex_exact_size off;
            fancyindex_header "/usr/share/nginx/html/fancyindex/header.html";
            fancyindex_footer "/usr/share/nginx/html/fancyindex/footer.html";
            fancyindex_ignore "fancyindex";
            charset utf-8,gbk;  #设置文件名编码，防止乱码
	    alias /usr/local/src/downloads;
        }

方法二：

        location /downloads {
            include /usr/share/nginx/html/Nginx-Fancyindex-Theme/fancyindex.conf;
            charset utf-8,gbk;  #设置文件名编码，防止乱码
	    alias /usr/local/src/downloads;
        }

fancyindex.conf 中的配置包含了方法一中的配置

# Include in location directive
  fancyindex on;
  fancyindex_localtime on; #on for local time zone. off for GMT
  fancyindex_exact_size off; #off for human-readable. on for exact size in bytes
  fancyindex_header "/fancyindex/header.html";
  fancyindex_footer "/fancyindex/footer.html";
  fancyindex_ignore "fancyindex"; #ignore this directory when showing list
# end include

4.重启 nginx

nginx -s reload

5.效果：

参考：
Nginx 浏览目录配置及美化
 配置 Nginx 的目录浏览功能
 Nginx-Fancyindex-Theme

3.注意点

3.1 ubuntu 下 nginx 的安装

ubuntu 下 nginx 请下载安装 https://leif.fun/downloads/tools/linux/nginx_1.16.1-1_xenial_amd64.deb

安装完成后，配置文件路径与 centos 下的有些许不同，centos 的主要配置文件在 /etc/nginx/nginx.conf 下，用户也可以在 /etc/nginx/conf.d 下新建 端口号.conf 文件，使用 nginx -c /etc/nginx/nginx.conf 命令启动 nginx,刷新配置使用 nginx -s reload

而 ubuntu 在安装完 nginx 后，除了 /etc/nginx/nginx.conf 主配置文件外，还会在 conf.d 下自动生成一个 default.conf 文件，内容默认为 80 的配置

我们只需要将配置写到 default.conf 这个文件中即可，之后使用 systemctl start nginx 启动 nginx 即可，刷新配置也使用 nginx -s reload

3.2 ubuntu 下 nginx 编译

上述 centos 下 nginx 编译需要安装众多依赖环境，而在 ubuntu 下貌似无需安装（我编译的时候没有提示依赖问题，若有问题的同学请在下方留言，我会补充进去）

3.3 ubuntu 下 nginx 配置

nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

default.conf

server {
    listen       80;

    location / {
        root   /home/medcaptain/sketch;
        fancyindex on;
        fancyindex_localtime on;
        fancyindex_exact_size off;
        charset utf-8,gbk;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

nginx 开启目录浏览功能及主题美化

1.开启目录浏览功能

1.1 浏览目录基本配置

1.2 使配置生效

1.3 补充

2.主题美化

2.1 查看编译参数

2.2 动态编译添加 Nginx 模块

2.3 Fancy Index 配置

3.注意点

3.1 ubuntu 下 nginx 的安装

3.2 ubuntu 下 nginx 编译

3.3 ubuntu 下 nginx 配置

相关帖子

负载均衡 [Nginx]

nginx 配置 https 重定向

ubuntu 20.04 自定义编译 Nginx 问题以及解决方法

Nginx 限速三剑客基础使用

CenterOS 部署 Solo

Docker 安装 Nginx 容器 - 完整详细版

使用 Nginx 做代理服务器实现上传限速

欢迎来到这里！