Nginx 文件目录页美化

网上大部分是修改源码来实现，但我不喜欢折腾源码编译，所以使用了一些神奇的方法。

Nginx(Debian:nginx-full)中有两个神奇的指令,add_before_body与add_after_body，分别用来在响应内容前后插入内容，所以只要注入到末尾，用Javascript处理就行了。

location / {
    # ......
    add_after_body .uindex.html;
}

在目录下创建一个隐藏文件.uindex.html:

<!-- uindex  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha512-Dop/vW3iOtayerlYAqCgkVr2aTr2ErwwTYOvRFUpzl2VhCMJyjQF0Q9TjUXIo6JhuM/3i0vVEt2e/7QQmnHQqw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
let dirlist = $("pre").html().split("\n");
function getFileInfo(line) {
    line = line.replace('    ', '|');
    line = line.replace('<a href="', '');
    line = line.replace('">', '|');
    line = line.replace('</a>', '|');
    line = line.split('|');
    temp = [];
    for(i in line) {
        if(line[i] != "") temp.push(line[i].replace(/(^\s*)|(\s*$)/g, ""));
    }
    line = null;
    //if(temp.length < 3) return [];
    return temp;
}
function outputHtml(dirlist) {
    let list = [];
    for(i in dirlist) {
        let temp = getFileInfo(dirlist[i]);
        if(temp) list.push(temp);
    }
    let temp = '';
    list.forEach((i) => {
        if(i.length >= 2) {
            if(i.length > 3) {
                temp += `<tr><td><a href="${i[0]}">${i[1]}</a></td><td>${i[2].replace(' -','')}</td><td>`;
                temp += `${i[3]}</td></tr>`;
            } else if(i.length == 2) {
                temp += `<tr><td><a href="${i[0]}">${i[1]}</a></td><td></td><td></td></tr>`;
            } else {
                temp += `<tr><td><a href="${i[0]}">${i[1]}</a></td><td>${i[2].replace(' -','')}</td><td>`;
                temp += `</td></tr>`;
            }
        }
    });
    return `<div class="container"><div class="row"><div class="col-md-12"><table class="table table-striped table-hover">
  <caption class="h3">${$("h1").text()}</caption>
  <thead><tr><th>fileName</th><th>date</th><th>size</th></tr></thead><tbody>${temp}</tbody></table></div></div></div><p style="text-align:center;font-size:14px;color:#dddddd;text-align:center;font-size:14px;color:#dddddd;">&copy; 2021 uindex.</p>`;
}
$(() => {
    //$("body").css({"display": "none"})
    let html = outputHtml(dirlist);
    $("h1").remove();
    $("hr").remove();
    $("pre").remove();
    $("body").append(html);
    //$("body").css({"display": "inline"})
});
</script>

不会正则，所以先替换再分割了一遍，旨在能用就行。使用时会一闪一下，正常。