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

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参数，添加：

skip_render:
  - autoindex.html

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

---
layout: false
---

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

chmod -R 755 file

参考：

• phuslu主页
• nginx autoindex开启目录浏览和索引