nginx开启autoindex优化页面

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 = '名称时间';
            for (let i = 0; i < data.length; i++) {
            //如果是目录,直接进入
                result += '';
                //result += '' + data[i].name + '';
                if (data[i].type == 'directory') {
                    let url = "./?from=" + from + '/' + data[i].name;
                    url = url.replace("\/\/", "\/");
                    result += '+ url + '">' + data[i].name + '(目录)';
                    //带参跳转,页面可返回
                } else {
                    let url = baseUrl + '/' + data[i].name;
                    url = url.replace("/json/", "/");
                    result += '+ url + '">' + data[i].name + '';
                }
                result += '' + dateFormat(data[i].mtime) + '';
                result += ''
            }
            $('#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;
 }

你可能感兴趣的:(nginx,javascript)