Nginx上开启和美化Autoindex

本来想在 VPS 上挂个网盘的,但想到 Nginx 上的 autoindex 好像也够用了。Nginx 默认是不允许列出整个目录的,如需此功能,打开 nginx.conf 文件或你要启用目录浏览虚拟主机的配置文件,在 server 或 location 段里添加上 autoindex on; 来启用目录浏览,下面详细说明。

开启autoindex目录浏览

Nginx 的目录浏览有两个比较有用的参数,可以根据自己的需求添加:

autoindex_exact_size off;

默认为 on,显示出文件的确切大小,单位是 bytes

改为 off 后,显示出文件的大概大小,单位是 kB 或者 MB 或者 GB

autoindex_localtime on;

默认为 off,显示的文件时间为 GMT 时间

改为 on 后,显示的文件时间为文件的服务器时间

添加在 server 的 443 端口下:

vi /etc/nginx/sites-available/default 或者 vi /etc/nginx/nginx.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
location /cloud {   # 开启二级目录
# 美化autoindex目录
add_after_body /autoindex.html;
# 开启目录浏览和索引
autoindex on;
# 显示文件大小
autoindex_exact_size off;
# 显示文件时间
autoindex_localtime on;
# alias目录软链接,也就是服务器上的文件目录
alias /image/;
# txt,html等文件不在浏览器打开,直接下载
if ($request_filename ~* ^.*?\.(txt|html|conf|doc|pdf|rar|gz|zip|docx|exe|xlsx|ppt|pptx)$){
add_header Content-Disposition 'attachment';
}
}

美化autoindex目录

这里要感谢 phuslu 写的 autoindex.html,可以看到上面有一行 add_after_body /autoindex.html; 这是为了美化那个丑到姥姥家的原生 autoindex 目录,下面是 autoindex 的改进和使用方法:

改进:

1、使用 nginx 的 autoindex 页脚 (footer) 功能添加 javascript 来重新渲染并美化页面。

2、使用 twitter bootstrap 和 github octicons 做素材, 并适配移动端。

3、检测当前页面 Readme.md 并渲染,和 github 保持一致。

使用方法:

1、把 autoindex.html 文件下载到网站 wwwroot 根目录,如果使用 hexo 主题可以直接把 autoindex.html 文件丢到 source 文件夹,然后 hexo d 到根目录。

2、在 nginx autoindex 指令下面添加 add_after_body /autoindex.html; 然后重启 nginx 即可。(上面配置文件已添加)

3、完整配置例子请见 https://phus.lu/autoindex.html

autoindex 美化后的效果:https://starts.sh/cloud/

注意事项

1、Hexo 上传到网站根目录的 autoindex.html 文件,要添加 skip 例外,否则 hexo 会渲染 html 文件导致 autoindex.html 乱码。

打开 hexo 站点配置文件 _config.yml,找到 skip_render 参数,添加:

1
2
skip_render:
- autoindex.html

或者在 autoindex.html 文件上部添加如下代码:

1
2
3
---
layout: false
---

2、挂载在 vps 上用于下载或浏览的目录,一定要给予 755 或 644 权限,否则浏览器会报403,

1
chmod -R 755 file

参考: