Nginx上安装Fancyindex模块，让目录映射(autoindex)更加实用、美观 |
您所在的位置：网站首页 › nginx文件目录美化 › Nginx上安装Fancyindex模块，让目录映射(autoindex)更加实用、美观 |
Nginx上安装Fancyindex模块，让目录映射(autoindex)更加实用、美观
|
作者：Mintimate 博客：https://www.mintimate.cn Mintimate's Blog，只为与你分享  前言本文是在安装了Nginx情况下，对如何使用autoindex以及安装Fancyindex模块的详解，如果你事先并没安装Nginx，可以参考文章： 一篇文章、三种方法在Debian上轻松安装Nginx：https://cloud.tencent.com/developer/article/1834769建议使用编译安装的方法，安装Nginx，或者使用宝塔这类软件，选择编译安装Nginx，如：腾讯云轻量应用服务器：  Nginx目录映射Nginx提供了目录映射功能，也就是Nginx autoindex模块，前置以来：ngx_http_autoindex_module模块，通常的编译都有这个模块。使用这个模块，可以轻松把本地（服务器）上的目录映射到网站目录下。 主要应用于下载、提供文件直链。如：腾讯软件源  设置autoindex原生的Nginx，在确保安装了ngx_http_autoindex_module模块后（一般安装Nginx都会有安装），即可使用 本地目录地址：/www/wwwroot/***.mintimate.cn/resources  对应地，我们在Nginx上的设置： # 拦截所有/data开头路径访问 location ^~/data{ autoindex on; alias "/www/wwwroot/***.mintimate.cn/resources"; autoindex_exact_size off; autoindex_localtime on; charset utf-8; #解决中文显示乱码问题 }其中： 之后，浏览器访问即可：  Fancyindex模块当然，这样的autoindex目录映射，功能少、样式单一，如果我是想依靠Nginx的目录浏览映射功能，开个网站子页面，如何美化呢？试试Fancyindex模块：  环境准备环境准备： Nginx编译环境Fancyindex源码Fancyindex皮肤（可选）Nginx编译环境什么是Nginx编译环境呢？就是我上篇文章里编译安装Nginx的源码以及编译所需要的环境（gcc+、PCRE等）。比如我的Nginx编译环境： PCRE正则库OpenSSL包zlib库以及：  下载Fancyindex源码你可以直接到Fancyindex项目地址下载和看指南： https://github.com/aperezdc/ngx-fancyindex 当然，因为Fancyindex模块已经录入到Nginx官方库，也可以去Nginx官方下载和看指南： https://www.nginx.com/resources/wiki/modules/fancy_index/ 我们这直接下载源码： # 使用Git git clone https://github.com/aperezdc/ngx-fancyindex.git ngx-fancyindex或者直接到项目发布页面，用wget等工具下载  # 下载0.5.1版本
wget "https://github.com/aperezdc/ngx-fancyindex/releases/download/v0.5.1/ngx-fancyindex-0.5.1.tar.xz" 下载好后，我们解压： # 使用tar解压 tar -xf ngx-fancyindex-0.5.1.tar.xz 记得源码路径嗷，比如我的：/home/mintimate/ngx-fancyindex-0.5.1 重新编译Nginx常规编译确保Nginx已经关闭： # 关闭Nginx nginx -s quit有了Fancyindex源码后，我们重新编译Nginx。我之前的编译： ./configure \--prefix=/etc/nginx \--sbin-path=/usr/sbin/nginx \--conf-path=/etc/nginx/nginx.conf \--error-log-path=/var/log/nginx/error.log \--http-log-path=/var/log/nginx/access.log \--pid-path=/var/run/nginx.pid \--lock-path=/var/run/nginx.lock \--http-client-body-temp-path=/var/cache/nginx/client_temp \--http-proxy-temp-path=/var/cache/nginx/proxy_temp \--http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp \--http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp \--http-scgi-temp-path=/var/cache/nginx/scgi_temp \--user=www \--group=www \--with-file-aio \--with-threads \--with-http_addition_module \--with-http_auth_request_module \--with-http_dav_module \--with-http_flv_module \--with-http_gunzip_module \--with-http_gzip_static_module \--with-http_mp4_module \--with-http_random_index_module \--with-http_realip_module \--with-http_secure_link_module \--with-http_slice_module \--with-http_ssl_module \--with-http_stub_status_module \--with-http_sub_module \--with-http_v2_module \--with-mail \--with-mail_ssl_module \--with-stream \--with-stream_realip_module \--with-stream_ssl_module \--with-stream_ssl_preread_module为了更方便查看： ./configure \--prefix=/etc/nginx \--sbin-path=/usr/sbin/nginx \--conf-path=/etc/nginx/nginx.conf \--error-log-path=/var/log/nginx/error.log \--http-log-path=/var/log/nginx/access.log \--pid-path=/var/run/nginx.pid \--lock-path=/var/run/nginx.lock \--http-client-body-temp-path=/var/cache/nginx/client_temp \--http-proxy-temp-path=/var/cache/nginx/proxy_temp \--http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp \--http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp \--http-scgi-temp-path=/var/cache/nginx/scgi_temp \--user=www \--group=www \--with-file-aio \--with-threads \--with-http_addition_module \--with-http_auth_request_module \--with-http_dav_module \--with-http_flv_module \--with-http_gunzip_module \--with-http_gzip_static_module \--with-http_mp4_module \--with-http_random_index_module \--with-http_realip_module \--with-http_secure_link_module \--with-http_slice_module \--with-http_ssl_module \--with-http_stub_status_module \--with-http_sub_module \--with-http_v2_module \--with-mail \--with-mail_ssl_module \--with-stream \--with-stream_realip_module \--with-stream_ssl_module \--with-stream_ssl_preread_module这次需要添加Fancyindex模块，模块路径是/home/mintimate/ngx-fancyindex-0.5.1，使用这次编译，添加--add-module参数： ./configure \--prefix=/etc/nginx \--sbin-path=/usr/sbin/nginx \--conf-path=/etc/nginx/nginx.conf \--error-log-path=/var/log/nginx/error.log \--http-log-path=/var/log/nginx/access.log \--pid-path=/var/run/nginx.pid \--lock-path=/var/run/nginx.lock \--http-client-body-temp-path=/var/cache/nginx/client_temp \--http-proxy-temp-path=/var/cache/nginx/proxy_temp \--http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp \--http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp \--http-scgi-temp-path=/var/cache/nginx/scgi_temp \--user=www \--group=www \--with-file-aio \--with-threads \--with-http_addition_module \--with-http_auth_request_module \--with-http_dav_module \--with-http_flv_module \--with-http_gunzip_module \--with-http_gzip_static_module \--with-http_mp4_module \--with-http_random_index_module \--with-http_realip_module \--with-http_secure_link_module \--with-http_slice_module \--with-http_ssl_module \--with-http_stub_status_module \--with-http_sub_module \--with-http_v2_module \--with-mail \--with-mail_ssl_module \--with-stream \--with-stream_realip_module \--with-stream_ssl_module \--with-stream_ssl_preread_module \--add-module=/home/mintimate/ngx-fancyindex-0.5.1  之后编译： make && make install 宝塔面板编译如果你是使用宝塔面板的用户（如：腾讯云轻量应用服务器定制宝塔面版、官方宝塔面板等），可以使用宝塔的Nginx编译（不是快速安装，是编译安装）：   之后，等待编译完成即可：  使用Fancyindex使用Fancyindex很简单，我们编辑Nginx配置文件（我Nginx是编译安装在/etc/nginx)： vim /etc/nginx/nginx.conf更改/添加映射： location ^~/data{ alias /www/wwwroot/www.mintimate.cn/resources;# 映射地址 fancyindex on; # 使用fancyindex fancyindex_exact_size off; # 不显示精确大小 fancyindex_time_format "%Y-%m-%d %H:%M";# 文件日期 fancyindex_localtime on;# 使用用户本地时间 }之后，保存，浏览器访问即可看到效果：  当然，之所以看不到我文章开头的效果，是因为我自定义了页头和页尾。 美化Fancyindex对刚刚的Fancyindex配置，再度修改： location ^~/data{ alias /www/wwwroot/www.mintimate.cn/resources;# 映射地址 fancyindex on; # 使用fancyindex fancyindex_exact_size off; # 不显示精确大小 fancyindex_time_format "%Y-%m-%d %H:%M";# 文件日期 fancyindex_localtime on;# 使用用户本地时间 # 页面头 fancyindex_header /data/myStyle/header.html; # 页尾 fancyindex_footer /data/myStyle/footer.html; # 忽略的文件夹/文件 fancyindex_ignore "myStyle"; fancyindex_ignore "README.md"; }其中，/data/myStyle/header.htm其实是Html的上半部分，比如我的： 在线工具箱-隐藏菜单 当前目录:而/data/myStyle/footer.htm就是下半部分了： Power By Mintimate's Blog var converter = new showdown.Converter({tables: true}); $( "#raw_include_HEADER_md" ).load( "HEADER.md", function (){ var elem = document.querySelector("#raw_include_HEADER_md"); // strip leading whitespace so it isn't evaluated as code var text = elem.innerHTML; // console.log("text =", text); text = text.replace(/\n[ ]*/g, '\n'); // console.log("text =", text); var html = converter.makeHtml(text); // console.log("html =", html); // here, have some HTML elem.innerHTML = html; }); $( "#raw_include_README_md" ).load( "README.md", function (){ var elem = document.querySelector("#raw_include_README_md"); // strip leading whitespace so it isn't evaluated as code var text = elem.innerHTML; // console.log("text =", text); text = text.replace(/\n[ ]*/g, '\n'); // console.log("text =", text); var html = converter.makeHtml(text); // console.log("html =", html); // here, have some HTML elem.innerHTML = html; });如果你不会自己设置，可以看看别人的模版或者主题，比如： Nginx-Fancyindex-Theme：https://github.com/Naereen/Nginx-Fancyindex-Theme 我的主题，就是基于这个主题，加上Bootstrap4修改而来。 哈哈，如果有小伙伴想要我的主题，就评论区留言吧，留言的人多，我就打包分享出来。 总结Fancyindex其实还有很多参数，可以参考官方文档：https://github.com/aperezdc/ngx-fancyindex#directives Fancyindex确实比传统autoindex好用很多，也更多自定义，如果是需要映射目录，确实是个不错的选择。而如果你一般是用软件管理包安装的Nginx（如：apt-get），虽然不能安装Fancyindex，但是autoindex的功能也足够了。 作者：Mintimate 博客：https://www.mintimate.cn Mintimate's Blog，只为与你分享 |
【本文地址】
今日新闻 |
推荐新闻 |