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

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

预览

https://www.170601.xyz/lab/

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

image-20220309210527322

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

image-20220309210702339

美化原理

在lab目录创建一个.htaccess文件,填入以下内容:

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

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

$(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

  • FancyIndexing:打开目录的精美索引
  • ScanHTMLTitles:开启从 HTML 文档中提取标题以进行花式索引
  • HTMLTable:带有FancyIndexing为精美目录列表构造一个简单表
  • VersionSort:使包含版本号的文件以自然方式排序
  • FoldersFirst:先展示文件夹,然后展示普通文件
  • Charset=UTF-8:设置编码格式为UTF-8
  • HeaderName:设置将添加到索引列表顶部的文件的名称
  • ReadmeName:设置将添加到索引列表末尾的文件的名称
最后修改:2022 年 04 月 03 日
如果觉得我的文章对你有用,请随意赞赏