The results of
methods
Add a beautified file with add_after_body (note that the file is addressed based on your root)
<! -- autoindex for nginx -->
<style>
body {
/* It is recommended to save the background image and use its own path */
background: #fff url(http://124.70.75.77:8080/image/img1.png) no-repeat fixed center center;
background-size: 100% 100%;
}
h1 {
text-align:center;
}
.autoindex-list..autoindex-copyright..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:340px;
margin-right:240px;
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/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvb S5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iY WRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gP HJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvd XQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tL yIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvd G9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU4NDlBMTNGNkFBMjExRTc5QTBGRkY1NjU2Q0M4QkQ2IiB4bXBNT TpEb2N1bWVudElEPSJ4bXAuZGlkOjU4NDlBMTQwNkFBMjExRTc5QTBGRkY1NjU2Q0M4QkQ2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlS UQ9InhtcC5paWQ6NTg0OUExM0Q2QUEyMTFFNzlBMEZGRjU2NTZDQzhCRDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTg0OUExM0U2QUEyMTFFNzlBM EZGRjU2NTZDQzhCRDYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6I0xK9AAAA40lEQ VR42mJkmPz/NAMDgwkDdvAFiHmh7OdALIEm/5kJSfNfLPg3ELMCMQsQRwDxVzQDeJmQOCxImBVqswyUDzLsIBAnojuRBYuzQYZyQ+l/UFv/A7EYEDdgU0xI8 z+o5v1ArAXEF4E4BOYdZAMYidTsCsS7gDgYiB8jG8BBpOYfUHWHgFge3QXImgXwaP4HjSEm5ED8j6QZxv+LQzNI3WeQGmQDfkA1wcBHILZBchm697jQA/E/j pSITTPOaCQmShmIMYAozegpkQWH5u9QNhMhA34zkAFApp7AkROJwccAAgwAv1dfdV8fv7YAAAAASUVORK5CYII=);
}
.autoindex-list>li span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
min-width: 300px;
display: inline-block;
color: # 666;
padding-left: 10px;
padding-right: 10px;
background-color: rgba(255.255.255.0.45);
}
.autoindex-copyright {
text-align: right;
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-familyMicrosoft Yahei; }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);
/* Similarly, this site logo is also suggested to use their own */
var link = document.createElement('link');
link.setAttribute('href'.'http://124.70.75.77:8080\\autoindex\\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'.'author');
meta.setAttribute('content'.'to chongqing');
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('welcome to my resource pool. If you are interested, You can visit my blog
');
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 -->
Copy the code
The background image
My site icon
Ps:
It is recommended to save the background image and use your own path, as well as the website icon, try to use your own, and the footer link is my CSDN blog, remember to change.
