美化‘Index of/’界面

准备

为了减少工作量和维护难度懒省事，Null Mirror 站点的后端文件服务器采取的是用 Apache 直接映射驱动器文件的方式。这样做虽然方便了开发者和维护者（少写一个后端项目呢，一开始我是用的 Flask，遍历项目文件夹并返回二进制文件），但是对于使用者来说多多少少有了那么一点不美观（前端页面直接使用<iframe>调用的页面），所以就想着用户能不能自定义 Apache 的默认站点外观呢？翻了一下 Apache 的 Docs 还真找到了一点东西，下面记录一下美化流程。

Step1

Apache 控制默认 Index 界面元素属性的模块为“mod_autoindex”，官方介绍是Generates directory indexes, automatically, similar to the Unix ls command or the Win32 dir shell command，官方文档地址为Apache Docs，给了很长的一页介绍，而且没有中文翻译，推荐使用 Ctrl+F 检索着更改，不建议在 vhost.conf 或者 httpd.conf 里面的站点属性更改，建议在当前站点目录下新建.htaccess 文件并启用其控制站点属性，这样就不用每次更改完都要跑去控制台进行重启 httpd 服务。

Step2

万事俱备！首先确保当前站点能够顺利访问不然你改个锤子，在这里我主要更改了以下几个属性，当然你也可以去 Docs 里面找一下你想要的属性，属性名还是比较规范的翻译一下就能找到了，这是我的.htaccess 文件终版，访问镜像站站点可以查看成果。

# user config
ServerSignature Off
IndexOptions Charset=utf-8
# 启用UTF-8，不然会有中文乱码等问题，httpd.conf设置了也可不管
IndexOptions +SuppressHTMLPreamble SuppressDescription SuppressLastModified
# 禁用默认HTML模板（就是头顶“Index of/”的模板）、不显示文件描述、最后修改日期
IndexOptions NameWidth=60 IconHeight=16 IconWidth=16
# 更改文件名一栏宽度60，图标高度宽度为16
IndexOptions FancyIndexing VersionSort
# 设置文件排序方式为“文件夹优先、以小到大”排列

# icon add
AddIcon /icons/java.jpg .jar
AddIcon /icons/folder.png ^^DIRECTORY^^
AddIcon /icons/license.jpg .txt License
# 以文件类型添加文件图标

# change html
IndexIgnore header.html .htaccess
# 隐藏部分文件
HeaderName /home/header.html
# 让header.html控制当前页面的部分html属性

Step3

首先我想删除页面头部的“Index of/”字样我忍它很久了，所以我在IndexOptions里面禁用了（如果是 Suppress 则为+，如果没有则为-意味禁用此项功能）SuppressHTMLPreamble，然后再重新声明 Header 文件HeaderName /home/header.html（不知道为什么，我禁用 HTML 模板启用 header.html 了之后 title 仍为 index of/）。

注意，重新声明文件时，要么使用有权限访问的绝对路径，要么在 vhost.conf 里面重新定义以下当前站点的路径。不要使用相对路径，会出现只有根页面修改，而次级页面（https://www.example.com/xxx/）在次级文件夹（xxx/header.html）找不到HTML文件则没有修改的情况。

然后，我的部分长文件名会出现折叠的情况我想让其全部显示，所以修改IndexOptions NameWidth=60，使“文件名”一栏的宽度增加为 60 字节，不建议过宽，会导致页面缩放出现问题。然后删去后面的“描述”和“最后修改时间”栏目SuppressDescription SuppressLastModified，当然你也可以依靠此元素的 Docs逐一修改文件描述（以文件类型修改）。然后修改文件的排序方式为文件夹优先和从小到大排序IndexOptions FancyIndexing VersionSort

最后，我想为我的文件添加图标，首先需要在 Apache 的 icons/文件夹（绝对路径为 /etc/httpd/icons 上传 jpg 或其他图像类型的文件，然后依照文件类型使用AddIcon一一对应的添加图标或者替换掉默认图标。退出修改之前别忘了禁止访问.html 和.htaccess 文件防止数据泄露IndexIgnore header.html .htaccess~