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

参考：

相关文章