nginx文件服务器美化autoindex显示

网络上很多使用nginx来作为文件服务器的，前段时间公司也有这个需求，就研究了一下使用nginx来做文件服务器，参见前面两篇文章：

容器中使用ngnix搭建支持上传下载的文件服务器
使用nginx容器并搭建sftp服务

但是nginx原生的autoindex显示界面很一般，网上也有使用Nginx-Fancyindex插件来的，但是需要自己编译nginx，比较麻烦，笔者使用的容器版本的nginx，所以放弃了它，而选择了add_after_body的方式。

感谢 phuslu 写了一个 autoindex.html，可以非常方便的进行美化，只需要在nginx配置中添加一行：

add_after_body /autoindex.html;

非常方便。

作者的展示站点：https://phus.lu/

它还支持展示目录中的README.md文件，非常不错。

在站点中，作者为了方便大家获取autoindex.html，将其放在了文件服务器中显示。在实际应用中，该文件不应该让大家看到，可以将其改为隐藏文件，即改名为.autoindex.html。但是如果文件服务器的下载目录同时是为了方便别人上传文件（上传的人只能访问此目录），此时有不相关的文件就不太合适了。所以笔者修改了相应的配置，将autoindex.html放在了另一个目录，这里列一下nginx的主要配置：

server {
		......
		root share;
        charset utf-8;

        add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload";

        add_header cache-control "no-cache";
        add_header access-control-allow-origin "*";
        add_header referrer-policy "no-referrer";
        add_header x-content-type-options nosniff;
        add_header x-xss-protection "1; mode=block";
        add_header x-frame-options sameorigin;

        location = /autoindex.html {
            root   html;
        }
        
        location ~ ^(.*)/$ {
            autoindex       on;
            autoindex_localtime on;
            autoindex_exact_size off;
            add_after_body /autoindex.html;
        }

        location ~ .md$ {
            default_type text/plain;
        }

        location ~ .(log|pac|keys|lua|json|yaml|toml|conf|cmd|sh|bash|h|c|cpp|hpp|py|go|service)$ {
            default_type text/plain;
        }

        location ~ ^/(bashrc|vimrc)$ {
            default_type text/plain;
        }
        ......

作者还写了一个markdown.html用于渲染markdown文件为html，但是有一个问题就是导致下载的所有的md文件后面都有markdown.html的代码。笔者通过研究，在展示后面加了一列preview，如果是markdown文件，则会在后面显示一个preview按钮，点它则会新建一个窗口，来展示经过html渲染的markdown文件（markdown的是通过marked来渲染的，功能有限）。如下图所示：

附上autoindex.html：

参考：
https://1kb.day/posts/nginx_autoindex.html
https://akawa.ink/2020/05/23/make-nginx-autoindex-page-beauty