h5ai轻便服务器目录搭建详细教程（云服务器详细配置）

一、简介

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 等环境。已安装跳过这一步。

代码语言：javascript复制

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 下载即是管理器源码，直接解压到网站根目录即可。

代码语言：javascript复制

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

注意查看文件结构，正确的应是：

代码语言：javascript复制

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

3、配置 h5ai

① 插件配置

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

image.png

一般需要额外安装的有 ImageMagick（预览图片），ffmpeg 或 libav （预览视音频）等。

② apache 配置

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

代码语言：javascript复制

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

nginx 配置类似。

正常安装后，文件放置到和 _h5ai 平级目录就可以，当然也可以建立文件夹等等。

③ 权限设置

分别修改 public 和 private 文件夹里的 cache 文件夹即可。

④ 参数配置

配置文件是 _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即可。

代码语言：javascript复制

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

2.开启文件搜索功能。

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

代码语言：javascript复制

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

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

3.打包下载

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

4.信息与二维码

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

代码语言：javascript复制

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

打开侧栏信息按钮后，把鼠标悬停在文件上就可以看见h5ai右侧显示文件类型和二维码，手机扫码就可以下载文件。

第五步：界面修改

第四步：配置

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

_h5ai/private/conf/options.json

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

1.设置默认语言。

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

代码语言：javascript复制

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

2.开启文件搜索功能。

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

代码语言：javascript复制

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

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

3.打包下载

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

4.信息与二维码

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

代码语言：javascript复制

"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.

版权属于：Cyril
本文链接：https://cloud.tencent.com/developer/article/1858353
转载时须注明出处及本声明

html5 javascript 打包 php

0 人点赞