当前位置：主页 > 查看内容

Nginx上安装Fancyindex模块，让目录映射(autoindex)更加实用、美

发布时间：2021-06-21 00:00| 有位朋友查看

简介：作者：Mintimate 博客： https://www.mintimate.cn Mintimates Blog，只为与你分享封面嗷前言本文是在安装了Nginx情况下，对如何使用autoindex以及安装Fancyindex模块的详解，如果你事先并没安装Nginx，可以参考文章：一篇文章、三种方法在Debian上轻松……

作者：Mintimate

博客：https://www.mintimate.cn

Mintimate's Blog，只为与你分享

封面嗷

前言

本文是在安装了Nginx情况下，对如何使用autoindex以及安装Fancyindex模块的详解，如果你事先并没安装Nginx，可以参考文章：

一篇文章、三种方法在Debian上轻松安装Nginx：https://cloud.tencent.com/developer/article/1834769

建议使用编译安装的方法，安装Nginx，或者使用宝塔这类软件，选择编译安装Nginx，如：腾讯云轻量应用服务器：

不会Linux的入门用户也可以轻松

Nginx目录映射

Nginx提供了目录映射功能，也就是Nginx autoindex模块，前置以来：ngx_http_autoindex_module模块，通常的编译都有这个模块。使用这个模块，可以轻松把本地（服务器）上的目录映射到网站目录下。

主要应用于下载、提供文件直链。如：腾讯软件源

腾讯软件源下AndroidSDK

设置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模块：

Fancyindex模块效果

环境准备

环境准备：

Nginx编译环境
Fancyindex源码
Fancyindex皮肤（可选）

Nginx编译环境

什么是Nginx编译环境呢？就是我上篇文章里编译安装Nginx的源码以及编译所需要的环境（gcc+、PCRE等）。比如我的Nginx编译环境：

PCRE正则库
OpenSSL包
zlib库

以及：

Nginx源码

下载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等工具下载

Fancyindex发布地址

# 下载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

开始准备

Makefile生成完成

之后编译：

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

对刚刚的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的上半部分，比如我的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <title>在线工具箱-隐藏菜单</title>
        <link rel="icon" type="image/svg" href="/favicon.svg">
        <!--bootstrap-->
        <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/data/myStyle/styles.css">
        <script type="text/javascript" src="/data/myStyle/jquery.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    </head>
<body>
<div class="container">
<div class="row">
    <div class="col-12" id="raw_include_HEADER_md"></div>
    <div class="col-12">
<h1>当前目录:

而/data/myStyle/footer.htm就是下半部分了：

</div>
</div>
<div class="row">
    <div class="col-12" id="raw_include_README_md"></div>
    <footer class="col-12 pt-5">
        Power By <a href="https://www.mintimate.cn">Mintimate's Blog</a>
    </footer>
    <script src="https://unpkg.com/xregexp/xregexp-all.js"></script>
    <script type="text/javascript" src="/data/myStyle/addNginxFancyIndexForm.js"></script>
    <script type="text/javascript" src="/data/myStyle/showdown.min.js"></script>
    <script type="text/javascript" defer>
    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;
    });
</script>
</div>
</div>
</body>
</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，只为与你分享

本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：系统设计面试：负载均衡 下一篇：没有了

随机推荐

一款Kafka可视化Web界面管理工具：CMAK

使用过KafKa集群的人都知道，要记住KafKa的命令对于新手确实比较难，所以一般都...
东南亚安全高效快递机器人HelloWorldRobo

当有创新者发现大众需求然后致力于为大多数人的利益寻求解决方案时，往往会铸就...
汇量科技SpotMax上线AWS Marketplace 助

日前，全球性技术平台汇量科技(Mobvista)宣布，旗下云计算业务品牌SpotMax已正式...
每次易主都轰动一时！域名fly.com被北美

TOP云（west.cn）5月31日消息，5月初，极品英文域名 fly.com以289万美元（1991...
阿里云加速器创新时辰深圳站闭幕，发布集

为了创造新机遇、打造新繁荣，在“十四五”新趋势的引领下，阿里云加速器牵手全...
罗美琪和春波特的故事...

作者 | 辽天来源 | 阿里巴巴云原生公众号导读：rocketmq-spring 经过 6 个多月...
Python数据分析，必须要求掌握Pandas大熊

我写的pandas不是我国可爱的大熊猫国宝 pandas 是基于NumPy 的一种工具，该工具...
刚注册的域名怎么解析不了

刚注册的域名怎么解析不了？刚注册的域名解析不了，多半是未完成实名认证。注...
详解LongAdder实现原理

前言 AtomicInteger、AtomicLong使用非阻塞的CAS算法原子性地更新某一个变量，比...
蒙牛集团信息技术助理副总裁、CIO张决：

蒙牛双中台支撑线上线下融合线上引流线下提货数据洞察赋能助力传统销售模式数...

Nginx上安装Fancyindex模块，让目录映射(autoindex)更加实用、美

前言

Nginx目录映射

设置autoindex

环境准备

Nginx编译环境

下载Fancyindex源码

重新编译Nginx

常规编译

宝塔面板编译

使用Fancyindex

美化Fancyindex

总结

推荐图文

Java中那些让你傻傻分不清楚的小细节

Web 应用防火墙 CC 防护设置2.0 - 操作指南

傻傻分不清之Cookie、Session、Token、JWT

百信银行正式开业！启用域名aibank.com上线官网

RDS表更新数据恢复

投资人爆料，pro域名一个月内注册量达到20万

随机推荐

一款Kafka可视化Web界面管理工具：CMAK

东南亚安全高效快递机器人HelloWorldRobo

汇量科技SpotMax上线AWS Marketplace 助

每次易主都轰动一时！域名fly.com被北美

阿里云加速器创新时辰深圳站闭幕，发布集

罗美琪和春波特的故事...

Python数据分析，必须要求掌握Pandas大熊

刚注册的域名怎么解析不了

详解LongAdder实现原理

蒙牛集团信息技术助理副总裁、CIO张决：

关于我们