Nginx文件服务器页面定制,Nginx 文件服务器页面美化，按时间倒叙

一、下载相关文件

1、nginx 源码

image.png

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

tar -zxvf nginx-1.8.1.tar.gz

image.png

2、下载 fancyindex

image.png

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

unzip v0.4.4.zip

image.png

二、重新编译nginx

1、查看nginx已安装的模块

nginx -V

image.png

2、configure 配置

将 configure 后面的内容复制下来，生成一条新命令：

./configure --prefix=/etc/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 --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector-strong --param=ssp-buffer-size=4 -grecord-gcc-switches -m64 -mtune=generic -fPIC' --with-ld-opt='-Wl,-z,relro -Wl,-z,now -pie' --add-module=ngx-fancyindex-0.4.4

这里我们在最后面添加了 --add-module=ngx-fancyindex-0.4.4，其余均不变

3、报错解决

./configure: error: C compiler cc is not found

yum -y install gcc-c++

./configure: error: the HTTP rewrite module requires the PCRE library.

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

4、编译

make

cd objs

ls

image.png

查看 fancy 是否安装成功

2>&1 ./nginx -V | tr ' ' '\n'|grep fan

# 结果=》 --add-module=ngx-fancyindex-0.4.4

5、替换nginx

查找当前 nginx 安装目录

which nginx

image.png

在当前目录备份该 nginx

cp /usr/sbin/nginx ./nginx.bak

替换

cp nginx /usr/sbin/nginx

三、启动

1、修改 nginx 网站配置文件

location / {

# autoindex on;

# autoindex_exact_size off;

# autoindex_localtime on;

fancyindex on;

fancyindex_localtime on;

fancyindex_exact_size off;

fancyindex_default_sort date_desc;

}

2、启动

sudo nginx -c /etc/nginx/nginx.conf

nginx -s reload

3、在进入网站

image.png

四、美化

1、下载主题

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

目录结构如下 tree Nginx-Fancyindex-Theme/

image.png

这里我们使用白色主题

2、使用

复制主题到nginx网站配置的根目录

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

修改 nginx网站 配置文件

添加如下内容：

fancyindex_header "/Nginx-Fancyindex-Theme-light/header.html";

fancyindex_footer "/Nginx-Fancyindex-Theme-light/footer.html";

fancyindex_ignore "Nginx-Fancyindex-Theme-light";

fancyindex_ignore "examplefile.html";

最终效果

image.png

五、认证

配置文件新增

image.png

安装 htpasswd

sudo yum install -y httpd-tools

设置用户名密码

htpasswd -c -d /etc/nginx/pass_file username

回车，按提示输入两次密码。再次访问网站会弹出登录框做认证。

六、总结

全部配置如下示例：

image.png