当前位置:

nginx autoindex自动美化

访客 2024-01-05 348 0

结果

方法

利用add_after_body添加一个美化文件(注意该文件的寻址方式是基于你的root的)

美化文件如下,这个一个.html文件,别搞错了

<!--autoindexfornginx--><style>body{/*建议把背景图片保存下来用自己的路径*/background:#fffurl(http://124.70.75.77:8080/image/img1.png)no-repeatfixedcentercenter;background-size:100%100%;}h1{text-align:center;}.autoindex-list,.autoindex-copyright,.autoindex-unsupported{font-family:Monaco,"MicrosoftYahei","HelveticaNeue",Simsun,Helvetica,Tahoma,Arial,sans-serif;font-size:14px;}.autoindex-list>li{line-height:34px;border-bottom:1px#dddsolid;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>lia{text-decoration:none;}.autoindex-list>lia:hover{text-decoration:underline;}.autoindex-list>lia.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/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU4NDlBMTNGNkFBMjExRTc5QTBGRkY1NjU2Q0M4QkQ2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU4NDlBMTQwNkFBMjExRTc5QTBGRkY1NjU2Q0M4QkQ2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTg0OUExM0Q2QUEyMTFFNzlBMEZGRjU2NTZDQzhCRDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTg0OUExM0U2QUEyMTFFNzlBMEZGRjU2NTZDQzhCRDYiLz4gPC9yZGY6RGVzY3JpcHRpb24IDwvcmRmOlJERj4gPC94OnhtcG1ldGEIDw/eHBhY2tldCBlbmQ9InIiPz6I0xK9AAAA40lEQVR42mJkmPz/NAMDgwkDdvAFiHmh7OdALIEm/5kJSfNfLPg3ELMCMQsQRwDxVzQDeJmQOCxImBVqswyUDzLsIBAnojuRBYuzQYZyQl/UFv/A7EYEDdgU0xI8zo5v1ArAXEF4E4BOYdZAMYidTsCsS7gDgYiB8jG8BBpOYfUHWHgFge3QXImgXwaP4HjSEm5ED8j6QZxvLQzNI3WeQGmQDfkA1wcBHILZBchm697jQA/E/jpSITTPOaCQmShmIMYAozegpkQWH5u9QNhMhA34zkAFApp7AkROJwccAAgwAv1dfdV8fv7YAAAAASUVORK5CYII=);}.autoindex-list>lispan{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-copyrighta{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:2px5px;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>lia{display:block;white-space:normal;word-break:break-all;padding-top:5px;padding-bottom:5px;}.autoindex-list>lispan{min-width:auto;position:static;font-size:12px;line-height:16px;color:#888;background-color:transparent;padding:2px05px0;}}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){varautoindex={db:{prefix:'autoindex_',get:function(key){if(key)key=this.prefixkey;returnlocalStorage.getItem(key);},set:function(key,value){if(key)key=this.prefixkey;localStorage.setItem(key,value);},remove:function(key){if(key)key=this.prefixkey;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'){varautoindexDoctype=document.implementation.createDocumentType('html','','');if(document.doctype){document.replaceChild(autoindexDoctype,document.doctype);}else{document.insertBefore(autoindexDoctype,document.childNodes[0]);};varautoindexList=document.querySelector('body>pre');if(autoindexList){varhead=document.querySelector('head#autoindex-head');if(!head){head=document.head;varmeta=document.createElement('meta');meta.setAttribute('charset','utf-8');head.appendChild(meta);/*同样,这个网站标识的东西也建议用自己的*/varlink=document.createElement('link');link.setAttribute('href','http://124.70.75.77:8080\\autoindex\\favicon.ico')link.setAttribute('rel','shortcuticon')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','至渝');head.appendChild(meta);};varlistTag='ol';varhtml=[],item='',itemArr=[],itemLink='',itemInfo='',itemExternal='';vardataArr=autoindexList.innerHTML.split('\n');for(variindataArr){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','<atarget="_self"')'</a>';}else{itemExternal=itemLink.replace('<a','<aclass="external"target="_blank"title="external"')'</a>';};};itemInfo=String(itemArr[1]).trim();item=itemLinkitemExternal(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('<pclass="autoindex-copyright">welcometomyresourcepool.Ifyouareinterested,youcanvisit<atarget="_blank"href="https://blog.csdn.net/qq_43657442?spm=1011.2124.3001.5343"style="font-size:12px;text-decoration:underline;color:blue;">myblog</p>');autoindexList.innerHTML=html.join('');varautoindexToggle=document.querySelector('#autoindex-toggle');if(autoindexToggle){autoindexToggle.onclick=function(){autoindex.toggle('target');};};};html=item=itemArr=itemLink=itemInfo='';};}else{varautoindexUnsupported='autoindex->>yourbrowserdidn\'tsupport:"document.querySelector"';if(window.console){console.error(autoindexUnsupported);}else{document.write('<pclass="autoindex-unsupported">'autoindexUnsupported'</p>');};};}};autoindex.init();window.autoindex=autoindex;}(window));</script><!--autoindexfornginx-->

背景图片

我的网站图标

ps:

建议把背景图片保存下来用自己的路径,同样网站图标也是,尽量用自己的,还有就是页脚的链接是我的csdn博客,记得改。

文件结构

发表评论

  • 评论列表
还没有人评论,快来抢沙发吧~