Nginx目录美化

传说中胖子

已于 2023-08-24 17:33:33 修改

阅读量4.4k

点赞数 4

分类专栏： nginx 文章标签： nginx 服务器前端

于 2021-12-18 13:36:46 首次发布

本文链接：https://blog.csdn.net/nx_xn/article/details/122011103

版权

nginx 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在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

<!-- add_after_body默认影响所有html文件,访问所有html页面都会追加这个footer.html -->
<script type="text/javascript">
    //增加一个判断，判断是不是在目录列表中，如果不是目录不加载js文件。可以自己用其他方式判断
    if(document.getElementsByTagName("title")[0].innerText.substring(0,8)=="Index of"){
        var oHead = document.getElementsByTagName('head')[0]; // 在head标签中创建创建script

        var oScript = document.createElement("script");
        oScript.type = "text/javascript";
        oScript.src = "/.Nginx/jquery-1.12.4.min.js";

        var oLink = document.createElement("link");
        oLink.rel = "stylesheet";
        oLink.type = "text/css";
        oLink.href = "/.Nginx/nginx.css";

        oHead.appendChild(oLink);
        oHead.appendChild(oScript);
    }
</script>

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中追加下面内容，可以根据自己需要编写

https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js

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

    var reg1 = /\s{2,}/g;
    var reg2 = /<a/g;
    var reg3 = /\r\n/g;
    var data = $("pre").html();

    data = data.replace(reg2,"<tr><td><a").replace(reg1,"</td><td>").replace(reg3,"</td></tr>");
    $("pre").html('<table class="data">'+data+'</table>');

    $('hr:eq(0)').before('<div class="header">9Hours Sdudio</div><table class="title"><tr><td>Name</td><td>Last modified</td><td>Size</td></tr></table>');
    $('hr:eq(1)').after('<div class="footer"></div>');

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

server_info.php内容

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

美化后的样子