[Nginx 自定义目录索引样式] 将autoindex.html放于根目录，然后修改default.con #nginx

autoindex.html

<!-- autoindex for nginx, see https://phuslu.github.io -->
<script>
if (this.location.href.slice(-1) === "/") {
	var website_title = ''
	var datetime_format = '%d-%b-%Y %H:%M'
	var show_readme_md = true
	var max_name_length = 50

	var dom = {
		element: null,
		get: function (o) {
			var obj = Object.create(this)
			obj.element = (typeof o == "object") ? o : document.createElement(o)
			return obj
		},
		add: function (o) {
			var obj = dom.get(o)
			this.element.appendChild(obj.element)
			return obj
		},
		text: function (t) {
			this.element.appendChild(document.createTextNode(t))
			return this
		},
		html: function (s) {
			this.element.innerHTML = s
			return this
		},
		attr: function (k, v) {
			this.element.setAttribute(k, v)
			return this
		}
	}

    if (document.head === undefined) {
        head = dom.get(document.head)
        head.add('meta').attr('charset', 'utf-8')
        head.add('meta').attr('name', 'viewport').attr('content', 'width=device-width,initial-scale=1')
    }

	if (!document.title) {
		document.write(["<div class=\"container\">",
		"<h3>nginx.conf</h3>",
		"<textarea rows=8 cols=50>",
		"# download autoindex.html to /wwwroot",
		"location ~ ^(.*)/$ {",
		"    charset utf-8;",
		"    autoindex on;",
		"    autoindex_localtime on;",
		"    autoindex_exact_size off;",
		"    add_after_body /autoindex.html;",
		"}",
		"</textarea>",
		"</div>"].join("\n"))
	}

	var bodylines = document.body.innerHTML.split('\n')
	document.body.innerHTML = ''

	var titlehtml = document.title.replace(/\/$/, '').split('/').slice(1).reduce(function(acc, v, i, a) {
		return acc + '<a href="/' + a.slice(0, i+1).join('/') + '/">' + v + '</a>/'
	}, 'Index of /')
	if (website_title) {
		document.title = website_title + ' - ' + document.title
	}

	div = dom.get('div').attr('class', 'container')
	div.add('table').add('tbody').add('tr').add('th').html(titlehtml)
	tbody = div.add('table').attr('class', 'table-hover').add('tbody')

	var insert = function(filename, datetime, size) {
		if (/\/$/.test(filename)) {
			css = 'file-directory'
		} else if (/\.(zip|7z|bz2|gz|tar|tgz|tbz2|cab)$/.test(filename)) {
			css = 'file-zip'
		} else if (/\.(jpg|png|bmp|gif|ico|webp|flv|mp4|mkv|avi|mkv)$/.test(filename)) {
			css = 'file-media'
		} else {
			css = 'file'
		}

		displayname = decodeURIComponent(filename.replace(/\/$/, ''))
		if (displayname.length > max_name_length)
			displayname = displayname.substring(0, max_name_length-3) + '..>';

		if (!isNaN(Date.parse(datetime))) {
			d = new Date(datetime)
			pad = function (s) {return s < 10 ? '0' + s : s}
			mon = function (m) {return ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][m]}
			datetime = datetime_format
					.replace('%Y', d.getFullYear())
					.replace('%m', pad(d.getMonth()+1))
					.replace('%d', pad(d.getDate()))
					.replace('%H', pad(d.getHours()))
					.replace('%M', pad(d.getMinutes()))
					.replace('%S', pad(d.getSeconds()))
					.replace('%b', mon(d.getMonth()))
		}

		tr = tbody.add('tr')
		tr.add('td').attr('class', 'td-name').add('a').attr('class', 'octicon ' + css).attr('href', filename).text(displayname)
		tr.add('td').attr('class', 'td-time').text(datetime)
		tr.add('td').attr('class', 'td-size').text(size)
	}

	var readme = ''

	insert('../', '', '-')
	for (var i in bodylines) {
		if (m = /\s*<a href="(.+?)">(.+?)<\/a>\s+(\S+)\s+(\S+)\s+(\S+)\s*/.exec(bodylines[i])) {
			filename = m[1]
			datetime = m[3] + ' ' + m[4]
			size = m[5]
			insert(filename, datetime, size)
			if (filename.toLowerCase() == 'readme.md') {
				readme = filename
			}
		}
	}

	document.body.appendChild(div.element)

	if (show_readme_md && readme != '') {
		tbody = div.add('table').add('tbody')
		tbody.add('tr').add('th').text(readme)
		tbody.add('tr').add('td').add('div').attr('id', 'readme').attr('class', 'markdown-body')

		var xhr = new XMLHttpRequest()
		xhr.open('GET', location.pathname+readme, true)
		xhr.onload = function() {
			if (xhr.status >= 200 && xhr.status < 400) {
				wait = function (name, callback) {
					var interval = 10; // ms
					window.setTimeout(function() {
						if (window[name]) {
							callback(window[name])
						} else {
							window.setTimeout(arguments.callee, interval)
						}
					}, interval)
				}
				wait('marked', function() {
					document.getElementById("readme").innerHTML = marked(xhr.responseText)
				})
			}
		}
		xhr.send()

		div.add('script').attr('src', 'https://cdn.jsdelivr.net/npm/marked')
		div.add('link').attr('rel', 'stylesheet').attr('href', 'https://cdn.jsdelivr.net/npm/github-markdown-css')
	}
    
    function heredoc(fn) {
        return fn.toString().split('\n').slice(1,-1).join('\n') + '\n'
    }
    var css_tag = heredoc(function() {/*
        body {
        	margin: 0;
        	font-family: "ubuntu", "Tahoma", "Microsoft YaHei", Arial, Serif;
        }
        .container {
        	padding-right: 15px;
        	padding-left: 15px;
        	margin-right: auto;
        	margin-left: auto;
        }
        @media (min-width: 768px) {
        	.container {
        		max-width: 750px;
        	}
        }
        @media (min-width: 992px) {
        	.container {
        		max-width: 970px;
        	}
        }
        @media (min-width: 1200px) {
        	.container {
        		max-width: 1170px;
        	}
        }
        table {
        	width: 100%;
        	max-width: 100%;
        	margin-bottom: 20px;
        	border: 1px solid #ddd;
        	padding: 0;
        	border-collapse: collapse;
        }
        table th {
            line-height: 80px;
        }
        table tr {
        	border: 1px solid #ddd;
        	padding: 5px;
        }
        table tr:nth-child(odd) {
        	background: #f9f9f9
        }
        table th, table td {
        	border: 1px solid #ddd;
            font-size: 32px;
        	padding: 3px;
        	text-align: left;
        }
        .td-name {
            width: auto;
        }
        .td-time {
            width: 275px;
        }
        .td-size {
            width: 77px;
        }
        a {
        	color: #000000;
        	text-decoration: none;
        }
        a:hover, a:focus {
        	color: #2a6496;
        	text-decoration: underline;
        }
        table.table-hover > tbody > tr:hover > td,
        table.table-hover > tbody > tr:hover > th {
        	background-color: #f5f5f5;
        }
        .markdown-body {
        	float: left;
        	font-family: "ubuntu", "Tahoma", "Microsoft YaHei", Arial, Serif;
        }
        .octicon {
        	background-position: center left;
        	background-repeat: no-repeat;
            display: block;
            padding: 32px 0 32px 46px;
            width: auto;
        }
        .file {
        	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='40' viewBox='0 0 12 16'%3E%3Cpath d='M6 5L2 5 2 4 6 4 6 5 6 5ZM2 8L9 8 9 7 2 7 2 8 2 8ZM2 10L9 10 9 9 2 9 2 10 2 10ZM2 12L9 12 9 11 2 11 2 12 2 12ZM12 4.5L12 14C12 14.6 11.6 15 11 15L1 15C0.5 15 0 14.6 0 14L0 2C0 1.5 0.5 1 1 1L8.5 1 12 4.5 12 4.5ZM11 5L8 2 1 2 1 14 11 14 11 5 11 5Z' fill='%23000000'/%3E%3C/svg%3E");
        }
        .file-directory {
        	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='40' viewBox='0 0 14 16'%3E%3Cpath d='M13 4L7 4 7 3C7 2.3 6.7 2 6 2L1 2C0.5 2 0 2.5 0 3L0 13C0 13.6 0.5 14 1 14L13 14C13.6 14 14 13.6 14 13L14 5C14 4.5 13.6 4 13 4L13 4ZM6 4L1 4 1 3 6 3 6 4 6 4Z' fill='%23000000'/%3E%3C/svg%3E");
        }
        .file-media {
        	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='40' viewBox='0 0 12 16'%3E%3Cpath d='M6 5L8 5 8 7 6 7 6 5 6 5ZM12 4.5L12 14C12 14.6 11.6 15 11 15L1 15C0.5 15 0 14.6 0 14L0 2C0 1.5 0.5 1 1 1L8.5 1 12 4.5 12 4.5ZM11 5L8 2 1 2 1 13 4 8 6 12 8 10 11 13 11 5 11 5Z' fill='%23000000'/%3E%3C/svg%3E");
        }
        .file-zip {
        	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='40' viewBox='0 0 12 16'%3E%3Cpath d='M8.5 1L1 1C0.4 1 0 1.4 0 2L0 14C0 14.6 0.4 15 1 15L11 15C11.6 15 12 14.6 12 14L12 4.5 8.5 1ZM11 14L1 14 1 2 4 2 4 3 5 3 5 2 8 2 11 5 11 14 11 14ZM5 4L5 3 6 3 6 4 5 4 5 4ZM4 4L5 4 5 5 4 5 4 4 4 4ZM5 6L5 5 6 5 6 6 5 6 5 6ZM4 6L5 6 5 7 4 7 4 6 4 6ZM5 8L5 7 6 7 6 8 5 8 5 8ZM4 9.3C3.4 9.6 3 10.3 3 11L3 12 7 12 7 11C7 9.9 6.1 9 5 9L5 8 4 8 4 9.3 4 9.3ZM6 10L6 11 4 11 4 10 6 10 6 10Z' fill='%23000000'/%3E%3C/svg%3E");
        }
        .markdown-body {
            font-size: 36px;
        }
    */})
    div.add('style').text(css_tag)
}
</script>

default.conf

	server {
    listen       80;
    server_name  localhost;
    
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    
    location ~* ^.*\/$ {
        root /usr/share/nginx/html;
    
        autoindex on;
        add_after_body /autoindex.html;
        addition_types text/directory;
        autoindex_exact_size off;
        charset utf-8;
    }
    
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}