nginx有目录浏览功能,可以直接显示目录下的文件,但nginx默认是关闭的,如果需要此功能,需要我们手动的打开该功能。
示例配置文件
server { listen 80; charset utf-8; server_name localhost; root /www/web/default; location / { autoindex on;#开启该功能 autoindex_exact_size off;#显示出文件的确切大小 autoindex_localtime on;#显示为本地服务器时间 } }
其中server name localhost中的localhost改为实际的主机名,而root /www/web/default 中的 /www/web/default改为实际的web目录。
文件展示是完成了,美中不足的是它展现的页面过于原始,不是非常美观。下面介绍一款nginx插件-FancyIndex,可以通过引入自定义HTML内容来美化文件目录列表页面。
安装FancyIndex插件
FancyIndex的安装方法网上有很多教程,大多数是在编译nginx时,增加这个插件。 但是由于我们使用apt-get install nginx安装,通过安装nginx-extras即可安装FancyIndex插件。
apt-get install nginx-extras
配置文件修改
server { listen 80; charset utf-8; server_name file.liubaicai.net; root /var/www/file; location / { autoindex on; autoindex_exact_size off; autoindex_localtime on; fancyindex on; fancyindex_exact_size off; fancyindex_ignore "header.html" "footer.html";#列表屏蔽这两个文件 fancyindex_header /header.html; fancyindex_footer /footer.html; } }
在web目录下(本文为/var/www/file)建立两个文件: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.2em 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: #333;font-size: 15pt;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">// <![CDATA[function 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>FileCenter</title> </head> <body onload="ngx_onload()"> <h1 id="top1">文件目录列表</h1> <h1 id="top2">Directory listing of
footer.html内容为:
<table id="footer" cellpadding="0" cellspacing="1"> <thead><tr><td colspan="3">PowerByLiubaicai</td></tr><thead> </table></body></html>
于是大功告成~
==>原文