├── .autoindex
    ├── footer.html
    ├── header.html
    └── readme.md
├── LICENSE
├── README.md
├── autoindex_after.png
└── autoindex_before.png


/.autoindex/footer.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!-- autoindex for nginx -->
  3 | <style>
  4 | .autoindex-list,
  5 | .autoindex-copyright,
  6 | .autoindex-unsupported{
  7 | 	font-family: Monaco, "Microsoft Yahei", "Helvetica Neue", Simsun, Helvetica, Tahoma, Arial,sans-serif;
  8 | 	font-size: 14px;
  9 | }
 10 | 
 11 | .autoindex-list>li{
 12 | 	line-height:34px;
 13 | 	border-bottom:1px #ddd solid;
 14 | 	padding-left:10px;
 15 | 	padding-right:10px;
 16 | 	position:relative;
 17 | 	color:#999;
 18 | }
 19 | .autoindex-list>li:hover{
 20 | 	background-color:#eee;
 21 | 	border-bottom-color:#2CC38E;
 22 | }
 23 | .autoindex-list>li a{
 24 | 	text-decoration:none;
 25 | }
 26 | .autoindex-list>li a:hover{
 27 | 	text-decoration:underline;
 28 | }
 29 | .autoindex-list>li a.external{
 30 | 	font-size:0;
 31 | 	line-height:0;
 32 | 	width:10px;
 33 | 	height:10px;
 34 | 	display:inline-block;
 35 | 	vertical-align:middle;
 36 | 	margin-left:10px;
 37 | 	background-size:100%;
 38 | 	background-repeat:no-repeat;
 39 | 	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU4NDlBMTNGNkFBMjExRTc5QTBGRkY1NjU2Q0M4QkQ2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU4NDlBMTQwNkFBMjExRTc5QTBGRkY1NjU2Q0M4QkQ2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTg0OUExM0Q2QUEyMTFFNzlBMEZGRjU2NTZDQzhCRDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTg0OUExM0U2QUEyMTFFNzlBMEZGRjU2NTZDQzhCRDYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6I0xK9AAAA40lEQVR42mJkmPz/NAMDgwkDdvAFiHmh7OdALIEm/5kJSfNfLPg3ELMCMQsQRwDxVzQDeJmQOCxImBVqswyUDzLsIBAnojuRBYuzQYZyQ+l/UFv/A7EYEDdgU0xI8z+o5v1ArAXEF4E4BOYdZAMYidTsCsS7gDgYiB8jG8BBpOYfUHWHgFge3QXImgXwaP4HjSEm5ED8j6QZxv+LQzNI3WeQGmQDfkA1wcBHILZBchm697jQA/E/jpSITTPOaCQmShmIMYAozegpkQWH5u9QNhMhA34zkAFApp7AkROJwccAAgwAv1dfdV8fv7YAAAAASUVORK5CYII=);
 40 | }
 41 | .autoindex-list>li span{
 42 | 	position:absolute;
 43 | 	top:0;
 44 | 	right:0;
 45 | 	bottom:0;
 46 | 	min-width:300px;
 47 | 	display:inline-block;
 48 | 	color:#666;
 49 | 	padding-left:10px;
 50 | 	padding-right:10px;
 51 | 	background-color:rgba(255,255,255,0.45);
 52 | }
 53 | 
 54 | .autoindex-copyright{
 55 | 	text-align:right;
 56 | 	padding:10px;
 57 | 	color:#888;
 58 | 	font-size:12px;
 59 | }
 60 | .autoindex-copyright a{
 61 | 	color:#2c66b1;
 62 | }
 63 | .autoindex-toggle{
 64 | 	cursor:pointer;
 65 | }
 66 | .autoindex-toggle.active{
 67 | 	font-weight:bold;
 68 | 	color:#0093ff;
 69 | }
 70 | .autoindex-unsupported{
 71 | 	position:absolute;
 72 | 	right:0;
 73 | 	bottom:0;
 74 | 	z-index:6;
 75 | 	background-color:rgba(244,244,244,0.45);
 76 | 	padding:2px 5px;
 77 | 	font-size:12px;
 78 | 	margin:0;
 79 | 	color:#666;
 80 | }
 81 | 
 82 | @media (max-width: 640px){
 83 | 	.autoindex-list>li{
 84 | 		padding-top:6px;
 85 | 		padding-bottom:6px;
 86 | 		line-height:24px;
 87 | 	}
 88 | 	.autoindex-list>li a{
 89 | 		display:block;
 90 | 		white-space:normal;
 91 | 		word-break:break-all;
 92 | 		padding-top:5px;
 93 | 		padding-bottom:5px;
 94 | 	}
 95 | 	.autoindex-list>li span{
 96 | 		min-width:auto;
 97 | 		position:static;
 98 | 		font-size:12px;
 99 | 		line-height:16px;
100 | 		color:#888;
101 | 		background-color:transparent;
102 | 		padding:2px 0 5px 0;
103 | 	}
104 | }
105 | </style>
106 | <script>
107 | (function(window){
108 | 	var autoindex = {
109 | 		ver: '1.1',
110 | 		release: '201707171212',
111 | 		author: 'Jack.Chan',
112 | 		email: '971546@qq.com',
113 | 		db: {
114 | 			prefix: 'autoindex_',
115 | 			get: function(key){
116 | 				if(key)key = this.prefix + key;
117 | 				return localStorage.getItem(key);
118 | 			},
119 | 			set: function(key, value){
120 | 				if(key)key = this.prefix + key;
121 | 				localStorage.setItem(key, value);
122 | 			},
123 | 			remove: function(key){
124 | 				if(key)key = this.prefix + key;
125 | 				localStorage.removeItem(key);
126 | 			},
127 | 			clear: function(){
128 | 				localStorage.clear();
129 | 			}
130 | 		},
131 | 		target: '',
132 | 		toggle: function(action){
133 | 			switch(action){
134 | 				case 'target':
135 | 					if(this.target){
136 | 						autoindex.db.remove('target');
137 | 					}else{
138 | 						autoindex.db.set('target', '_blank');
139 | 					};
140 | 					location.reload();
141 | 					break;
142 | 				case 'reset':
143 | 					autoindex.db.clear();
144 | 					location.reload();
145 | 					break;
146 | 				default:
147 | 					break;
148 | 			};
149 | 		},
150 | 		init: function(){
151 | 			if(window.localStorage){
152 | 				this.target = this.db.get('target');
153 | 			};
154 | 			if(typeof(document.querySelector)=='function'){
155 | 				var autoindexDoctype = document.implementation.createDocumentType('html', '', '');
156 | 				if(document.doctype){
157 | 					document.replaceChild(autoindexDoctype, document.doctype);
158 | 				}else{
159 | 					document.insertBefore(autoindexDoctype, document.childNodes[0]);
160 | 				};
161 | 				var autoindexList = document.querySelector('body>pre');
162 | 				if(autoindexList){
163 | 					var head = document.querySelector('head#autoindex-head');
164 | 					if(!head){
165 | 						head = document.head;
166 | 						var meta = document.createElement('meta');
167 | 						meta.setAttribute('charset', 'utf-8');
168 | 						head.appendChild(meta);
169 | 						meta = document.createElement('meta');
170 | 						meta.setAttribute('name', 'viewport');
171 | 						meta.setAttribute('content', 'width=device-width,initial-scale=1');
172 | 						head.appendChild(meta);
173 | 						meta = document.createElement('meta');
174 | 						meta.setAttribute('http-equiv', 'X-UA-Compatible');
175 | 						meta.setAttribute('content', 'IE=edge,chrome=1');
176 | 						head.appendChild(meta);
177 | 						meta = document.createElement('meta');
178 | 						meta.setAttribute('name', 'author');
179 | 						meta.setAttribute('content', 'Jack.Chan');
180 | 						head.appendChild(meta);
181 | 					};
182 | 					var listTag = 'ol';
183 | 					var html = [], item = '', itemArr = [], itemLink = '', itemInfo = '', itemExternal = '';
184 | 					var dataArr = autoindexList.innerHTML.split('\n');
185 | 					for(var i in dataArr){
186 | 						item = String(dataArr[i]).trim();
187 | 						if(item){
188 | 							if(item.indexOf('</a>') > -1){
189 | 								itemArr = item.split('</a>');
190 | 								itemLink = String(itemArr[0]).trim();
191 | 								if(i>0){
192 | 									if(autoindex.target){
193 | 										itemLink = itemLink.replace('<a', '<a target="'+ autoindex.target +'"') + '</a>';
194 | 									}else{
195 | 										itemExternal = itemLink.replace('<a', '<a class="external" target="_blank" title="external"') + '</a>';
196 | 									};
197 | 								};
198 | 								itemInfo = String(itemArr[1]).trim();
199 | 								item = itemLink + itemExternal + (itemInfo ? '<span>'+ itemInfo +'</span>' : '');
200 | 							};
201 | 							html.push('<li'+ (i==0 ? ' class="parent"' : '') +'>'+ item +'</li>');
202 | 							itemArr = [];
203 | 							item = itemLink = itemInfo = itemExternal = '';
204 | 						};
205 | 					};
206 | 					if(html.length){
207 | 						html.unshift('<'+ listTag +' class="autoindex-list">');
208 | 						html.push('</'+ listTag +'>');
209 | 						html.push('<p class="autoindex-copyright"><span id="autoindex-toggle" class="autoindex-toggle'+ (autoindex.target ? ' active' :'') +'">autoindex</span> for Nginx.&nbsp;&copy;&nbsp;<a target="_blank" href="http://fulicat.com">fulicat.com</p>');
210 | 						autoindexList.innerHTML = html.join('');
211 | 						var autoindexToggle = document.querySelector('#autoindex-toggle');
212 | 						if(autoindexToggle){
213 | 							autoindexToggle.onclick = function(){
214 | 								autoindex.toggle('target');
215 | 							};
216 | 						};
217 | 					};
218 | 					html = item = itemArr = itemLink = itemInfo = '';
219 | 				};
220 | 			}else{
221 | 				var autoindexUnsupported = 'autoindex ->> your browser didn\'t support : " document.querySelector "';
222 | 				if(window.console){
223 | 					console.error(autoindexUnsupported);
224 | 				}else{
225 | 					document.write('<p class="autoindex-unsupported">'+ autoindexUnsupported +'</p>');
226 | 				};
227 | 			};
228 | 		}
229 | 	};
230 | 
231 | 	autoindex.init();
232 | 	window.autoindex = autoindex;
233 | }(window));
234 | </script>
235 | <!-- autoindex for nginx -->
236 | 


--------------------------------------------------------------------------------
/.autoindex/header.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head id="autoindex-head">
 4 | <meta charset="utf-8">
 5 | <meta name="viewport" content="width=device-width,initial-scale=1">
 6 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 7 | <meta name="author" content="Jack.Chan">
 8 | <meta name="description" content="">
 9 | <meta name="keywords" content="">
10 | <style>
11 | body>pre>a{
12 | 	margin-left:10px;
13 | }
14 | body>pre>a + a{
15 | 	margin-top:5px;
16 | 	display:inline-block;
17 | 	padding:5px 0;
18 | 	vertical-align:middle;
19 | }
20 | </style>
21 | </head>
22 | 


--------------------------------------------------------------------------------
/.autoindex/readme.md:
--------------------------------------------------------------------------------
 1 | # autoindex
 2 | 
 3 | autoindex for Nginx
 4 | 美化 Nginx 默认的目录文件 索引页
 5 | 
 6 | ------
 7 | 
 8 | ### 配置方法：
 9 | 
10 | 1. 复制 .autoindex 目录至 D:\websites\fulicat\
11 | ps: D:\websites\fulicat\\.autoindex
12 |   
13 | 
14 | 2. 修改 nginx.conf 文件
15 | 
16 | ```
17 | # fulicat.bz
18 | server {
19 |     listen          80;
20 |     server_name     fulicat.bz;
21 |     root            D:\websites\fulicat;
22 | 
23 |     location / {
24 |         index index.html index.htm index.php;
25 |     }
26 | 
27 |     # autoindex for nginx
28 |     location ~ ^(.*)/$ {
29 |         autoindex       on;
30 |         autoindex_localtime on;
31 |         autoindex_exact_size off;
32 | 
33 |         #add_before_body /.autoindex/header.html;
34 |         add_after_body /.autoindex/footer.html;
35 |     }
36 | 
37 |     location ~ \.php$ {
38 |         fastcgi_pass        127.0.0.1:9000;
39 |         fastcgi_index       index.php;
40 |         fastcgi_param       SCRIPT_FILENAME  $document_root$fastcgi_script_name;
41 |         include             fastcgi_params;
42 |     }
43 | }
44 | ```
45 | 
46 | ------
47 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Jack Chan
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # autoindex
 2 | autoindex for Nginx
 3 | 美化 Nginx 默认的目录文件 索引页
 4 | 
 5 | ------
 6 | 
 7 | ### 配置方法：
 8 | 
 9 | 1. 复制 .autoindex 目录至 D:\websites\fulicat\
10 | ps: D:\websites\fulicat\\.autoindex
11 |   
12 | 
13 | 2. 修改 nginx.conf 文件
14 | 
15 | ```
16 | # fulicat.bz
17 | server {
18 |     listen          80;
19 |     server_name     fulicat.bz;
20 |     root            D:\websites\fulicat;
21 | 
22 |     location / {
23 |         index index.html index.htm index.php;
24 |     }
25 | 
26 |     # autoindex for nginx
27 |     location ~ ^(.*)/$ {
28 |         autoindex       on;
29 |         autoindex_localtime on;
30 |         autoindex_exact_size off;
31 | 
32 |         #add_before_body /.autoindex/header.html;
33 |         add_after_body /.autoindex/footer.html;
34 |     }
35 | 
36 |     location ~ \.php$ {
37 |         fastcgi_pass        127.0.0.1:9000;
38 |         fastcgi_index       index.php;
39 |         fastcgi_param       SCRIPT_FILENAME  $document_root$fastcgi_script_name;
40 |         include             fastcgi_params;
41 |     }
42 | }
43 | ```
44 | 
45 | ------
46 | 
47 | 
48 | # Screenshots:
49 | 
50 | ### before:
51 | ![before](https://raw.githubusercontent.com/fulicat/autoindex/master/autoindex_before.png)
52 | 
53 | ### after:
54 | ![after](https://raw.githubusercontent.com/fulicat/autoindex/master/autoindex_after.png)
55 | 


--------------------------------------------------------------------------------
/autoindex_after.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fulicat/autoindex/c20d8a9bda4242462b7bfe45d3214ee2221f6e86/autoindex_after.png


--------------------------------------------------------------------------------
/autoindex_before.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fulicat/autoindex/c20d8a9bda4242462b7bfe45d3214ee2221f6e86/autoindex_before.png


--------------------------------------------------------------------------------