使用FancyIndex插件美化nginx文件目录列表

文章目录

Nginx打开文件目录列表功能一文中我介绍了如何使用nginx实现文件目录列表功能。但是美中不足的是它展现的页面过于原始,不是非常美观。下面介绍一款nginx插件-FancyIndex,可以通过引入自定义HTML内容来美化文件目录列表页面。

安装FancyIndex插件

FancyIndex的安装方法网上有很多教程,大多数是在编译nginx时,增加这个插件。
但是由于我们使用apt-get install nginx安装,通过安装nginx-extras即可安装FancyIndex插件。

1
apt-get install nginx-extras

关于nginx-extras的详细介绍请参考:debian apt方式添加nginx模块

配置文件修改

这里给出示例的nginx配置文件,相对于Nginx打开文件目录列表功能中的nginx配置文件仅仅需要增加几行代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
server {
listen 80;
charset utf-8;
server_name nginxsoft.tennfy.com;
root /var/www/nginxsoft.tennfy.com;
 
location / {
autoindex on;
autoindex_exact_size off;
autoindex_localtime on;
fancyindex on;             
fancyindex_exact_size off;
fancyindex_header "header.html";
fancyindex_footer "footer.html";
}
}

这里需要两个html文件:header.html,footer.html用来美化页面。

在web目录下(本文为/var/www/nginxsoft.tennfy.com)建立两个文件:header.html和footer.html。

header.html内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
body,html {background:#fff;font-family: "Lucida Grande",Calibri,Arial;font-size: 13pt;color: #333;background: #f8f8f8;}
tr.e {background:#f4f4f4;}
th,td {padding:0.1em 0.5em;}
th {text-align:left;font-weight:bold;background:#eee;border-bottom:1px solid #aaa;}
#top1 {width:80%; font-size:28px; margin: 0 auto 5px auto;}
#top2 {width:80%; font-size:18px; margin: 0 auto 5px auto;}
#footer {width:80%;margin: 0 auto; padding: 10pt 0;font-size: 10pt;text-align:center;}
#footer a {font-size: 14px; font-weight: normal; text-decoration: underline;}
#list {border:1px solid #aaa;width:80%;margin: 0 auto;padding: 0;}
a {color: #b00;font-size: 11pt;font-weight: bold;text-decoration: none;}
a:hover {color: #000;}
#readme {padding:0;margin:1em 0;border:none;width:100%;}
</style>
<script type="text/javascript">// <![CDATA[function ngx_onload(){var f=document.getElementById('readme');if(!(f&&f.contentDocument))return;f.style.height=f.contentDocument.body.offsetHeight+'px';f.contentDocument.body.style.padding='0';f.contentDocument.body.style.margin='0';}// ]]></script>
<title>Inspur Linux OS Download Center</title>
</head>
<body onload="ngx_onload()">
<h1 id="top1">文件目录列表</h1>
<h1 id="top2">Directory listing of

footer.html内容为:

1
2
3
<table id="footer" cellpadding="0" cellspacing="1">
<thead><tr><td colspan="3">本页面由TENNFY WU提供</td></tr><thead>
</table></body></html>

demo地址

这里给出一个demo地址:nginxsoft.tennfy.com

本文出自 TENNFY博客,转载时请注明出处及相应链接。

本文永久链接: https://www.tennfy.com/2489.html

下一篇文章:

上一篇文章:

3人参与了讨论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

0 + 0 = ?


您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

返回顶部