In the Nginx开启目录浏览配置文件 section of Xiao Z's blog, it is mentioned that you can easily implement Nginx indexing by enabling the directory browsing feature. However, the default index directory provided by Nginx is not very aesthetically pleasing and cannot be customized. To overcome this, you can install the third-party Fancy Index module to achieve a beautiful index directory.

This method is applicable to the OneinStack (LNMP) environment for compiling and installing the Fancy Index module. The principle and method are similar and can be referenced accordingly.

一、Download the module

If you have already installed the OneinStack (LNMP) one-click package, the Fancy Index module is not compiled by default, so you need to compile it yourself.

cd /root/lnmp/src                      ### Enter the src directory of the LNMP one-click package, please adjust according to your actual situation
git clone https://github.com/aperezdc/ngx-fancyindex.git ngx-fancyindex     ### Download the Fancy Index module

二、Extract Nginx

The Nginx package is also in the /root/lnmp/src directory. Use the following command to extract it. Note: the name of the Nginx compressed package may vary depending on the version, please modify it according to your actual situation.

tar -zxvf nginx-1.9.14.tar.gz           ### Extract Nginx
cd nginx-1.9.14                         ### Enter the nginx directory

三、Add Nginx module

First, enter the command nginx -V to view the currently compiled modules and record them.

Execute the following command to add the --add-module=../ngx-fancyindex module at the end:

./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

四、Recompile

Enter the following commands one by one to recompile Nginx:

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

五、Add configuration

Add the following configuration file to the nginx host configuration file, and then restart nginx with service nginx restart:

location / {
    fancyindex on;
    fancyindex_exact_size off;
    fancyindex_localtime on;
    #fancyindex_header "/header.html";
    fancyindex_footer "/footer.html";
    fancyindex_ignore "footer.html" "exclude_centos.list";
}

This way, you can use the Fancy Index module to beautify the Nginx index directory. You can also customize the footer or header page. Here is an example of a footer.html file:

<style type="text/css">
    body{
        margin:0;
        padding:0;
        font-size:16px;
        font-family:'MicrosoftYaHei';
    }
    #foot{
        font-size:14px;
        width:100%;
        position: fixed;
        bottom:10px;
        text-align:center;
        padding:8px;
        padding-top:20px;
        /*border:1px solid red;*/
        margin-top:20px;
    }
    a{
        text-decoration:none;
    }
</style>

<div id="foot">
    &copy;2016 Powered by <a href="https://blog.xiaoz.org/" title="小z博客" target="_blank">小z博客</a>. <a href="../readme.html" title="小z博客 - 软件库使用说明">使用说明</a>
</div>
<script src="https://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        var bodyheight = $(document.body).outerHeight(true);
        var bheight = $(window).height();
        //alert('body:' + bodyheight + 'browser:' + bheight);
        if(bodyheight > bheight) {
            $("#foot").css("position","relative");
        }
    });
</script>

六、Demo

Finally, the resulting effect is shown in the image below. You can also visit Xiao Z's blog software site at http://soft.hixz.org/ to see it. Note: some of the content is referenced from the author's blog at https://blog.linuxeye.com/409.html.