Centos 9 Ngnix 文件服务的美化+favicon.ico图标

笔记：
核心：fancyindex

时间: 2025年8月19日13:54:32

更新时间：2025年11月04日 10点26分，更新内容：去掉重新向直接端口访问，添加favicon.ico图标

效果如下：

因为我使用的是Centos 9 需要通过 EPEL 安装fancyindex, Ubuntu/Debian 稍有不同，随便都能搜到。

1、通过 EPEL 安装

sudo dnf install epel-release sudo dnf install nginx-mod-fancyindex

2、创建fancyindex文件夹

mkdir -p /home/chengdong/upload/fancyindex

3、在 fancyindex 文件夹下，创建自定义的网页模板(HTML 页面)，没有favicon.ico请删除

<link rel="icon" href="/favicon.ico" type="image/x-icon"> 代码，favicon.ico图标我也是放在fancyindex文件夹

vim /home/chengdong/upload/fancyindex/header.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文件列表 - 澄东的服务器</title> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <style> body { font-family: 'Segoe UI', sans-serif; margin: 2em; } table { width: 100%; border-collapse: collapse; } th { background: #f8f9fa; text-align: left; padding: 12px; } td { padding: 10px; border-bottom: 1px solid #eee; } a { color: #0366d6; text-decoration: none; } .size { color: #6a737d; } .date-col { width: 150px; } </style> <script> document.addEventListener('DOMContentLoaded', function() { // 转换日期格式 const dates = document.querySelectorAll('.date'); const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']; dates.forEach(el => { const dateStr = el.textContent.trim(); if(dateStr) { const date = new Date(dateStr); if(!isNaN(date)) { const chineseDate = `${date.getFullYear()}年${monthNames[date.getMonth()]}${date.getDate()}日 ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`; el.textContent = chineseDate; } } }); }); </script> </head> <body> <h1>文件列表</h1>
vim /home/chengdong/upload/fancyindex/footer.html
<footer style="margin-top: 2em; color: #6a737d;"> <hr> <p>© 2025 澄东的文件服务器</p> </footer> </body> </html>
4、权限设置
sudo chown -R nginx:nginx /home/chengdong/upload/fancyindex sudo chmod 755 /home/chengdong/upload/fancyindex

5、修改 nginx 配置文件，如果有 favicon.ico 可以把前面的#注释去掉

# 文件服务器 server { listen 2282; listen [::]:2282; #server_name 192.168.1.11; # favicon配置 #location = /favicon.ico { # alias /home/chengdong/html/web-resoures/favicon.ico; # access_log off; # log_not_found off; # expires 30d; #} # 确保fancyindex文件可以通过web访问 location /fancyindex/ { alias /home/chengdong/upload/fancyindex/; } location / { root /home/chengdong/upload/; allow all; # 允许所有IP访问 # FancyIndex 配置 fancyindex on; fancyindex_exact_size off; fancyindex_localtime on; # fancyindex_name_length 255; fancyindex_directories_first on; # 目录优先显示 fancyindex_show_path off; # 不显示路径 # 我是把fancyindex文件夹存放在/home/chengdong/upload/fancyindex 下面的,上面配置了/fancyindex转发 # 自定义头尾文件(需要注意：我的访问是ip:端口/fancyindex/header.html直接能访问地址,所以我配置/fancyindex/header.html,要看自己存放在路径下,否则404) fancyindex_header "/fancyindex/header.html"; fancyindex_footer "/fancyindex/footer.html"; fancyindex_ignore "fancyindex"; # 允许远程推送 dav_methods PUT; create_full_put_path on; } }

6、检测和重启

nginx -t # 测试配置 systemctl restart nginx

注意：检查 SELinux 设置，不能是Enforcing模式

# 检查 SELinux 状态
getenforce
# 临时禁用
setenforce 0