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/public/index.php 可以查看 h5ai 的功能开启情况,默认密码是空的。

安装 FFmpeg (用于显示视频缩略图)

Debian 8

编辑软件源文件:

vim /etc/apt/sources.list

添加四个软件源

deb http://www.deb-multimedia.org jessie main non-free
deb ftp://ftp.deb-multimedia.org jessie main non-free
deb http://www.deb-multimedia.org stable main non-free
deb ftp://ftp.deb-multimedia.org stable main non-free

更新软件源

apt-get -y update

安装 ffmpeg

apt-get -y install ffmpeg

Ubuntu 16.04+:

通过命令安装:

apt-get -y install ffmpeg

CentOS:

rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro
rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-1.el7.nux.noarch.rpm
yum -y install ffmpeg

安装 ImageMagick (用于显示PDF缩略图)

Ubuntu/Debian:

apt-get install ImageMagick -y

CentOS:

yum install ImageMagick -y

通过你的域名+/_h5ai/public/index.php应该能看到全部功能处于绿色情况,即全部功能开启

功能开关

通过编辑_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

如下图所示:

人已赞赏
电脑技巧

全能的开源下载神器:Motrix

2019-12-15 11:57:44

电脑技巧

Linux中nc命令的安装使用

2019-12-15 12:08:05

2 条回复 A文章作者 M管理员
  1. 楼主,搭建完成后怎么上传文件?

    • 慢慢研究下,或者百度搜下教程

购物车
优惠劵
今日签到
有新私信 私信列表
搜索