开启并美化 Apache 服务器目录索引

本站的lab目录我本来是写好了一个静态页来展示里面的小项目，但是每次新建文件夹都需要修改索引，异常的麻烦，于是我就想到了web服务器自带的目录索引。

本站当前的web服务器是Apache，Apache可以通过`.htaccess`文件开启文件目录索引。

## 预览

[https://www.170601.xyz/lab/](https:///www.170601.xyz/lab/)

在美化之前的样子大概是下图，这体验肯定不行呀，所以要美化。

![image-20220309210527322](https://bu.dusays.com/2022/03/09/a0f2d51fed09e.png#vwid=1099&vhei=553)

美化后如下图，瞬间档次就上来了。

![image-20220309210702339](https://bu.dusays.com/2022/03/09/6600d2c20963c.png#vwid=1920&vhei=937)

## 美化原理

在lab目录创建一个`.htaccess`文件，填入以下内容：

```bash
Options +Indexes  # 开启文件目录索引
<IfModule mod_autoindex.c>
  indexOptions FancyIndexing ScanHTMLTitles HTMLTable VersionSort FoldersFirst Charset=UTF-8
  HeaderName ./demos/directory/head.html
  ReadmeName ./demos/directory/footer.html
</ifModule>
```

其中，用相对目录的方式，通过`HeaderName`指令插入我写好的html头文件，通过`ReadmeName`插入写好的html脚文件，在两个html中分别引用了bootstrap的样式和js文件。

如果正在阅读的你有兴趣，可点击下方链接查看我写好的head和footer源码。

[Demo directory](https://170601.xyz/lab/demos/?directory)

在footer中，通过jquery选择器在Apache默认生成的表格上添加bootstrap样式类。

```javascript
$(function() {
    $('.content ul').addClass("list-group");
    $('.content ul li').addClass("list-group-item");
    $('.content table').addClass("table table-borderless");
})
```

## 字段说明

这一部分参考Apache中文文档

[Apache 中文文档 - Apache 模块 mod_autoindex | Docs4dev](https://www.docs4dev.com/docs/zh/apache/2.4/reference/mod-mod_autoindex.html#toolbar-title)

- FancyIndexing：打开目录的精美索引
- ScanHTMLTitles：开启从 HTML 文档中提取标题以进行花式索引
- HTMLTable：带有`FancyIndexing`为精美目录列表构造一个简单表
- VersionSort：使包含版本号的文件以自然方式排序
- FoldersFirst：先展示文件夹，然后展示普通文件
- Charset=UTF-8：设置编码格式为UTF-8
- HeaderName：设置将添加到索引列表顶部的文件的名称
- ReadmeName：设置将添加到索引列表末尾的文件的名称