nginx开启autoindex优化页面

最新推荐文章于 2024-08-25 20:29:57 发布

-Whisper-

最新推荐文章于 2024-08-25 20:29:57 发布

阅读量869

点赞数

文章标签： nginx javascript

@黑客联盟 0@thaad.xyz

本文链接：https://blog.youkuaiyun.com/q351094752/article/details/129818525

版权

本文介绍了如何在nginx中开启autoindex功能并进行美化，包括利用CDN加速CSS和JS文件，设置跨域以方便调试，以及通过JSON格式获取目录信息来定制自定义页面，避免使用默认页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nginx开启autoindex美化

HTML页面

采用CDN的css与js,内网环境下载下载再配置在nginx中

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>目录</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body style="font-size: 39px">
<div class="panel panel-default">
    <table class="table" id="load">
    </table>
</div>
</body>
<script type="text/javascript">
    var from = "/";
    $(document).ready(function () {
        //获取页面链接参数,from设为全局方便使用
        from = window.location.href;
        from = from.substr(from.indexOf("=") + 1, from.length);
        if (from.length == window.location.href.length) from = "/";
        loadJson("./json" + from);
    })

    function loadJson(baseUrl) {
        $.getJSON(baseUrl, function (data) {
            let result = '<tr><th style="width: 70%">名称</th><th style="width: 30%">时间</th></tr>';
            for (let i = 0; i < data.length; i++) {
            //如果是目录,直接进入
                result += '<tr>';
                //result += '<td>' + data[i].name + '</td>';
                if (data[i].type == 'directory') {
                    let url = "./?from=" + from + '/' + data[i].name;
                    url = url.replace("\/\/", "\/");
                    result += '<td><a  href="' + url + '">' + data[i].name + '(目录)</a></td>';
                    //带参跳转,页面可返回
                } else {
                    let url = baseUrl + '/' + data[i].name;
                    url = url.replace("/json/", "/");
                    result += '<td><a href="' + url + '">' + data[i].name + '</a></td>';
                }
                result += '<td>' + dateFormat(data[i].mtime) + '</td>';
                result += '</tr>'
            }
            $('#load').append(result);
        });
    }

    /*返回格式化时间*/
    function dateFormat(time) {
        let date = new Date(time);
        let year = date.getFullYear();
        let month = "0" + date.getMonth();
        month = month.substr(month.length - 2, 2);
        let day = "0" + date.getDate();
        day = day.substr(day.length - 2, 2)
        return year + "-" + month + "-" + day;
    }
</script>
</html>

nginx配置

配置跨域是为了方便调试
autoindex的前缀为json,获取目录的格式也为json,通过json加载自定义页面,不使用默认的页面
/只为能访问index.html,重点是/json/开启autoindex

 location / {
  root   html;
  index  index.html;
 }
		
 location /json/ {
 add_header Access-Control-Allow-Origin *;
 add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
 add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
  autoindex on;
  autoindex_format json;
  alias  html/;
  index  json;
 }