使用 autoindex 页脚功能配置美化 nginx 目录
前面搭建了一个 Nginx 文件服务器,只是简单的展示了一下目录。现通过 autoindex 页面功能的配置来达到美化 nginx 目录的效果(参考网上教程)。autoindex on
配置展示 nginx 目录的默认版比较简单,样式也不太好看。新版有 github 风格,当然还有些差距。主要改进点如下:
- 使用 nginx 的 autoindex 页脚(footer) 功能添加 javascript 来重新渲染并美化页面。
- 使用 twitter bootstrap 和 github octicons 做素材, 并适配移动端。
- 检测当前页面 Readme.md 并渲染,和 github 保持一致。
改进方案
- 下载 autoindex.html 文件到 ftp 服务器根目录
- 在 autoindex 指令下添加
add_after_body /autoindex.html
,并重启 nginx。
autoindex.html 文件下载地址:https://phuslu.github.io/autoindex.html。
完整的 autoindex 指令如以下形式(虚拟主机配置不同,root 和 location 后跟的参数也不一样):
location / {
root /wwwroot/ftp/;
index index.html index.htm index.php;
autoindex on; # 显示目录(默认off)
autoindex_format html;
autoindex_exact_size off; # 显示精确文件大小
autoindex_localtime on; # 显示本地文件时间
add_after_body /autoindex.html;
}
unknown directive "add_after_body" 问题解决
在重启 nginx 的过程中,可能会报以下错误:
Stoping nginx... nginx: [emerg] unknown directive "add_after_body" in /usr/local/nginx/conf/vhost/domain.com.conf:23
failed. Use force-quit
add_after_body 指令不认识,这一般是由于 Nginx 编译时未将 ngx_http_addition_module 模块添加进去。add_after_body 指令被定义在 ngx_http_addition_module 模块中,具体点击查看文档。所以 Nginx 需要重新编译,并在编译时添加 --with-http_addition_module
参数。
我编译 Nginx 的参数如下:
./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-stream --with-http_gzip_static_module --with-http_sub_module --with-http_addition_module
因为之前版本就是编译而来的,所以不需要再安装依赖。否则,可能报错:openssl 已安装,nginx 编译仍报错: SSL modules require the OpenSSL library.。
隐藏 autoindex.html 文件
autoindex.html 会被自动添加到 Nginx 自动生成的目录页面中,进行渲染生效,但这个文件本身并不属于 ftp 服务器上传内容。如果不喜欢这个多余的文件,想把 autoindex.html 文件隐藏掉,还是有办法的。
这个办法主要借助的就是 Linux 系统默认不展示 .
开头的文件这一特性。常见的有 .
、..
、.git
之类的,这些文件或者文件夹本身系统默认隐藏的。.
和 ..
表示当前目录,和上级目录,不适合隐藏,可以自建一个 .git
文件夹(文件夹名字可以随便取),然后把 autoindex.html 文件到目录下面,最后修改配置为 add_after_body /.git/autoindex.html
,再次重启 Nginx 即可。
当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »