nginx autoindex美化

nginx默认的目录浏览（autoindex）界面比较简约，长得像下面这样：

 

autoindex是可以自定义html、css这些的，以此来实现自定义的界面和功能。

我的nginx核心配置如下。一开始是从html那里获取文件信息，总是有bug。于是我命令Claude改成从json读取文件信息。

	location /images/ {
		alias /usr/share/nginx/html/images/;
		default_type    text/html;
		index  index.html index.htm index login;
		try_files $uri $uri/ /index.html last;
		
		autoindex on;
		autoindex_localtime on;
		autoindex_format html;
		autoindex_exact_size on;
		charset utf-8;  # 保证以中文命名的文件显示不会乱码
		
		add_before_body /header.html;
    }

	location ~ ^/json/images(.*)$ {
		alias /usr/share/nginx/html/images/$1;
		autoindex on;
		autoindex_format json;
		autoindex_localtime on;
		autoindex_exact_size on;
		charset utf-8;
		
		add_header Content-Type application/json;
		add_header Access-Control-Allow-Origin *;
   }

 

但全网也没找到一个满足需求的美化版本，于是我给Claude提需求，它便埋头写出来了。大抵是不少码农要被AI替代了。

我的需求很简单，给图片文件显示缩略图，支持列表模式和缩略图模式切换，能够一键下载、一键复制非URL编码的文件链接。

 

 

用到的测试图片分享在网盘了，需要的自取

链接：https://pan.quark.cn/s/578736947897