_H5AI部署、配置与美化

H5AI修改美化

1.修改默认显示域名

h5ai默认首页和主目录用域名显示，不够美观。

打开 _h5ai/public/js/scripts.js ，找到

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

修改为

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

2.修改网页标题

修改_h5ai/private/php/pages/index.php 中的内容

<title>index - powered by h5ai v0.29.2 (https://larsjung.de/h5ai/)</title>

替换为

<title>你想显示的内容</title>

建议保留网站右上角的版权信息。

3.修改页眉页脚

/*
  Allow customized header and footer files.
  First checks for files "_h5ai.header.html" and "_h5ai.footer.html" in the current directory.
  If not successful it checks all parent directories (starting in the current directory) for
  files "_h5ai.headers.html" and "_h5ai.footers.html".
  Note the different filenames: "header" (only current) - "headers" (current and sub directories)!
  The file's content will be placed inside a <div/> tag above/below the main content.
  If a file's extension is ".md" instead of ".html" its content will be interpreted as markdown.
*/
"custom": {
"enabled": true
},

为当前页添加页眉和页脚，只需要在对应目录下放置好_h5ai.header.html和_h5ai.footer.html。如果放置的是_h5ai.headers.html和_h5ai.footers.html，则设置将应用于该目录和该目录的所有子目录。

页眉页脚支持Markdown格式，可以放置_h5ai.header.md和_h5ai.footer.md。

以下内容转载自 h5ai - 私有云。

H5AI简介

h5ai 相对于其它私有云来说功能简单、体积轻便(1MB左右)、页面排版自动适应 PC 和移动端、支持包括中文在内的多语言显示，采用 NodeJs 框架开发，编译完成后为 PHP 程序。

h5ai 通过不同的视图来对服务器端的目录和文件进行查看。可以在线预览 PDF、文档、脚本(语言高亮)、图片、视频、下载(二维码)等等。
因为它重在文件索引与分享，所以不支持文件上传。

它有许多设置，可以对页面排版进行修改，如皮肤、侧边栏、搜索、下载，生成视频和图片缩略图等等。

作者提供的一个 Demo：H5ai - Demo

h5ai可以部署在 Apache / lighttpd / nginx / caddy 等等 Web 服务器上。

一、WEB 环境和 H5ai 的准备

1、Web 环境

我们需要准备一个 WEB 环境，可以使用 Nginx、Lighttpd，Caddy, Apache 等等都可以。在这里，我们使用 Web 服务器界的新起之秀 Caddy。

安装 Caddy

详见 Web server - Caddy

安装 PHP

$ apt-get install php7.3-fpm php7.3-cgi php7.3-gd php7.3-json

2、h5ai 程序下载

h5ai 下载目录
v0.29.2，截止2019-09-22最新的正式版本。
v0.29.2 025~a1bb755，截止2019-09-22最新的开发版。

在这里，我们下载最新的开发版「v0.29.2 025~a1bb755」并解压至网站目录/var/www/下。

$ 7z x h5ai-0.29.2 025~a1bb755.zip -o/var/www

二、h5ai 的安装与部署

1、网站目录示意图

网站根目录
  ├──── _h5ai
  ├──── _h5ai ─── private
  ├──── _h5ai ─── public
  ├──── 分享的文件
  ├──── 分享的文件夹 ─── 分享的文件
  └──── 分享的文件夹

将需要分享的文件放在网站根目录下即可，而 h5ai 程序全部在_h5ai文件夹里。
程序默认 _h5ai 和 . 开头的文件不显示，可以修改配置options.json文件来自定义不想分享的文件。

2、运行网站

h5ai 的index.php不在根目录下，所以需要在服务器上指定它的路径。

• lighttptd，使用index-file.names来指定首页的路径。

index-file.names  = ("/_h5ai/public/index.php")

• Caddy，使用index来指定首页的路径。

index "/_h5ai/public/index.php"

因为 h5ai 所有的 URI 都会在服务端重定向至 /_h5a/public/index.php 并由它来生成页面，所以在 Caddy 里使用 index 指定网站首页后，浏览我们的网站时会出现很多 404 错误。

这点在 lighttpd / nginx / apache 下默认自动修正了，所以不需要其它设置。

而 Caddy 与 PHP 存在一些兼容性问题，无法自动处理这个问题。所以这里需要而使用rewrite 指令来将所有的 URI 重写至 /_h5ai/public/index.php。

假设我的网站域名为 www.shixuen.com

:~$ cat >> /etc/caddy/Caddyfile <<EOF
www.shixuen.com:80 {
    root /var/www
    gzip
    tls off
    # index /_h5ai/public/index.php
    fastcgi / /run/php/php7.3-fpm.sock php
    rewrite {
    # 将所有路径全部重写至首页
        if {path} ends_with /
        to /_h5ai/public/index.php
    }
}
EOF
:~$ sudo systemctl start php7.3-fpm caddy

此时，在浏览器中输入网址 http://www.shixuen.com 即可浏览网站。

/run/php/php7.3-fpm.sock 即 php7.3-fpm 所绑定的网络端口，如果查找它？

:~$ netstat -anpl | grep php | grep LISTENING
unix  2      [ ACC ]     STREAM     LISTENING     816733   7346/php-fpm: pool   /run/php/php7.3-fpm.sock

3、h5ai 环境与功能的自检

• 打开网址 http://www.shixuen.com/_h5ai/public/index.php。
  查看 h5ai 当前运行信息，即对当前运行环境与功能模块的自检结果。

默认密码为空，直接点击登录。

• 查看自我检测结果
  自检结果
• 绿色，即代表检测通过
• 红色，存在兼容性问题。如此处的server software(服务器)一栏
• 红色的no，即此功能缺失，需要安装依赖环境。
  如此处的PDF thumbs(PDF缩略图)，提示缺少convert(imagemagick)程序，此功能为 PDF文档生成缩略图。

解决此问题只需在服务器安装imagemagick：

$ apt-get install imagemagick

功能详细设置

至此，我们私有云就布置完成了，可以为我们提供服务了。

三、h5ai 的配置文件

h5ai 的配置文件为_h5ai/private/conf/options.json，修改它对 h5ai 的功能进行增减。

1、功能自检页面的密码设置

    /* Password hash. SHA512 hash of the info page password, the preset password is the empty string. Online hash generator: https://md5hashing.net/hash/sha512 */
    "passhash": "cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e",

passhash 即 password hash 的缩写，它的值为密码经过 SHA512 hash 计算后的结果。
cf83e1357....da3e 这串字符为空字符的 SHA512 哈希值。
所以我们在上面不用输入密码即可登录。

如何修改默认密码？

1. 生成密码的 SHA512 hash 值。
2. 将 cf83e1357....da3e 换成我们刚刚生成的 SHA512 值即可。

2、文件列表的设置

    "view": {
        "binaryPrefix": false,
        "disableSidebar": true,
        "fallbackMode": false,
        "fastBrowsing": true,
        "fonts": ["Ubuntu", "Roboto", "Helvetica", "Arial", "sans-serif"],
        "fontsMono": ["Ubuntu Mono", "Monaco", "Lucida Sans Typewriter", "monospace"],
        "hidden": ["^\\.", "^_h5ai"],
        "hideFolders": false,
        "hideIf403": true,
        "hideParentFolder": false,
        "maxIconSize": 40,
        "modes": ["details", "grid", "icons"],
        "modeToggle": false,
        "setParentFolderLabels": true,
        "sizes": [20, 40, 60, 80, 100, 140, 180, 220, 260, 300],
        "theme": "default",
        "unmanaged": ["index.html", "index.htm", "index.php"],
        "unmanagedInNewWindow": false
    },

• disableSidebar：是否显示左侧边栏（功能栏）
  在这里插入图片描述
• hidden：此参数可以指定文件夹列表里隐藏哪些文件，可以使用正则来匹配文件名称。
• ^\.：隐藏名称以 . 开头的文件，如 .htaccess,.gitignor 等等。
• ^_h5ai：隐藏名称以 _h5ai 开头的文件或文件夹，如 _h5ai，_h5ai.header.html 等等。
• ^__：隐藏名称以__开头的文件或文件夹，如 __tmp，__aaa__ 等等。
• \.sh$：隐藏名称以.sh结尾的文件或文件夹，如 bash.sh,scripts.sh 等等。
• ^robots.txt：隐藏名称以 robots.txt 开头的文件或文件夹，如 robots.txt， robots.txt.bak 等等。
• hideFolders：是否在文件列表中只显示文件而隐藏文件夹。
• theme：默认的文件类型图标，_h5ai/public/images/theme 里的每个文件夹都是一种图标，默认带了 2 套，另一套图标名为 comity。
• default 图标
  
• comity 图标
  
• unmanaged：如果某个文件夹里包含数组里的文件，则将拒绝显示此文件夹里的所有内容。

3、右侧边栏

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

• enabled：是否显示右侧边栏（详情栏）。
• show：是否一直显示右侧边栏。
• qrcode：是否在右侧边栏生成下载链接的二维码以方便移动端下载。

4、文件的选择与下载设置

    "download": {
        "enabled": false,
        "type": "php-tar",
        "packageName": null,
        "alwaysVisible": false
    },
    "select": {
        "enabled": true,
        "clickndrag": true,
        "checkboxes": false
    },

选择的设置

• enabled：是否允许文件选择，如果禁止文件选择，那么文件就无法下载。
• clickndrag：是否允许左键拖动来进行文件多选。
• checkboxes：当鼠标悬浮在文件名上时是否显示选择框。

下载的设置

• enabled：是否允许下载文件。
• type：选择压缩方式。
• php-tar：使用 php 内置功能来下载文件，多线程，可以同时下载多个文件。
• shell-tar：使用外部 tar 程序来下载文件，单线程，同一时间只能下载一个文件。
• shell-zip：使用外部 zip 程序来下载文件，单线程，同一时间只能下载一个文件。
• packageName：默认压缩包名称，为 null 时压缩包名称当前文件夹的名称,
• alwaysVisible：下载按钮是否动态显示（只能选中文件后显示）。

5、语言设置

    "l10n": {
        "enabled": true,
        "lang": "en",
        "useBrowserLang": true
    },

• enabled：是否允许更改界面语言
• lang：默认界面语言，en 为英文，zh-cn 为中文简体，zh-tw 为中文繁体。
• useBrowserLang：是否根据浏览器的语言来自动调整界面语言。

6、Google字体本地化

    "resources": {
        "scripts": [],
        "styles": [
            "//fonts.googleapis.com/css?family=Ubuntu:300,400,700|Ubuntu Mono:400,700"
        ]
    },

在这里添加的第三方脚本与 CSS 会自动生成 标签插入所有页面的 中。
默认从 _h5ai/public/ext/ 里加载不以「 http://、https://、/ 」开头的脚本与 CSS 文件。

因为 h5ai 需要从 fonts.googleapis.com 下载所需的字体，所以国内的用户加载网页非常缓慢。
解决此问题有三种方法：

1. 将页面字体更改为常见的字体，如宋体、微软雅黑等等。
2. 将 fonts.googleapis.com 更换为国内的镜像网站。如中科大。

    "resources": {
        "scripts": [],
        "styles": [
            "//fonts.lug.ustc.edu.cn/css?family=Ubuntu:300,400,700|Ubuntu Mono:400,700"
        ]
    },

中科大	对应	谷歌字体
fonts.lug.ustc.edu.cn	-->	fonts.googleapis.com
ajax.lug.ustc.edu.cn	-->	ajax.googleapis.com
google-themes.lug.ustc.edu.cn	-->	themes.googleusercontent.com
fonts-gstatic.lug.ustc.edu.cn	-->	fonts.gstatic.com

1. 将谷歌字体下载到本地。

• 将谷歌字体的 CSS 文件与字体下载到本地

#!/bin/bash

ext_dir="/var/www/_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|Ubuntu 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

• 在 options.json 将谷歌字体换成本地字体

    "resources": {
        "scripts": [],
        "styles": [
            "fonts.google.css"
        ]
    },

四、功能扩展

1、页眉与页脚

当分享的文件夹太多时，为了方便区分，可以在文件夹下创建指定名称的文件来提供简介。
这些信息显示在页面文件夹列表的上面或下面。如下面两副图：

• 文件列表的页眉

• 文件列表的页脚
  

页眉

1. 在文件夹下新建 _h5ai.header.html 或 _h5ai.header.md，以提供此文件夹简介。
2. 在浏览器中刷新此文件夹的页面即可。

_h5ai.header 的内容被添加在 <div></div> 里。所以页面里不能包含 <html><head><body> 等标签。

_h5ai.header.html：

<h1 style="text-align:center">This is a header message</h1>
<p style="text-align:center">
The header is read from file <code>_h5ai.header.html</code>. The content of this file will be enclosed by div tags.
</p>

_h5ai.header.md：

# This is a header message

The header is read from file `_h5ai.header.html`.The content of this file will be enclosed by div tags.

页脚

1. 在文件夹下新建 _h5ai.footer.html 或 _h5ai.footer.md，以提供此文件夹简介。
2. 在浏览器中刷新此文件夹的页面即可。

_h5ai.footer 的内容被添加在 <div></div> 里。所以页面里不能包含 <html><head><body> 等标签。

_h5ai.footer.html：

<p style="text-align:center">
The footer is read from file _h5ai.footer.html.The content of this file will be enclosed by div tags.
</p>
<p style="text-align:center">
<strong>Note</strong>: all files and directories of name _h5ai* are hidden from the index by default.
</p>

_h5ai.footer.md：

The footer is read from file `_h5ai.footer.html`. The content of this file will be enclosed by div tags.
**Note**: all files and directories of name `_h5ai*` are hidden from the index by default.

2、视频插件

HTML5 视频简介

因为 h5ai 采用原生的 HTML5 标签``来播放，所以它只能播放浏览器原生支持的视频格式。

HTML5 原生支持的视频格式

Format	Media Type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

各个浏览器支持的视频格式

Browser	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (from Opera 25)	YES	YES

因为 HTML5 <video> 功能简陋，开发者们就发明了各种视频插件。

• 添加弹幕、播放速度调整（快速或慢速播放）的 DPlayer。
• 改善视频的传输方式 hls.js、dash.js 等等。
• HLS.js：HTTP Live Streaming, 苹果公司开发的流媒体网络传输协议，也就是我们经常使用的 m3u8 方式，工作原理是把整个视频根据时间 (如 8s) 来进行分割成多个小视频，然后每次只下载一些即可播放。且 HLS 传输基于 HTTP 报文，所以它可以穿过任何允许 HTTP 数据通过的防火墙或者代理服务器。
• dash.js：Dynamic Adaptive Streaming over HTTP，缩写 DASH，也称 MPEG-DASH，是一种自适应比特率串流技术，即网络通畅时自动切换至高分辨率的视频，网络卡顿时自动切换至低分辨率的视频。

h5ai 默认的视频播放器

DPlayer的播放器

h5ai-v0.29.2 添加 DPlayer 插件

国人 Pearlulu 已经为 h5ai 的 v0.29.2 版本添加了 DPlayer 插件，并写了个 shell script 以将视频文件转换成 hls 格式。我们可以直接下载使用。

下载地址： h5ai_dplayer_hls_0.29.2

h5ai-0.29.2 025~a1bb755 添加 DPlayer 插件

这个版本因为作者 larsjung 更新了许多 JS 基础模块，所以最终由 Node.Js 生成的代码变动比较大。
我们将 Pearlulu 为 DPlayer 添加的代码微调并添加到 h5ai-0.29.2 025~a1bb755 版本里。
添加完成后，使用方法同 Pearlulu-h5ai_dplayer_hls。

1. options.json

/* 添加 hls.js / DPlayer.min.js / DPlayer.min.css */
    "resources": {
        "scripts": [
            "//cdn.jsdelivr.net/npm/hls.js@latest",
            "//github.com/MoePlayer/DPlayer/raw/master/dist/DPlayer.min.js"
        ],
        "styles": [
            "fonts.google.css",
            "//github.com/MoePlayer/DPlayer/raw/master/dist/DPlayer.min.css"
        ]
    },
    ...
    "view":
        ...
        "hidden":  

1. 修改 _h5ai/public/js/scripts.js 文件
   因为 scripts.js 被压缩了，所以我们需要先将它解压还原。

这里我们选择 在线解压。解压完成后，运行下面的脚本：

#!/bin/bash

_scripts_js="/var/www/_h5ai/public/js/scripts.js"

if [ $(cat $_scripts_js | wc -l) -lt 3000 ]; then
    echo "请先将 scripts.js 解压"
    echo "解压后的文件行数超过3500行"
    exit 1
fi


if [ $(grep "v0.29.2 025\~a1bb755" "$_scripts_js" | wc -l) -eq 0 ]; then
    echo "h5ai的版本不正确"
    exit 1
fi
    
sed -i '/^\s\ e\.stopPropagation(),\s\ e\.preventDefault()$/,/^\s\ var\s*t\s*=\s*e.keyCode;/{
/^\s\ var\s*\w\s*=\s*e.keyCode;/i\
                if (document.querySelector("#dplayer")) {\
                    return;\
                }
}' "$_scripts_js"

