h5ai 功能强大的目录列表程序配置教程

释放双眼，带上耳机，听听看~！

h5ai是什么

H5ai是一款功能强大 php 文件目录列表程序，它提供多种文件目录列表呈现方式，支持多种主流 Web 服务器，例如 Nginx、Apache、Cherokee、Lighttpd 等，支持多国语言，可以使用本程序在线预览文本、图片、音频、视频等。

演示网站：https://release.larsjung.de/

安装

方便管理，使用宝塔并以LNMP环境运行

安装宝塔，(已安装的跳过)

#Centos
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install.sh && sh install.sh

#Ubuntu/Deepin
wget -O install.sh http://download.bt.cn/install/install-ubuntu.sh && sudo bash install.sh

#Debian
wget -O install.sh http://download.bt.cn/install/install-ubuntu.sh && bash install.sh

宝塔安装完成后，先在面板设置中修改用户名，密码，面板别名等，然后返回首页选择LNMP一键安装，PHP版本建议7.0或以上

添加网站

添加网站，输入你已指向到VPS的域名，FTP和数据库不创建。确定

打开目录

网站管理，打开网站目录如 /www/wwwroot/xxx.xxx

删除目录下自动创建的的所有文件 (4个)

下载程序

远程下载，输入程序下载地址来下载。目前最新版：https://release.larsjung.de/h5ai/h5ai-0.29.0.zip

随时间推移，程序会更新，可以自己进官网查看最新版本：https://larsjung.de/h5ai/

解压程序

下载完成后解压，解压后的网站根目录应该只有一个_h5ai目录和你刚才下载的程序包

PHP设置

1.软件管理-你使用的PHP版本-设置-禁用函数-删除exec函数

2.软件管理-你使用的PHP版本-设置-安装扩展-安装exif扩展

站点修改

网站管理-设置网站-配置文件-在index index.php…最后加上内容 /_h5ai/public/index.php

注意前面有个英文状态下的空格和保留最后的;正确修改后应该是这样的

    index index.php index.html index.htm default.php default.htm default.html /_h5ai/public/index.php
;

h5ai的目录列表应该是这样的，即你要显示的文件或文件夹要放站网站根目录

├── _h5ai
│   ├── CHANGELOG.md
│   ├── private
│   ├── public
│   └── README.md
├── 您要显示的文件夹
│   ├── 子文件夹1
│   ├── 文件1
│   └── 文件2
└── 您要显示的文件
├── 文件1
└── 文件2

到此h5ai已经可以正常运行了，如果需要开启更多功能继续往下看

功能开关

通过编辑_h5ai/private/conf/options.json实现功能开关

启用打包下载：

搜索 “download”

127 行，enabled 由 false 改为 true。

启用文件信息及二维码：

搜索 “info”

185 行，enabled 由 false 改为 true。

默认简体中文：

搜索 “l10n”

202 行，enabled 由 false 改为 true。

启用文件及文件夹多选：

搜索 “select”

323 行，enabled 由 false 改为 true。

感觉访问缓慢? 可能是谷歌字体的锅，毕竟这里是~ 哼哼

替换谷歌字体

搜索“fonts.googleapis.com”改为 fonts.geekzu.org

最后就剩你自由发挥了，你可以挂载大容量的GD或OD网盘到目录下，啧啧

网站本身是没法设置密码访问的。如果不想对外开放可通过宝塔设置密码访问

网站管理-设置网站-网站目录-密码访问

宝塔配置教程：

二、安装

要求：PHP 5.5+，本文使用的 PHP7.0

1、搭建网站环境

可使用一键包或者宝塔等面板程序搭建。宝塔面板安装请看官方教程，并在初次安装 LNMP 时注意 PHP 版本。在宝塔面板中新建网站，输入域名；在域名解析商设置对应的解析。

2、获取 h5ai

推荐使用宝塔面板的远程下载功能，通过黑猫云直链：

