Nginx编译安装Fancy Index模块，实现漂亮的索引目录

民审-M

Nginx开启目录浏览配置文件，便可轻松的实现Nginx索引，不过自带的索引目录不是特别美观，也不可以自定义，我们可以安装第三方Fancy Index模块，来实现漂亮的索引目录。

此方法适用于OneinStack（LNMP）环境下编译安装Fancy Index模块，当然原理和方法类似，都可以参考。

一、下载模块

如果您已经安装好OneinStack（LNMP）一键包，默认情况是没有编译Fancy Index模块的，我们需要自己编译一下。

1. cd /root/lnmp/src                      ###进入LNMP一件包的src目录，请根据实自己的实际情况调整
   
2. git clone https://github.com/aperezdc/ngx-fancyindex.git ngx-fancyindex     ###下载Fancy Index模块

复制代码

二、解压Ningx

Nginx的包也是在/root/lnmp/src目录下，使用下面的命令解压，注意：不同的版本nginx压缩包名字可能不一样，请根据实际情况修改。

1. tar -zxvf nginx-1.9.14.tar.gz           ###解压nginx
   
2. cd nginx-1.9.14                         ###进入nginx目录

复制代码

三、增加Nginx模块

先输入命令nginx -V查看当前已经编译的模块，并记录。

执行下面的命令在末尾增加--add-module=../ngx-fancyindex模块：

1. ./configure --prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-ipv6 --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-ld-opt='-ljemalloc' --add-module=../ngx-fancyindex

复制代码

四、重新编译

依次输入下面的命令重新编译下nginx

1. make
   
2. mv /usr/local/nginx/sbin/nginx{,_`date +%F`}
   
3. cp objs/nginx /usr/local/nginx/sbin

复制代码

五、添加配置

将下面的配置文件添加到nginx主机配置文件中，并service nginx restart重启nginx

1. location / {
   
2. fancyindex on;
   
3. fancyindex_exact_size off;
   
4. fancyindex_localtime on;
   
5. #fancyindex_header "/header.html";
   
6. fancyindex_footer "/footer.html";
   
7. fancyindex_ignore "footer.html" "exclude_centos.list";
   
8. }

复制代码

这样就可以利用Fancy Index模块模块美化Nginx索引目录啦，也可以自定义footer或者header页面，分享一下自己的footer.html文件：

1. <style type = "text/css">
   
2.                 body{
   
3.                         margin:0;
   
4.                         padding:0;
   
5.                         font-size:16px;
   
6.                         font-family:'MicrosoftYaHei';
   
7.                 }
   
8.                 #foot{
   
9.                         font-size:14px;
   
10.                         width:100%;
    
11.                         position: fixed;
    
12.                         bottom:10px;
    
13.                         text-align:center;
    
14.                         padding:8px;
    
15.                         padding-top:20px;
    
16.                         /*border:1px solid red;*/
    
17.                         margin-top:20px;
    
18.                 }
    
19.                 a{
    
20.                         text-decoration:none;
    
21.                 }
    
22.         </style>
    
23. 
    
24.         <div id = "foot">
    
25.                 &#169;2016 Powered by <a href = "https://www.cgzz8.cn/" title = "草根吧" target = "_blank">草根吧</a>. <a href = "../readme.html" title = "草根吧 - Discuz应用中心">使用说明</a>
    
26.         </div>
    
27.         <script src = "https://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    
28.         <script>
    
29.                 $(document).ready(function(){
    
30.                         var bodyheight = $(document.body).outerHeight(true);
    
31.                         var bheight = $(window).height();
    
32.                         //alert('body:' + bodyheight + 'browser:' + bheight);
    
33.                         if(bodyheight > bheight) {
    
34.                                 $("#foot").css("position","relative");
    
35.                         }
    
36.                 });
    
37.         </script>
    
38. </body>
    
39. </html>

复制代码

六、效果演示

最后查看到的效果如下图所示，