sed -i '/^\s\ .*<video\s*id="pv-content-vid"/, /^\s\ }(.*"src",\s*n\.absHref)\s*$/{
/n\.absHref)$/a\
                    *\/
/<video\s*id="pv-content-vid"/i\
                    var fileurl = n.absHref;\
                    var filepath = fileurl.slice(0,fileurl.lastIndexOf("/"));\
                    var filename = fileurl.slice(fileurl.lastIndexOf("/") 1);\
                    var filenotype = fileurl.slice(fileurl.lastIndexOf("/") 1,fileurl.lastIndexOf("."));\
                    var m3u8 = filepath "/__" filename "__/video.m3u8";\
                    var sub = filepath "/" filenotype ".vtt";\
                    function loadXMLDoc() {\
                        var xmlhttp = new XMLHttpRequest();\
                        xmlhttp.onreadystatechange = function() {\
                            if (xmlhttp.readyState == 4) {\
                                if (xmlhttp.status == 200) {\
                                    loadPlayer(m3u8);\
                                    console.log("play m3u8");\
                                } else if (xmlhttp.status == 404) {\
                                    console.log("play normal");\
                                    loadPlayer(fileurl);\
                                } else {\
                                    console.log("other");\
                                }\
                            }\
                        }\
                        xmlhttp.open("GET", m3u8, true);\
                        xmlhttp.send();\
                    }\
                    function loadPlayer(url) {\
                        document.querySelector("#pv-container").classList.remove("hidden");\
                        document.querySelector("#pv-spinner").style.display = "none";\
                        var dp = document.createElement("div");\
                        dp.id = "dplayer";\
                        dp.style.cssText = "width:100%;height:100%";\
                        document.querySelector("#pv-container").appendChild(dp);\
                        var dplayer = new DPlayer({\
                            container: document.querySelector("#dplayer"),\
                            autoplay: true,\
                            mutex: true,\
                            video: {\
                                url: url,\
                                type: "auto"\
                            },\
                            subtitle: {\
                                url: sub,\
                                type: "webvtt"\
                            }\
                        });\
                        s.setLabels([s.item.label],"","");\
                    }\
                    loadXMLDoc();\
                    /*
}' "$_scripts_js"

修改完成的 h5ai 下载地址：h5ai_dplayer_hls-0.29.2 025~a1bb755.7z
访问密码：8888

五、php 安全设置

网上关于 php.ini 的安全设置里，一般为这几项：

• allow_url_include：Off（不允许包含远程资源文件）
• allow_url_fopen：Off（不允许打开远程文件）
• open_basedir：/var/www/（网站根目录）
• disable_functions：

# 禁止命令执行函数
disable_functions = system,passthru,exec,shell_exec,popen,pcntl_exec,proc_open
# 禁止文件操作函数
isable_functions=chdir,chroot,dir,getcwd,opendir,readdir,scandir,fopen,unlink,delete,copy,mkdir,rmdir,rename,file,file_get_contents,fputs,fwrite,chgrp,chmod,chow
1234

• expose_php：Off（不显示PHP版本信息）
• display_errors：Off（出错脚本错误时不显示错误信息）
• log_errors：On（出错脚本错误时记录日志）
• error_log：/usr/local/apache2/logs/php_error.log（日志文件路径）

因为 h5ai 需要使用 opendir / readdir / scandir / fopen / file_get_contents / exec / passthru 这几个函数，以实现页面功能，所以我们要在 disable functions 里删除它们。

• file_get_contents：使用此函数读取 options.json，如果不允许使用此函数，页面无法显示。
• fopen：在进行文件下载时使用此函数，但在线查看文件不使用此函数。
• opendir / readdir / scandir：用来获取多国语言文件，如果禁止此函数，则只能显示默认语言，而无法在线更改。
• exec / passthru：扩展功能模块需要使用 shell commands，如生成 视频 / PDF 的缩略图。