标签： 美化索引页面

Nginx配置索引（目录浏览），美化索引页面，配置目录密码保护

本文演示了为Nginx配置索引（目录浏览），美化索引页面，配置目录密码保护的全部过程，全部完成以后的效果如http://soft.vpser.net/所示。

1，安装Nginx，并加入FancyIndex插件
FancyIndex是一个美化插件，可以引入自定义HTML内容用于美化索引页面。如果仅仅需要开启目录浏览而不需要美化，可以不引入此插件。

$ yum install gcc gcc-c++ make openssl openssl-devel
wget http://sourceforge.net/projects/pcre/files/pcre/8.33/pcre-8.33.tar.gz
tar -zxvf pcre-8.33.tar.gz
cd pcre-8.33
./configure
make && make install
cd ../ 
groupadd www
useradd -s /sbin/nologin -g www www
git clone https://github.com/aperezdc/ngx-fancyindex.git ngx-fancyindex 
wget http://nginx.org/download/nginx-1.6.0.tar.gz
tar zxvf nginx-1.6.0.tar.gz
cd nginx-1.6.0/
./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --add-module=../ngx-fancyindex
make && make install
ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx
git clone https://github.com/ixbear/nginx
mv nginx/nginx.conf /usr/local/nginx/conf/
mv nginx/init.d.nginx /etc/init.d/nginx
chmod +x /etc/init.d/nginx
chkconfig --level 345 nginx on
/etc/init.d/nginx start

注意，这里可能会出现错误提示“error while loading shared libraries: libpcre.so.1: cannot open shared object file: No such file or directory”
解决办法：ln -s /usr/local/lib/libpcre.so.1 /lib64

2，打开Nginx索引功能，并美化索引页面
vim /usr/local/nginx/conf/nginx.conf #作如下修改

server
        {
                listen       80;
                server_name www.lnmp.org;
                index index.html index.htm index.php;
                root  /home/wwwroot;
                autoindex on;              #打开索引功能
                autoindex_exact_size off;  #人性化方式显示大小
                autoindex_localtime on;    #显示服务器时间
                fancyindex on;             #开启美化
                fancyindex_exact_size off;
                fancyindex_header /.header.html;
                fancyindex_footer /.footer.html;
                }

根据如上配置文件，可以看出网站的根目录是/home/wwwroot。因此我们需要在根目录建立两个文件：header.html和footer.html。
vim /home/wwwroot/.header.html #输入如下内容

<style type=”text/css”>body,html {background:#fff;font-family: Arial, “Hiragino Sans GB”, “Microsoft YaHei”, “WenQuanYi Micro Hei”, sans-serif;;font-size: 18px;}tr:nth-child(even) {background:#f4f4f4;}th,td {padding:0.1em 0.5em;}th {text-align:left;font-weight:bold;background:#eee;border-bottom:1px solid #aaa;}#top {width:80%;margin: 0 auto;padding: 0;}#top h1 {font-size: 25px;margin: 0px 0px -5px 0px;}#list {border:1px solid #aaa;width:80%;margin: 0 auto;padding: 0;}a {color:#a33;text-decoration: none;}a:hover {color:#e33;}#footer {width:80%;margin: 0 auto;padding: 10px 0;font-size: 15px;text-align:center;}#footer a {font-size: 15px;font-weight: normal;text-decoration: none;}</style>
&nbsp;
<table id=”top” cellspacing=”0″ cellpadding=”0.1em”>
<thead>
<tr>
<td colspan=”2″>
<h1>VPSer Linux Software Download Center</h1>
Directory listing of soft.vpser.net/</td>
</tr>
</thead>
</table>

vim /home/wwwroot/.footer.html #输入如下内容

<!– footer START –>
<div id=”footer”>

<div id=”copyright”>版权所有 © copy; 2015 Vpser</div>

</div>
<!– footer END –>

Nginx对目录设置密码保护

server
        {
                listen       80;
                server_name www.lnmp.org;
                index index.html index.htm index.php;
                root  /home/wwwroot;
                autoindex on;
                autoindex_exact_size off;
                autoindex_localtime on;
                fancyindex on;
                fancyindex_exact_size off;
                fancyindex_header /.header.html;
                fancyindex_footer /.footer.html;
 
                location /repo {
                        auth_basic "input you user name and password";
                        auth_basic_user_file /home/wwwroot/repo/.htpasswd;
                }

其中，auth_basic是弹出的文字提示，而.htpasswd则是记录登陆用户名与密码的文件。该文件可用Apache的htpasswd工具创建。

2014.12.06更新：
发现了一个更好看的Fancyindex-Theme：https://github.com/TheInsomniac/Nginx-Fancyindex-Theme
页面上给出了主题的缩略图，拿来测试了一下，整个界面看起来非常简洁大方，只是没有了页面大标题。

2014.12.19更新：
终于解决了文件名长度问题，参考http://forum.nginx.org/read.php?2,124400,167420

$ vim ngx-fancyindex/ngx_http_fancyindex_module.c
……
#define NGX_HTTP_FANCYINDEX_PREALLOCATE  50
#define NGX_HTTP_FANCYINDEX_NAME_LEN     50
……
退出移动版