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://nuoyo.cn" 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://nuoyo.cn/sitemap.html" target="_blank" rel="noopener noreferrer"><i class="fa fa-map"></i> 网站导航 </a>
| <a href="https://nuoyo.cn/sitemap.xml" target="_blank" rel="noopener noreferrer"><i class="fa fa-map"></i>百度地图</a>
| <img src="https://nuoyo.cn/images/icp.png" /><a href="https://nuoyo.cnwww.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="https://nuoyo.cnwpa.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时间)