nginx目录浏览配置第三方插件fancyindex

2014年6月18日 4810点热度 0人点赞 0条评论

自己收藏的有些东西要经常用，就想专门放到一个地方，自己的主机生产环境大部分是nginx，所以就有了这个折腾. 笔记写的自己折腾，其他资源收集于网络.

fancy: https://github.com/aperezdc/ngx-fancyindex
nginx：http://nginx.org/en/download.html

下载nginx和安装NgxFancyIndex

$ wget http://nginx.org/download/nginx-1.7.1.tar.gz
$ tar -xzvf nginx-1.7.1.tar.gz
$ git clone https://github.com/aperezdc/ngx-fancyindex.git ngx-fancyindex
$ cd nginx-1.7.1
$ ./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --add-module=../ngx-fancyindex --with-http_v2_module
##也可以用看个人爱好./configure --prefix=/usr/local/nginx-1.7.1  --add-module=../ngx-fancyindex
$ make && make install

然后是fancy索引配置，在主机nginx.conf配置文档server 或者location添加

fancyindex on; #开启 fancy indexes
fancyindex_exact_size off; #显示文件大小
fancyindex_localtime on; #使用本地时间

如果要编辑头部和尾部，自己看

http://wiki.nginx.org/NgxFancyIndex

ubuntu下安装

apt-get install nginx-extras

配置文件修改

这里给出示例的nginx配置文件，相对于Nginx打开文件目录列表功能中的nginx配置文件仅仅需要增加几行代码：

server {
listen 80;
charset utf-8;
server_name dl.xiaofengsky.com;
root /home/wwwroot/dl.xiaofengsky.com;

location / {
autoindex on;
autoindex_exact_size off;
autoindex_localtime on;
fancyindex on;             
fancyindex_exact_size off;
fancyindex_header /header.html;
fancyindex_footer /footer.html;
fancyindex_ignore footer.html header.html;
}
}

这里需要两个html文件：header.html，footer.html用来美化页面。
在web目录下建立两个文件：header.html和footer.html。
header.html内容为：

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
body,html {background:#fff;font-family: "Lucida Grande",Calibri,Arial;font-size: 13pt;color: #333;background: #f8f8f8;}
tr.e {background:#f4f4f4;}
th,td {padding:0.1em 0.5em;}
th {text-align:left;font-weight:bold;background:#eee;border-bottom:1px solid #aaa;}
#top1 {width:80%; font-size:28px; margin: 0 auto 5px auto;}
#top2 {width:80%; font-size:18px; margin: 0 auto 5px auto;}
#footer {width:80%;margin: 0 auto; padding: 10pt 0;font-size: 10pt;text-align:center;}
#footer a {font-size: 14px; font-weight: normal; text-decoration: underline;}
#list {border:1px solid #aaa;width:80%;margin: 0 auto;padding: 0;}
a {color: #b00;font-size: 11pt;font-weight: bold;text-decoration: none;}
a:hover {color: #000;}
#readme {padding:0;margin:1em 0;border:none;width:100%;}
</style>
<script type="text/javascript">// <!CDATAfunction ngx_onload(){var f=document.getElementById('readme');if(!(f&&f.contentDocument))return;f.style.height=f.contentDocument.body.offsetHeight+'px';f.contentDocument.body.style.padding='0';f.contentDocument.body.style.margin='0';}// ]]></script>
<title>Open Source Soft Download Center</title>
</head>
<body onload="ngx_onload()">
<h1 id="top1">文件目录列表</h1>
<h1 id="top2">Directory listing of
</pre>

footer.html内容为：
<pre>
<!-- footer START -->
<div id="footer">
<div id="themeinfo">
 <a href="#" target="_blank">#</a>
 </div>
<div id="copyright">
本站服务器由亿家友情提供，以上资源来源网络如有侵权，请联系小沨删除，email：mikj#logdns.com</div>
</div>
<!-- footer END -->

其他资源
http://www.ttlsa.com/nginx/nginx-module-ngx-fancyindex/
http://www.zhanghaijun.com/post/796/
http://www.tennfy.com/2489.html
http://www.zrj96.com/post-168.html

nginx目录浏览配置第三方插件fancyindex

文章评论