Nginx 开启目录列表的配置
# 在y.z/dl/中，显示C:/inetPub/d_SUBST/目录里的文件，alias目录的结尾要与url一致，【/】要不都有，要不都没有。
location / {
root D:/SUBST/;
# 在浏览器中显示一个目录的内容，html风格显示，大小自动显示MB/GB单位，文件(修改)时间是服务器时间，utf-8格式显示。
autoindex on;
autoindex_format html;
autoindex_exact_size off;
autoindex_localtime on;
charset utf-8;
}但是，autoindex页面的效果是这样的：
通过下面方法可以美化为这样的：
autoindex 页面美化
- 在配置文件里，autoindex on;后面增加一行：
add_after_body /autoindex.html;- 将以下内容，上传为 x.y.z/autoindex.html
美化样式B，来自： 掘金
<!-- autoindex for nginx -->
<style>
body {
/* 背景图片
background: #fff url(/background.png) no-repeat fixed center center;
background-size: 100% 100%;
*/
}
h1 {
text-align:left;
}
.autoindex-list,
.autoindex-unsupported {
font-family: Monaco, "Microsoft Yahei", "Helvetica Neue", Simsun, Helvetica, Tahoma, Arial, sans-serif;
font-size: 14px;
}
.autoindex-list>li {
line-height: 34px;
border-bottom: 1px #ddd solid;
padding-left: 10px;
margin-left:10%;
margin-right:10%;
padding-right: 10px;
position: relative;
color: #999;
}
.autoindex-list>li:hover {
background-color: #eee;
border-bottom-color: #2CC38E;
}
.autoindex-list>li a {
text-decoration: none;
}
.autoindex-list>li a:hover {
text-decoration: underline;
}
.autoindex-list>li a.external {
font-size: 0;
line-height: 0;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
background-size: 100%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU4NDlBMTNGNkFBMjExRTc5QTBGRkY1NjU2Q0M4QkQ2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU4NDlBMTQwNkFBMjExRTc5QTBGRkY1NjU2Q0M4QkQ2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTg0OUExM0Q2QUEyMTFFNzlBMEZGRjU2NTZDQzhCRDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTg0OUExM0U2QUEyMTFFNzlBMEZGRjU2NTZDQzhCRDYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6I0xK9AAAA40lEQVR42mJkmPz/NAMDgwkDdvAFiHmh7OdALIEm/5kJSfNfLPg3ELMCMQsQRwDxVzQDeJmQOCxImBVqswyUDzLsIBAnojuRBYuzQYZyQ+l/UFv/A7EYEDdgU0xI8z+o5v1ArAXEF4E4BOYdZAMYidTsCsS7gDgYiB8jG8BBpOYfUHWHgFge3QXImgXwaP4HjSEm5ED8j6QZxv+LQzNI3WeQGmQDfkA1wcBHILZBchm697jQA/E/jpSITTPOaCQmShmIMYAozegpkQWH5u9QNhMhA34zkAFApp7AkROJwccAAgwAv1dfdV8fv7YAAAAASUVORK5CYII=);
}
.autoindex-list>li span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
min-width: 200px;
display: inline-block;
color: #666;
padding-left: 10px;
padding-right: 10px;
background-color: rgba(255, 255, 255, 0.45);
}
.autoindex-copyright {
text-align: center;
padding: 10px;
color: #888;
font-size: 12px;
}
.autoindex-copyright a {
color: #2c66b1;
}
.autoindex-toggle {
cursor: pointer;
}
.autoindex-toggle.active {
font-weight: bold;
color: #0093ff;
}
.autoindex-unsupported {
position: absolute;
right: 0;
bottom: 0;
z-index: 6;
background-color: rgba(244, 244, 244, 0.45);
padding: 2px 5px;
font-size: 12px;
margin: 0;
color: #666;
}
@media (max-width: 640px) {
.autoindex-list>li {
padding-top: 6px;
padding-bottom: 6px;
line-height: 24px;
}
.autoindex-list>li a {
display: block;
white-space: normal;
word-break: break-all;
padding-top: 5px;
padding-bottom: 5px;
}
.autoindex-list>li span {
min-width: auto;
position: static;
font-size: 12px;
line-height: 16px;
color: #888;
background-color: transparent;
padding: 2px 0 5px 0;
}
}
a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 16px;
font-family: 微软雅黑;
}
a:hover {
text-decoration: underline;
color: blue;
font-size: 18px;
}
</style>
<script>
(function (window) {
var autoindex = {
db: {
prefix: 'autoindex_',
get: function (key) {
if (key) key = this.prefix + key;
return localStorage.getItem(key);
},
set: function (key, value) {
if (key) key = this.prefix + key;
localStorage.setItem(key, value);
},
remove: function (key) {
if (key) key = this.prefix + key;
localStorage.removeItem(key);
},
clear: function () {
localStorage.clear();
}
},
target: '',
toggle: function (action) {
switch (action) {
case 'target':
if (this.target) {
autoindex.db.remove('target');
} else {
autoindex.db.set('target', '_self');
};
location.reload();
break;
case 'reset':
autoindex.db.clear();
location.reload();
break;
default:
break;
};
},
init: function () {
if (window.localStorage) {
this.target = this.db.get('target');
};
if (typeof (document.querySelector) == 'function') {
var autoindexDoctype = document.implementation.createDocumentType('html', '', '');
if (document.doctype) {
document.replaceChild(autoindexDoctype, document.doctype);
} else {
document.insertBefore(autoindexDoctype, document.childNodes[0]);
};
var autoindexList = document.querySelector('body>pre');
if (autoindexList) {
var head = document.querySelector('head#autoindex-head');
if (!head) {
head = document.head;
var meta = document.createElement('meta');
meta.setAttribute('charset', 'utf-8');
head.appendChild(meta);
var link = document.createElement('link');
link.setAttribute('href', '/favicon.ico')
link.setAttribute('rel', 'shortcut icon')
head.appendChild(link);
meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width,initial-scale=1');
head.appendChild(meta);
meta = document.createElement('meta');
meta.setAttribute('http-equiv', 'X-UA-Compatible');
meta.setAttribute('content', 'IE=edge,chrome=1');
head.appendChild(meta);
meta = document.createElement('meta');
meta.setAttribute('name', '未名');
meta.setAttribute('content', 'https://blog.t725.cn');
head.appendChild(meta);
};
var listTag = 'ol';
var html = [], item = '', itemArr = [], itemLink = '', itemInfo = '', itemExternal = '';
var dataArr = autoindexList.innerHTML.split('\n');
for (var i in dataArr) {
item = String(dataArr[i]).trim();
if (item) {
if (item.indexOf('</a>') > -1) {
itemArr = item.split('</a>');
itemLink = String(itemArr[0]).trim();
if (i > 0) {
if (autoindex.target) {
itemLink = itemLink.replace('<a', '<a target="_self"') + '</a>';
} else {
itemExternal = itemLink.replace('<a', '<a class="external" target="_blank" title="external"') + '</a>';
};
};
itemInfo = String(itemArr[1]).trim();
item = itemLink + itemExternal + (itemInfo ? '<span>' + itemInfo + '</span>' : '');
};
html.push('<li' + (i == 0 ? ' class="parent"' : '') + '>' + item + '</li>');
itemArr = [];
item = itemLink = itemInfo = itemExternal = '';
};
};
if (html.length) {
html.unshift('<' + listTag + ' class="autoindex-list">');
html.push('</' + listTag + '>');
html.push('<p class="autoindex-copyright">© 2022-2025 <a target="_blank" href="https://blog.t725.cn" style="font-size:12px;text-decoration: underline;color: #888;">未名</a> / <a target="_blank" href="https://beian.miit.gov.cn/" style="font-size:12px;text-decoration: underline;color: #888;">湘ICP备2022023774号</a> </p>');
autoindexList.innerHTML = html.join('');
var autoindexToggle = document.querySelector('#autoindex-toggle');
if (autoindexToggle) {
autoindexToggle.onclick = function () {
autoindex.toggle('target');
};
};
};
html = item = itemArr = itemLink = itemInfo = '';
};
} else {
var autoindexUnsupported = 'autoindex ->> your browser didn\'t support : " document.querySelector "';
if (window.console) {
console.error(autoindexUnsupported);
} else {
document.write('<p class="autoindex-unsupported">' + autoindexUnsupported + '</p>');
};
};
}
};
autoindex.init();
window.autoindex = autoindex;
}(window));
</script>
<!-- autoindex for nginx -->
发表回复