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

参考: