一、简介

H5ai,全称是 HTML5 Apache Index,直译就是基于 html5 的 apache 目录索引列表,但不仅支持 apache 还支持 lighttpd、nginx 、 Cherokee 等 WEB 服务器。H5ai 是一款外观优雅且非常实用的目录列表程序,适合用来做个人网盘。最开始了解 h5ai 是看到别人通过 h5ai 分享文件,第一眼就被它简单直接的功能和简约大方的的界面吸引了。于是自己也在 vps 上安装体验了一把,总的来说,安装使用过程很流畅,用户体验很好。

官方地址

image.png

二、安装

1、安装依赖

h5ai 要求 php5.5+,使用 LAMP 或 LNMP 等一键安装包注意选择版本,如果有带 ImageMagick插件注意也选上,预览会用到。

示例系统是 Ubuntu,并且未安装任何 LAMP 或 LNMP 等环境。已安装跳过这一步。

apt-get install mysql-server mysql-client \ 
apache2 \ 
php5 php5-cli libapache2-mod-php5 php5-mysql php5-curl \ 
php5-gd php-pear php5-imagick php5-mcrypt php5-memcache \
php5-mhash php5-sqlite php5-xmlrpc php5-xsl \ 
php5-json php5-dev libpcre3-dev

2、安装 h5ai

h5ai 下载即是管理器源码,直接解压到网站根目录即可。

wget https://release.larsjung.de/h5ai/h5ai-0.29.2.zip && unzip h5ai-0.29.2.zip

注意查看文件结构,正确的应是:

DOC_ROOT
 ├─ _h5ai
 ├─ your files
 └─ and folders

3、配置 h5ai

① 插件配置

浏览器输入 http://(YOUR-DOMAIN.TLD)/_h5ai/public/index.php,查看系统 h5ai 环境是否是否正常,若出现 false,根据需求安装依赖即可。

image.png

一般需要额外安装的有 ImageMagick(预览图片),ffmpeglibav (预览视音频)等。

② apache 配置

将 /_h5ai/public/index.php 添加到 web 服务器配置文件中默认首页文件列表代码的最后位置

vim httpd.conf  #可以用 locate httpd.conf 找到文件位置
  DirectoryIndex  index.html  index.php  /_h5ai/public/index.php

<p>nginx 配置类似。
正常安装后,文件放置到和 _h5ai 平级目录就可以,当然也可以建立文件夹等等。</p>

<h4>③ 权限设置</h4>

<p>分别修改 publicprivate 文件夹里的 cache 文件夹即可。</p>

④ 参数配置

配置文件是 _h5ai/private/conf/options.json
文件中对每一项参数的作用都说很清楚了,这里就不再赘述,按说明配置即可。

三、演示

image.png

四、类似应用

除了 h5ai 还有其他表现也还不错的目录程序,比如:

1、Apaxy
2、Directory Lister
3、pdirl
4、Directory Contents

具体表现可按关键字搜索。

五、云服务器安装配置

第四步:配置

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右侧显示文件类型和二维码,手机扫码就可以下载文件。

第五步:界面修改

第四步:配置

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右侧显示文件类型和二维码,手机扫码就可以下载文件。

第五步:其他配置

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右侧显示文件类型和二维码,手机扫码就可以下载文件。

5.界面修改

1.修改默认显示域名

h5ai安装好后,打开网站默认在浏览器选项卡里显示的标题是域名

修改方法是打开 _h5ai/public/js/scripts.js 文件,

找到下面一行

===t?f.getDomain():n.name

修改为

===t?'你想显示的内容':n.name

6.宝塔面板注意事项

在宝塔面板安装之前,我们需要在php中安装ImageMagick、fileinfo、exif扩展.

添加 /_h5ai/public/index.php 到默认的首页列表中.

如果我们是宝塔面板可以这样在网站设置→默认文档里面添加/_h5ai/public/index.php.

最后修改:2021 年 07 月 08 日
如果觉得我的文章对你有用,请随意赞赏