Nginx目录美化

 在nginx的配置文件中加入以下内容（建议加在网站配置文件中）

autoindex on;               #开启目录浏览功能；
autoindex_exact_size off;   #关闭详细文件大小统计，让文件大小显示MB，GB单位，默认为b；
autoindex_localtime on;     #开启以服务器本地时区显示文件修改日期！
autoindex_format html;      #设置列表页以html形式展示，还可使用有xml,json,jsonp
charset utf-8,gbk;          #设置页面编码

location / {
    #跨域设置
    add_header Access-Control-Allow-Origin "*";
    add_header Access-Control-Allow-Methods "GET,POST,PUT,DELETE,OPTIONS";
    add_header Access-Control-Allow-Headers "*";
    add_header Access-Control-Allow-Credentials true;
    #以上几行设置跨域与目录美化无关
    add_after_body /.Nginx/footer.html; #.Nginx这个路径自定义的
}

footer.html

nginx.css

    .header {background:#123456;color:#FFFFFF;line-height:3em;padding-left: 15px;font-size:20px;font-weight: bold;}
    .footer {background:#123456;color:#FFFFFF;font-size:12px;text-align: right;padding: 5px 20px 5px 5px;line-height:1.5em;}

    table {width:100%}
    table.title tr td{text-align:center;}
    table td:nth-child(1){width:50%;}
    table td:nth-child(2){width:30%;}
    table td:nth-child(3){width:20%;}

    table.data td{font-size: 17px;line-height:1.5em;}
    table.data td:nth-child(1){padding-left: 10px;}
    table.data td:nth-child(2){text-align:center;}
    table.data td:nth-child(3){text-align:right;padding-right: 20px;}

 

 

jquery-1.12.4.min.js中追加下面内容，可以根据自己需要编写

$(function($) {
    $("h1").hide();

    var reg1 = /\s{2,}/g;
    var reg2 = /").replace(reg3,"");
    $("pre").html(''+data+'');

    $('hr:eq(0)').before('
9Hours Sdudio
Name
Last modified
Size
');
    $('hr:eq(1)').after('
');

    $.ajax({
        type: "get",
        url: "/.Nginx/server_info.php",
        dataType: "json",
        success: function(data){
            $('.footer').html("目录："+data.ROOT+"
服务器："+data.SOFTWARE+"
客户端："+data.AGENT);
        }
    });
});

 server_info.php内容

 $_SERVER["SERVER_SOFTWARE"],
                "AGENT" => $_SERVER["HTTP_USER_AGENT"],
                "ROOT" => $_SERVER["DOCUMENT_ROOT"]
            );
    echo json_encode($arr);
?>

美化后的样子