Nginx上安装Fancyindex模块,让目录映射(autoindex)更加实用、美观_Mintimate的博客-程序员宅基地

技术标签: # Mintimate的博文  nginx  linux  服务器  

作者:Mintimate

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

Mintimate’s Blog,只为与你分享

封面

前言

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

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

在这里插入图片描述
本文同步发布在:

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源码
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,只为与你分享

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43890033/article/details/118208470

智能推荐

@RequestParam接收axios的post方式传递数据时的坑_post请求参数中有参数但是@requestparam报错-程序员宅基地

后端使用@RequestParam来接收参数,前端用axios的post方式传数据。但是一直报错400,请求无效。@RequestParam接收的请求头格式为:application/x-www-form-urlencoded开始以为是post没有配置content-Type请求头,然而我已经配置了。后来几经Google才发现,post传参的默认格式是json格式,所以才会一直报错。然后引入..._post请求参数中有参数但是@requestparam报错

Java正则篇-23-预定义字符类-程序员宅基地

前面一篇了解了字符类,这篇来学习预定义字符类。没什么好说的,先每个字符类都写一个正则表达式来测试下,通过举例一些正向和反向的例子来练习。反正一开始,用得少记不住每个字符的含义,后面用多了,自然就会写正则表达式。 1. 在API文档关于预定义字符类上面同样是用来匹配单个字符的 2. 代码练习 针对没个字符类写一个方法来测试package regex;public class Dem..._预定义字符类

http和https网页切换导致cookie失效问题_httponly http和https cookie不互通-程序员宅基地

网站先后从https和http方式登陆网站,会导致http中cookie无法生效,即https覆盖和http但作用域只在https中,在http中浏览器debug中查看不到相关cookie。之前遇到这个问题,网站登录和跳转出现问题,如果不仔细观察和思考很不容易发现以为是程序bug。其实也可以从web服务器配置入手杜绝,比如nginx配置http到https重定向。..._httponly http和https cookie不互通

编译原理_递归下降语法分析(源程序)_递归下降语法分析程序-程序员宅基地

编制一个递归下降分析程序,实现对词法分析程序所提供的单词序列的语法检查和结构分析。利用C语言编制递归下降分析程序,并对简单语言进行语法分析。_递归下降语法分析程序

Latex: "Missing $ inserted" 解决方法-程序员宅基地

参考:Latex报"Missing $ inserted"的解决方法Latex: "Missing $ inserted" 解决方法原因一:在文中出现"_",被latex识别为特殊字符。解决方法:在"_"前加上"",即"_"。原因二:在Latex算法排版时,没有在statement中加入$标识符。解决方法:\State $your_statement\;$2017.12转载于...

随便推点

远程连接ubuntu系统中的mysql_客户端连接ubuntn虚拟机mysql-程序员宅基地

1、启动虚拟机机,打开ubuntu系统Ubuntu20.04版本的源仓库中MySQL的默认版本已经更新到8.0,因此如果直接安装,mysql版本为8.0安装mysqlsudo apt-get install mysql-server出现下面信息,说明安装成功安装完成后,可以通过下面的命令来查看是否安装成功systemctl status mysql出现如下界面说明安装成功登录MySQL此时不知道root用户的密码,无法使用root密码登录,如何.._客户端连接ubuntn虚拟机mysql

主设备号和file_operations结构关系; ioctl和unlocked_ioctl, ioctl简单测试例子-程序员宅基地

open一个字符设备的过程是从VFS层open系统调用 ===> def_chr_fops-->open ===> cdev->fops->open===> device specific operation 如果是同一类设备,比如系统中有多个framebuffer,那么就把共有的操作放在cdev->fops->open ,这时向系统注册的仅仅是这一个驱动程序;将这类主设备

掌握回归模型的参数评估及超参数调优_梯度上升回归调参-程序员宅基地

掌握回归模型的参数评估及超参数调优对模型超参数进行调优(调参):对模型得优化不止局限于对模型算法的优化,比如:岭回归对线性回归的优化是通过在线性回归的损失函数中加入L2正则化项从而牺牲无偏性降低方差。但是,大家是否想过这样的问题:在L2正则化中参数 ???? 应该选择多少?是0.01、0.1、还是1?到目前为止,我们只能凭经验或者瞎猜,能不能找到一种方法找到最优的参数 ???? ?事实上,找到最佳参数的问题本质上属于最优化的内容,因为从一个参数集合中找到最佳的值本身就是最优化的任务之一,我们脑海中浮现出_梯度上升回归调参

java二进制转十进制_Java程序二进制数与十进制数相互转换_刘文龙PhD的博客-程序员宅基地

Java程序二进制数与十进制数相互转换在此程序中,您将学习使用Java中的函数实现二进制数与十进制数相互转换。示例1:将二进制数转换为十进制的程序publicclassBinaryDecimal{publicstaticvoidmain(String[]args){longnum=110110111;intdecimal=convertBinaryToDecimal(n..._java 0x20转化为十进制

文件格式和压缩格式介绍_压缩文件的格式-程序员宅基地

文件格式和压缩格式介绍一.常用的文件存储格式TEXTFILE textfile为默认格式,存储方式为行式存储,在检索时磁盘开销大 数据解析开销大,而对压缩的text文件 hive无法进行合并和拆分 SEQUENCEFILE 二进制文件,以<key,value>的形式序列化到文件中,存储方式为行式存储,可以对文件进..._压缩文件的格式

Boost 学习笔记-程序员宅基地

scopted_ptr: 一旦获取用户的管理权,就无法取回.template<class T>class scopted_ptr{private: T * px; scopted_ptr (scopted_ptr const &); scopted_ptr & operator = (scopted_ptr const& ); //禁止复制,保证了sc...