Nginx+fancy实现漂亮的索引目录

ngx-fancyindex模块的简介

Nginx Web 服务器自带的目录浏览功能看起来并不是那么的美观，我们可以使用ngx-fancyindex插件来美化目录浏览功能。

Nginx不仅仅作为WEB站点使用，也可以当做一个文件共享的使用，索引目录列表提供用户下载文件，Apache的index功能很强大也很漂亮.咱们使用的Nginx，说下Nginx索引目录，他自带的功能很简单，而且不好看，如何做一个漂亮的索引列表，接下来看

安装环境

系统：CentOS 7.4

Nginx：1.13.4

fancy：https://www.nginx.com/resources/wiki/modules/fancy_index/

下载安装fancy

1、下载fancy软件

[root@localhost ~]# yum -y install git

[root@localhost ~]# cd /usr/local/

[root@localhost local]# git clone https://github.com/aperezdc/ngx-fancyindex.git ngx-fancyindex

2、检查nginx编译参数是否添加fancy

[root@localhost local]# /usr/local/nginx/sbin/nginx -V

3、下载nginx软件包

[root@localhost local]# wget -c https://mirrors.yangxingzhen.com/nginx/nginx-1.13.4.tar.gz

4、解压，预编译

[root@localhost local]# tar zxf nginx-1.13.4.tar.gz

[root@localhost local]# cd nginx-1.13.4

[root@localhost local]# ./configure --prefix=/usr/local/nginx --user=www --group=www --with-http_ssl_module --with-http_stub_status_module --with-http_gzip_static_module --with-http_flv_module --with-http_mp4_module --add-module=/usr/local/ngx-fancyindex

[root@localhost local]# make 千万不要make install，不然就真的覆盖了

5、备份原来nginx的二进制文件

[root@localhost ~]# cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak

6、替换nginx二进制文件

[root@localhost ~]# \cp /usr/local/nginx-1.13.4/objs/nginx /usr/local/nginx/sbin/nginx

fancy索引配置

7、修改nginx配置文件，配置内容如下

server { 
	listen 80;
	server_name localhost;
	location / { 
	root html; 
	# autoindex on; 
	# autoindex_exact_size off; 
	# autoindex_localtime on; 
	fancyindex on; 
	fancyindex_exact_size off; 
	fancyindex_localtime on; 
	fancyindex_footer "myfooter.html"; 
	} 
	error_page 500 502 503 504 /50x.html; 
	location = /50x.html { 
	root html; 
	} 
}

参数解释：

fancyindex on：开启fancy索引

fancyindex_exact_size off：不使用精确的大小,使用四舍五入,1.9M会显示为2M这样.如果开启的话，单位为字节

fancyindex_localtime on：使用本地时间

fancyindex_footer "myfooter.html"：把当前路径下的myfooter.html内容作为底部.文件不存在底部会出现404

8、编辑myfooter.html文件，配置内容如下

<!-- footer START -->
<div id="footer">
<center>
Copyright © 2017-2019 <a href="https://www.yangxingzhen.com" target="_blank" rel="noopener noreferrer"> 小柒博客 </a>  版权所有
|<a href="https://mirrors.yangxingzhen.com"> 镜像站首页</a>
|<a id="gotop" href="#" onclick="MGJS.goTop();return false;"> 回到顶部</a>
|<a href="" onclick="window.history.go(-1)"> 返回上一页</a>
</center>
</div>
<div id="themeinfo">
<center>
<a href="https://www.yangxingzhen.com/sitemap.html" target="_blank" rel="noopener noreferrer"><i class="fa fa-map"></i> 网站导航 </a>
| <a href="https://www.yangxingzhen.com/sitemap.xml" target="_blank" rel="noopener noreferrer"><i class="fa fa-map"></i>百度地图</a> 
| <img src="https://www.yangxingzhen.com/images/icp.png" /><a href="http://www.beian.miit.gov.cn" target="_blank" rel="noopener noreferrer"> 粤ICP备17125639号-2 </a>
| <a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=b55f3f89ef40875086bef69c42cc52c93e55bb36798571a79506ee2d57397c3d"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="Linux运维学习交流群" title="Linux运维学习交流群"></a>
| <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=675583110&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:675583110:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
| <a> 微信公众号：小柒博客 </a>
</center>
</div>
</div>
<!-- footer END -->

[root@localhost ~]# /usr/local/nginx/sbin/nginx

[root@localhost ~]# ps -ef | grep nginx

10、对比一下nginx内置的index效果，如下

看看nginx加了fancy的效果,如下图

至此，fancy配置完成。

fancy指令使用：

fancyindex

语法: *fancyindex* [*on* | *off*]

默认值: fancyindex off

配置块: http, server, location

描述: 开启/关闭目录索引功能

fancyindex_css_href

语法: *fancyindex_css_href uri*

默认值: fancyindex_css_href ""

配置块: http, server, location

描述: 外置css路径，这个css将会替代掉现有的css样式。如果你会css，那你可以把索引列表做得更加漂亮。

fancyindex_exact_size

语法: *fancyindex_exact_size* [*on* | *off*]

默认值: fancyindex_exact_size on

配置块: http, server, location

描述: 定义如何显示文件的大小，默认是on，on：文件大小使用精确值，单位为字节.off:单位为KB,MB,GB，如果含有小数点，将会四舍五入。例如1.9MB，将会显示为2MB。

fancyindex_footer

语法: *fancyindex_footer path*

默认值: fancyindex_footer ""

配置块: http, server, location

描述: 指定哪个文件嵌入到索引页面的底部，效果请看本文的第一张图片

fancyindex_header

语法: *fancyindex_header path*

默认值: fancyindex_header ""

配置块: http, server, location

描述: 指定哪个文件嵌入到索引页面的头部.用法和fancyindex_footer类似

fancyindex_ignore

语法: *fancyindex_ignore string1 [string2 [... stringN]]*

默认值: No default.

配置块: http, server, location

描述: 哪些文件/目录隐藏掉，如果你的nginx支持正则，那么可以使用正则表达式来过滤

例如我想隐藏dir打头的文件或目录以及文件filea.txt，配置如下：

fancyindex_ignore "dir*" "filea.txt"

效果如下：

对比图：

fancyindex_localtime

语法: *fancyindex_localtime* [*on* | *off*]

默认值: fancyindex_localtime off

配置块: http, server, location

Description: 使用当地时间显示文件的创建时间，默认是off（GMT时间）