h5ai 目录列表程序完整安装使用教程

√> 本教程基于宝塔面板,步骤超超级详细!

一、简介

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

请注意,默认情况下,放到目录下的 .php 文件将会被直接执行,并不以文本显示。

二、安装

要求:PHP 5.5+,本文使用的PHP7.0

1、搭建网站环境

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

2、获取h5ai

点击下载
这里推荐使用宝塔面板的远程下载功能,通过Geek博客网盘直链:

https://pan.n-1.cn/程序源码/h5ai-0.29.0.zip

安装包
在网站目录解压zip,并删除无关文件,
解压
注意,要将_h5ai文件夹放入网站目录

3. 设置PHP

在宝塔面板中,进入软件管理,找到PHP设置。
php
修改php配置-禁用函数,解除禁用函数scandir、exec和passthru、putenv。如果禁用列表中有这四个函数,删除即可。
php函数

4、修改配置文件

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

 /_h5ai/public/index.php

在宝塔面板的网站设置中,找到配置文件,以index开头的一行
配置index
将代码复制到行末的分号前面,
配置indexend
保存配置文件后,访问域名就可以看到h5ai已经搭建成功啦!
dagonggaocheng
只需要将文件/文件夹上传至网站目录,即可在此处显示。

三、拓展

访问 http://你的域名/_h5ai/public/index.php 进入后台检查,默认密码为空,直接点击login进入。
houtailogin
!> 后台检查会列出安装情况,最好都达成yes!
我们可以找到如下图的拓展,与图片、视频、PDF在线预览相关。下面我们一一进行配置:
tuozhan

1. PDF缩略图拓展

安装imagemagick即可满足。需要进入SSH终端
Ubuntu/Debian系统:

apt-get install imagemagick -y

CentOS系统:

yum install ImageMagick -y

ssh

2. EXIF

在宝塔面板找到PHP管理(上文提到过哟),安装拓展。
exif

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

五:h5ai界面美化

修改h5ai网页默认显示域名和网页标题太长的问题。
1.修改默认显示域名
h5ai安装好后,默认首页和主目录用域名显示,很不好。

打开

_h5ai/public/js/scripts.js

Ctrl+F 找到

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

修改为

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

同时,为了尊重作者劳动成果和开源,建议保留网站右上角的版权信息。

六、其他说明

1. 头部与底部说明

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

2. 字体加速

h5ai使用了谷歌字体,如有必要,可以更换为大佬们制作的镜像地址。
打开文件目录:h5ai/private/conf/options.json,找到resources项,将styles参数中的fonts.googleapis.com替换为:

fonts.loli.net

本文作者:酷酷的二货

本文链接:https://www.n-1.cn/29.html

版权声明:所有文章均采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。 您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。

如果博客部分文章出现空白或异常,请留言或者联系博主修复。
最后修改:2019 年 09 月 04 日 10 : 24 AM
如果觉得我的文章对你有用,请随意赞赏

1 条评论

  1. 小平

    正好需要

发表评论