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

珂泽

2022 年 03 月 09 日

2685 次浏览

1 条评论

1650字数

编程笔记

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

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

预览

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

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

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

美化原理

在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");
})