nginx 文件服务器美化

by

网络上很多使用 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|ini|txt|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：