【h5ai】CentOS6 部署h5ai 并集成ownCloud文件上传功能-CSDN博客

本文链接：https://blog.csdn.net/wawa8899/article/details/108119309

h5ai 是一款功能强大 php 文件目录列表程序，不需要数据库，支持在线预览文本、图片、音频、视频等。它的功能包括：文件排序，不同视图模式，本地化，面包屑，树视图，自定义页眉和页脚，文件过滤器和搜索，文件夹大小，自动刷新，打包下载，QR码，缩略图，文件预览等。它支持直接在线查看PDF、TXT、PHP、sh。doc不能在线阅读，只可以下载。

1. 环境准备

h5ai是php开发的，需要挂在已经运行web服务的服务器（Apache/Nginx）上。我们的机器环境是php-5.6 + Apache-2.4。不会安装的可以使用yum安装，yum会把所有的依赖和关系都自动弄好，比自己源码编译省事。

注意：h5ai要求的php最低版本是php-5.5，php版本选择时特别注意。

2. 安装h5ai

去官网下载最新的版本，解压到服务器的DOC_ROOT下（yum安装的Apache，默认的DOC_ROOT 是 /var/www/html）

$ pwd
/var/www/html
$ wget https://release.larsjung.de/h5ai/h5ai-0.29.2.zip 
$ sudo unzip h5ai-0.29.2.zip
$ ls -ltr
total 132
drwxr-xr-x 2 root root   4096 Oct 12  2017 html
drwxr-xr-x 2 root root   4096 Oct 12  2017 cgi-bin
-rw-r--r-- 1 root root 121178 Aug  5 18:46 h5ai-0.29.2.zip
drwxr-xr-x 4 root root   4096 Aug  5 18:47 _h5ai
$ sudo chown daemon:daemon -R h5ai/

3. 配置Apache

修改Apache配置文件
$ sudo vi /etc/httpd/conf/httpd.conf 
把index.php /_h5ai/public/index.php加到DirectoryIndex列表的最后面
DirectoryIndex index.html index.php /_h5ai/public/index.php

保存关闭后，重启Apache，使用浏览器访问http://YOUR-DOMAIN.TLD/_h5ai/public/index.php，可以看到h5ai的登录页面

默认的密码是空，直接点击login进去的是h5ai的一个功能自检页面，可以看到服务器已有的一些扩展和依赖，满足这些扩展组件能使用更多功能。扩展组件的安装百度可以搜到，一个一个对照安装，变成绿色就是成功了。

4. 权限设置

分别修改_h5ai下的public和private文件夹里的cache文件夹权限

$ pwd
/var/www/html/_h5ai
$ sudo chmod 666 public/cache
$ sudo chmod 666 private/cache

5. 其他参数配置

h5ai的主配置文件是_h5ai/private/conf/options.json，也有更多设置在"_h5ai/private/conf"中自行修改。

修改首页标题是在_h5ai/private/php/pages/index.php修改<title>标签里面的内容。

打开搜索功能、打开下载功能等都在_h5ai/private/conf/options.json。

对我来说最重要的一个是使用本地字体，因为我的机器在公司内网，不能联网访问网络字体。所以参照了另外一篇博客里面的解决方案，将google字体下载到本地，并且配置h5ai使用本地服务器字体：

在h5ai的_h5ai/public/ext/目录下新建shell脚本fonts.sh，内容如下

#!/bin/bash

ext_dir="/var/www/html/_h5ai/public/ext"

# 将谷歌字体的 css 下载到 _h5ai/public/ext 下
curl -sL -H "User-Agent:Mozilla/5.0 (X11; Linux x86_64; rv:69.1) Gecko/20100101 Firefox/69.1" \
         -o "$ext_dir/fonts.google.css" \
         "https://fonts.googleapis.com/css?family=Ubuntu:300,400,700%7CUbuntu+Mono:400,700"

# 将 css 文件里的所需的字体下载至 _h5ai/public/ext/fonts 下
# 并将 css 文件里字体的路径更改为 _h5ai/public/ext/fonts
mkdir -p "$ext_dir/fonts"
if [ -d "$ext_dir/fonts" ]; then
    cd "$ext_dir/fonts"
    wget $(grep "https" "$ext_dir/fonts.google.css" | awk -F '[()]' '{print $6}')
    sed -i 's|https://.*/|/_h5ai/public/ext/fonts/|' "$ext_dir/fonts.google.css"
fi

赋予fonts.sh文件可执行权限，并运行。运行之后，google字体被下载到fonts.sh脚本所在的目录下

$ pwd
/var/www/html/_h5ai/public/ext
$ chmod +x  fonts.sh
$ ./fonts.sh
$ ls -ltr 
total 24
-rw-r--r-- 1 root root  170 Mar 22  2019 README.md
-rwxr-xr-x 1 root root  777 Aug 17 10:34 fonts.sh
drwxr-xr-x 2 root root 4096 Aug 17 10:35 fonts
-rw-r--r-- 1 root root 9595 Aug 17 10:35 fonts.google.css

修改h5ai配置文件，使用本地字体

$ vi /_h5ai/private/conf/options.json 
修改
"resources": {
        "scripts": [],
        "styles": [
            "fonts.google.css"
        ]
    },

同样是保存后重启Apache，h5ai就可以使用本地服务器字体了。

6. 集成ownCloud文件上传功能

这可能是最好玩的事情了，h5ai是一个文件目录列表程序，文件在线预览和分享非常强大，可是文件上传的问题一直没想到比较好的解决方案。碰巧的是，我安装h5ai的服务器同时运行着一个本地部署的ownCloud云盘，ownCloud对文件的上传可是相当友好的。于是突发奇想，把_h5ai整个挪到ownCloud其中一个用户的数据文件夹下，使用ownCloud的界面做文件上传，再用h5ai来在线预览，完美。

步骤也很简单：

1) 把_h5ai文件夹搬到ownCloud指定用户的数据文件夹下

2) 修改Apache配置文件里DirectoryIndex的-h5ai路径，使用绝对路径

有人会说有ownCloud为什么还要h5ai，我是因为不想要文件从每个人电脑这里上传那里下载，想找一个可以在线预览各种格式文件的工具，比如axure导出的htm原型不能在ownCloud里直接预览，ownCloud对其他一些格式的文件在线预览功能需要插件支持，不免费...等等等等。为什么要集成ownCloud，因为我恰巧有ownCloud。