Loading... 本站的lab目录我本来是写好了一个静态页来展示里面的小项目,但是每次新建文件夹都需要修改索引,异常的麻烦,于是我就想到了web服务器自带的目录索引。 本站当前的web服务器是Apache,Apache可以通过`.htaccess`文件开启文件目录索引。 ## 预览 [https://www.170601.xyz/lab/](https:///www.170601.xyz/lab/) 在美化之前的样子大概是下图,这体验肯定不行呀,所以要美化。  美化后如下图,瞬间档次就上来了。  ## 美化原理 在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:设置将添加到索引列表末尾的文件的名称 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 1 如果觉得我的文章对你有用,请随意赞赏
1 条评论
高端!