https://yun.iwyc.cn/TOOLS/PHP/h5ai-0.29.0.zip

在网站目录解压 zip，并删除无关文件，如下图所示：注意，要将_h5ai 文件夹放入网站目录

3. 设置 PHP

在宝塔面板中，进入软件管理，找到 PHP 设置。

修改 php 配置 – 禁用函数，解除禁用函数 scandir、exec 和 passthru。如果禁用列表中有这三个函数，删除即可。

4、修改配置文件

如果你使用的是 Nginx，则只需要复制以下代码：

/_h5ai/public/index.php

在宝塔面板的网站设置中，找到配置文件，以 index 开头的一行，

将代码复制到行末的分号前面，如下图所示：

保存配置文件后，访问域名就可以看到 h5ai 已经搭建成功啦！只需要将文件 / 文件夹上传至网站目录，即可在此处显示。

三、拓展

访问 http://你的域名/_h5ai/public/index.php 进入后台检查，默认密码为空，直接点击 login 进入。

!> 后台检查会列出安装情况，最好都达成 yes！

我们可以找到如下图的拓展，与图片、视频、PDF 在线预览相关。下面我们一一进行配置：

1. PDF 缩略图拓展

安装 imagemagick 即可满足。需要进入 SSH 终端

Ubuntu/Debian 系统:

apt-get install imagemagick -y

CentOS 系统:

yum install ImageMagick -y

如下图所示：

2. EXIF

在宝塔面板找到 PHP 管理（上文提到过哟），安装拓展。

3. 视频缩略图拓展

请自行搜索系统名称+安装 ffmpeg，例如 Centos6 安装ffmpeg

这个拓展我用不到，所以就不列出教程了。

四、个性化配置

h5ai 提供几项个性化配置，修改配置文件即可实现。配置文件路径是：

_h5ai/private/conf/options.json

可以根据自己的偏好进行探索、设置。下面展示一部分常用的配置：

1. 设置默认语言。

在配置文件中搜索 “l10n” 找到设置，将 en 改为 zh-cn 即可。

 "l10n": {
     "enabled": true,
     "lang": "zh-cn",
     "useBrowserLang": true
 },

2. 开启文件搜索功能。

在配置文件中搜索 “search”，将 false 改为 true。

 "search": {
     "enabled": true,
     "advanced": true,
     "debounceTime": 300,
     "ignorecase": true
 },

设置好后，h5ai 左上角就有会有一搜索按钮，即可搜索 h5ai 目录里的文件。

3. 打包下载

多文件下载设置需要配置两步。第一步，先配置让 h5ai 支持文件选择（就是复选框喽！）

 "select": {
     "enabled": true,
     "clickndrag": true,
     "checkboxes": true
 },

配置文件中搜索 “download”，将 false 改为 true，如果需要设置打包文件的格式为 zip，而不是默认的 tar 的话，需要将 php-tar 改为 shell-zip。

 "download": {
     "enabled": true,
     "type": "shell-zip",
     "packageName": null,
     "alwaysVisible": false
 },

4. 信息与二维码

可以通过扫码的方式下载文件。在配置文件中搜索 “info”，将 false 改为 true。

 "info": {
     "enabled": true,
     "show": true,
     "qrcode": true,
     "qrFill": "#999",
     "qrBack": "#fff"
 },

当你鼠标置于文件上时，可以看见 h5ai 右侧显示文件类型和二维码，手机扫码就可以下载文件。

五、其他说明

1. 头部与底部说明

在需要显示自定义 HTML 的目录下，添加 _h5ai.headers.html 或_h5ai.footers.html。通常用于对该目录的一些说明。支持 HTML 标签。

2. 字体加速

h5ai 使用了谷歌字体，如有必要，可以更换为大佬们制作的镜像地址。

打开文件目录：h5ai/private/conf/options.json，找到 resources 项，将 styles 参数中的 fonts.googleapis.com 替换为：

fonts.loli.net