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

2018-05-1814:59:59 1 1,832

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

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

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

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

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

3、下载nginx软件包

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

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

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

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

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 rel="external nofollow" target="_blank" href="https://www.yangxingzhen.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly9taXJyb3JzLnlhbmd4aW5nemhlbi5jb20="> 镜像站首页</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 rel="external nofollow" target="_blank" href="https://www.yangxingzhen.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5iZWlhbi5taWl0Lmdvdi5jbg==" 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" rel="external nofollow" target="_blank" href="https://www.yangxingzhen.com/wp-content/themes/begin/go.php?url=aHR0cDovL3dwYS5xcS5jb20vbXNncmQ/dj0zJmFtcDt1aW49Njc1NTgzMTEwJmFtcDtzaXRlPXFxJmFtcDttZW51PXllcw=="><img border="0" src="http://wpa.qq.com/pa?p=2:675583110:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
| <a> 微信公众号:小柒博客 </a>
</center>
</div>
</div>
<!-- footer END -->
9、启动nginx,对比效果

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

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

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

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

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

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

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时间)

  • 微信号
  • 微信扫一扫加我~~
  • weinxin
  • 微信公众号
  • 微信扫一扫关注我吧~~
  • weinxin
广告也精彩

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar 运维老司机

      亲测,写的不错,感谢博主 :razz: