有些时候我们要做一个个人仓库,但又不喜欢apache/nginx的默认index那种过于朴素的页面。这时候php目录列表程序的作用就发挥出来了。我个人也用过许多类似的程序,但是还是比较偏爱h5ai,因为部署方便,不需要像fancy index那样重新编译nginx,而功能也足够强大,美观更是没话说。DEMO
部署的方法也是相当简单,在作者官网有说明,可能有人不喜欢全英文的……我来简单的说一下。
一.安装
- 把你下载的h5ai程序包解压会看到里面有_h5ai这个文件夹,将其上传到你的web目录(当然也可以上传后再解压):
DOC_ROOT/_h5ai
.
1234DOC_ROOT├─ _h5ai├─ your files└─ and folders
访问http://YOUR-DOMAIN.TLD/_h5ai/public/index.php
, 这个页面会显示一些依赖之类的,符合代表能使用更多功能。 - 把
/_h5ai/public/index.php
(注意优先级!)添加到默认首页的配置项. 这样h5ai会接管在DOC_ROOT下所有不含
有效首页文件的目录.某些web服务器的修改方法:- Apache httpd 2.2/2.4: 在
httpd.conf
或在任意文件夹的.htaccess
文件中的修改示例:1DirectoryIndex index.html index.php /_h5ai/public/index.php - lighttpd 1.4: 在
lighttpd.conf
中的修改示例:1index-file.names += ('index.html', 'index.php', '/_h5ai/public/index.php') - nginx 1.2: 在
nginx.conf
中的修改示例:1index index.html index.php /_h5ai/public/index.php; - Cherokee 1.2: 在
cherokee.conf
中的修改示例:1vserver!1!directory_index = index.html,index.php,/_h5ai/public/index.php
- Apache httpd 2.2/2.4: 在
二. 配置
主配置文件是 _h5ai/private/conf/options.json
. 你可能想要修改某些列表设置. 当然也有更多设置在_h5ai/private/conf
中,你可以看看。
三.自定义安装
把h5ai安装在你想要的web服务器的任意二级目录是可以实现的。这个目录将在显示路径树的时候被认作是根目录。
比如把 _h5ai
复制到 DOC_ROOT/some/folder/_h5ai
:
1 2 3 4 5 6 |
DOC_ROOT └─ some └─ folder ├─ _h5ai ├─ your files └─ and folders |
访问 http://YOUR-DOMAIN.TLD/some/folder/_h5ai/public/index.php
来看看是否一切正常。 在这个示例里你需要添加 /some/folder/_h5ai/public/index.php
到你的directory index (和第二部安装差不多)。
四.修改与优化
1.修改显示(title)
可能有人发现安装完之后貌似网页标题太长了……这是作者把一些信息都写在里面了,由于作者开源,我们能对其进行修改去除部分不美观的信息(请务必保留部分,建议保留网站右上角的powerby)
只要修改_h5ai/private/php/pages/index.php就行了,一切都很easy。
2.加速打开h5ai
有时候你会发现h5ai的打开速度莫名的慢,或者页面已经出来然而文件(夹)名竟然还不显示,为什么?谷歌字体的锅,由于h5ai引用了谷歌的字体库,而虽然谷歌字体在大陆恢复了解析,但是由于dns污染或者运营商问题访问还是有些抽风,所以才会导致这种情况的发生。为了加快打开速度,我们可以替换谷歌字体到国内的镜像源。
通过修改fonts.googleapis.com为fonts.geekzu.org(支持https)或fonts.useso.com(不支持https),我们能加快h5ai的打开速度。当然,如果我们要做到最快的打开速度,我们可以使用七牛之类的服务,将静态文件(js;svg……)等都缓存到国内cdn中,然后修改h5ai的源文件来做到引用外部资源。
最后,感谢h5ai的作者将如此好的作品开源。
Senraの小窝原创文章,转载请注明来自:H5ai——一个强大美观的目录列表程序
博主最后说的加速具体怎么弄
我写这篇文章的时候谷歌字体还没解封,而h5ai又使用了谷歌字体,所以可以通过修改谷歌字体源为反代源来加速访问。现在已经解封了,所以这部分不处理也行,另外提到了可以把h5ai调用的js等资源丢到七牛和又怕云这种静态资源cdn上,这个的话如果追求极致是可以做的,就是比较麻烦,需要找出引用资源的文件然后修改。
电脑访问时空白,手机有目录和文件显示。。。。怎么解决
F12然后刷新看看是不是有啥js卡在加载了,可以试试清除浏览器缓存然后强制刷新
用宝塔,把禁止函数删了,还提示“[ERR] h5ai sources must be preprocessed to work correctly”怎么解决
这个错误还真没碰到过,可以看下目录和文件权限以及用户组,还有那个cache目录是否有写入权限。
我去搜了下你这个错误……你是不是直接用github上的了,那个需要用npm编译_(:з」∠)_,去作者网站下吧
博主你好,站名就是网站,我想知道如何修改站名。请问你知道吗?
你指的网页标题里那个名字?那个改_h5ai/private/php/pages/index.php 里 title 标签里的内容就行
title里面的内容只是一闪而过,长期显示的却是网址。
你指的是crumb导航里那个?那个貌似是js动态添加的,可能需要你翻翻其他代码
我全翻遍了,没找到,你能帮我找一下吗?
同问 “title里面的内容只是一闪而过,长期显示的却是网址” 这个在哪里修改
其实不太确定你们指的这个一直显示的是啥,如果是网页名或者网页顶部那个导航,那可能得修改
_h5ai/public/js/scripts.js
你可以在这个文件里搜title和crumb,貌似是挺烦人的,建议格式化一下代码再看。博主,你好,h5ai不显示文件夹内内容,二级文件夹的内容显示不出来。页面搜索能搜出内容。
files.yanxi.pro 您帮我看看。
确认下权限和所有者问题
/www/wwwroot/files.yanxi.pro
drwxr-xr-x 8 www www 4096 Jan 22 15:08 www
drwxr-xr-x 5 www www 4096 Jan 23 00:51 wwwroot
drwxr-xr-x 5 www www 4096 Jan 24 00:37 files.yanxi.pro
drwxr-xr-x 2 www www 4096 Jan 24 00:48 a
drwxr-xr-x 4 www www 4096 Jan 24 00:35 _h5ai
-rwxr-xr-x 1 www www 118795 Jan 22 16:49 h5ai-0.29.0.zip
drwxr-xr-x 3 www www 4096 Jan 23 00:22 ss_software
这是我的目录结构及权限。
看上去所有者正常啊,权限的话文件夹755 文件644就可以,如果你是oneinstack或者lnmp啥的话建议把目录下的那个.user.ini文件还有php配置里的open_basedir干掉试试看。我之前也碰到过一次这种情况,但是不知道咋又恢复了……
博主你好,访问显示第16行错误,怎么解决
哪里的16行。。。
您好,我安装完成之后只能进入兼容性检查的页面,能否告诉我该在浏览器输入什么地址才能看到文件目录?
去掉地址里的_h5ai还有后面的地址就是访问的目录了