nginx autoindex美化

Nginx的autoindex默认界面十分简陋，Naereen的fancyindex主题太久没有更新，有点跟不上现在的屏幕，因此基于Naereen’s fancyindex theme(light)修改了一个fancyindex主题Nginx-Fancyindex-Theme-WhiteSmoke

Nginx-Fancyindex-Theme-WhiteSmoke

这是一个基于 Naereen’s fancyindex theme(light)的nginx index主题，搭配了hustcc的动画背景 canvas-nest.js@1.0.1 。

如何设置主题

如果想自定义布局或风格的话，需要修改 styles.css。
js脚本文件的引用基本都在 footer.html 里，修改Script块来选择开启/关闭对应的功能。

***loadmd.js***是将HEADER.md和FOOTER.md加载到页面的脚本，移除对应的Script块可以关闭功能。

canvas-nest.js 是加载背景动画的脚本文件，更换背景动画可以直接修改对应Script块里的src属性，关闭动画则可以直接移除该Script块。

如何启用主题

按以下两个简单地步骤就可以启用这个主题了

首先将主题下载到对应的想要共享的目录下。

cd $(file directory)
git clone git@github.com:Tu5039/Nginx-Fancyindex-Theme-WhiteSmoke.git

修改nginx的设置。假设配置文件在*/etc/nginx/conf.d*，配置文件名为 files.conf。

sudo nano /etc/nginx/conf.d/files.conf

原来的配置可能是

# /etc/nginx/conf.d/files.conf old
server{listen 8889;client_max_body_size 4G;charset utf-8;location /{autoindex on;autoindex_exact_size off;root /home/nginx-dev/files/;}access_log /var/log/nginx/files.log;
}

修改为以下配置：

# /etc/nginx/conf.d/files.conf new
server{listen 8889;client_max_body_size 4G;charset utf-8;location /{fancyindex on;fancyindex_exact_size off;fancyindex_header "/Nginx-Fancyindex-Theme-WhiteSmoke/header.html";fancyindex_footer "/Nginx-Fancyindex-Theme-WhiteSmoke/footer.html";fancyindex_ignore "Nginx-Fancyindex-Theme*";alias /home/nginx-dev/files/;}access_log /var/log/nginx/files.log;
}

配置完成

nginx autoindex美化相关推荐

nginx文件服务器美化autoindex显示
网络上很多使用nginx来作为文件服务器的,前段时间公司也有这个需求,就研究了一下使用nginx来做文件服务器,参见前面两篇文章: 容器中使用ngnix搭建支持上传下载的文件服务器容器中使用ngin ...
打开 mhtml 文件显示不全_解决 Nginx autoindex 显示文件名不全的问题
Nginx 做文件服务器时,只要打开了autoindex就可以作为一个简易的文件服务器.然而Nginx 默认的配置下,长文件名会以省略号显示. 这么常见的问题,我去搜了一圈都没发现比较简单的方法,才有 ...
CentOS解决nginx autoindex 截断文件名，末尾出现乱码
方案1:重新编译,修改NGX_HTTP_AUTOINDEX_NAME_LEN 修改src/http/modules/ngx_http_autoindex_module.c NGX_HTTP_AUTOI ...
r语言默认工作目录document_使用 Docker 和 Nginx 实现简单目录索引服务
本文将会介绍如何使用 Docker.Node.JavaScript.Traefik 完成一个简单的目录索引服务,全部代码在 300 行以内.相关代码已开源至 GitHub ,文末有链接,感兴趣可以自取 ...
k8s安装nginx部署前端页面_怎么在k8s中部署nginx？
apiVersion: v1 kind: Namespace metadata: name: shujubu labels: name: shujubu 执行文件创建 shujubu命名空间: kub ...
Nginx中server_name指令介绍
Nginx中server_name指令介绍用途根据官方文档说明,用来设置虚拟服务器,对于用IP还是请求头部中的Host字段内容设置这个指令的值,没有明确的分别. 用法指令后跟特定域名,此时第一个 ...
Nginx(8)_return和rewrite
return指令功能: 停止处理请求,直接返回响应码或重定向到其他URL 执行return指令后,location中后续指令将不会被执行语法: return code [text]; return ...
《Nginx入门这一篇就够了》
一.Nginx Nginx介绍为什么要学习Nginx?: 单体架构搭建集群后出现了很多问题: 客户端如何存储大量的服务器的ip地址和端口号客户端的请求到底发送给哪台服务器静态资源和动态资源如何分 ...
python全栈(中国历史天气可视化系统)
在前面博客中写过python爬虫爬取各个城市历史天气及数据可视化,感觉还是有点粗糙,本文章是借这个例子抛砖引玉,写出个更NB的python全栈项目. 此项目预览页面全国各城市天气可视化系统 scrap ...
nginx搭建静态文件服务器,Nginx 静态文件服务器搭建及autoindex模块解析
导读文章重点讲述nginx静态服务器搭建 ngx_http_autoindex_module ngx_http_autoindex_module模块处理以斜杠字符('/')结尾的请求,并生成目录列表 ...

nginx autoindex美化

nginx autoindex美化

Nginx-Fancyindex-Theme-WhiteSmoke

如何设置主题

如何启用主题

nginx autoindex美化相关推荐

最新文章

热门文章