Nginx配置索引(目录浏览),美化索引页面,配置目录密码保护

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.htmlfooter.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
……

评论

  1. 逝水无痕
    7年前
    2015-5-17 9:16:27

    不错,学习了!

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