H5ai 完整安装及使用教程H5ai 完整安装及使用教程

生命不息,
折腾不止!

H5ai 完整安装及使用教程

简介

h5ai是HTTP Web服务器的现代文件索引器,重点放在您的文件上。目录以吸引人的方式显示,并且通过不同的视图,面包屑和树概述来增强对目录的浏览。最初,h5ai是HTML5 Apache Index的首字母缩写,但现在它也支持其他Web服务器。

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

h5ai 通过不同的视图来对服务器端的目录和文件进行查看。可以在线预览 PDF、文档、脚本(语言高亮)、图片、视频、下载(二维码)等等。

因为它重在文件索引与分享,所以不支持文件上传。

官网:https://larsjung.de/h5ai/

官方Demo:https://larsjung.de/h5ai/demo/

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

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

h5ai 的安装与部署

官网:https://larsjung.de/h5ai/

从官网可以下载到最新的稳定版,下载后上传到服务器空间解压,此时得到 _h5ai 文件夹,这个文件夹和你的网盘文件属于并列关系

网站目录示意关系如下所示

官方版本
DOC_ROOT
├─ _h5ai
├─ your files
└─ and folders

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

将需要分享的文件放在网站根目录下即可,把 public 和 private 权限777,而 h5ai 程序全部在 _h5ai 文件夹里。

Ps:程序默认 _h5ai. 开头的文件不显示,可以修改配置 options.json 文件来自定义不想分享的文件。

安装

将文件夹复制 _h5ai 到 Web服务器的文档根目录:DOC_ROOT/_h5ai

DOC_ROOT[网站根目录]
 ├─ _h5ai
 ├─ your files
 └─ and folders

 

Apache httpd 2.2 / 2.4:例如httpd.conf,在根目录的 .htaccess 文件集中或在根目录中:

DirectoryIndex  index.html  index.php  /_h5ai/public/index.php

lighttpd 1.4:lighttpd.conf 例如:

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

nginx 1.2:nginx.conf 例如:

index  index.html  index.php  /_h5ai/public/index.php;

Cherokee 1.2:cherokee.conf 例如:

vserver!1!directory_index = index.html,index.php,/_h5ai/public/index.php

如宝塔面板,只需在【网站-设置-配置文件】中添加即可!

 

自定义安装

可以将 h5ai 安装到Web服务器文档根目录的任何子目录中。当显示面包屑等时,此目录将被视为根目录。

例如,将文件夹复制 _h5aiDOC_ROOT/some/folder/_h5ai

DOC_ROOT[根目录]
 └─ some[子目录]
     └─ folder
         ├─ _h5ai
         ├─ your files
         └─ and folders

参观 http://YOUR-DOMAIN.TLD/some/folder/_h5ai/public/index.php,看看是否一切正常。

在此示例中,您需要添加 /some/folder/_h5ai/public/index.php 到索引文件列表中(如上面的步骤所示)。

 

h5ai 环境与功能的检测配置

打开网址 http://YOUR-DOMAIN.TLD/_h5ai/public/index.php 查看 h5ai 当前运行信息,显示有关服务器功能的一些提示,当前运行环境与功能模块的自检结果。

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

查看 h5ai 当前运行信息

查看检测结果

h5ai 当前运行信息

说明

  • 绿色,即代表检测通过
  • 红色,存在兼容性问题。如此处的 server software(服务器) 一栏
  • 红色的no,即此功能缺失,需要安装依赖环境。

如此处的PDF thumbs(PDF缩略图),提示缺少convert(imagemagick)程序,此功能为 PDF文档生成缩略图;解决此问题只需在服务器安装 imagemagick

apt-get install imagemagick

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

h5ai 的配置文件

以下不专门注明的话,都是在 h5ai 的默认设置文件中进行修改即可。默认的配置文件路径为 _h5ai/private/conf/options.json ,修改它对 h5ai 的功能进行增减。

功能自检页面的密码设置

    /*
    Password hash.

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

passhash 即 password hash 的缩写,它的值为密码经过 SHA512 hash 计算后的结果。

cf83e1357....da3e 这串字符为空字符的 SHA512 哈希值。

所以我们在上面 【h5ai 环境与功能的检测配置】 步骤里不用输入密码即可登录。

如何修改默认密码?

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

配置文件里给出的密码在线生成网址 md5hashing.net 不安全,它默认保存我们的密码与对应的 Hash 值,这样就想要当于人为增加地下黑产的密码数据库,所以不建议使用!!!

所以在这里推荐使用 emn178 开源的静态网页版的密码生成工具 online-tools,或者直接使用 SHA512 加密

语言设置

在配置文件中搜索“l10n”

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

设置说明

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

文件搜索功能

在配置文件中搜索“search”

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

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

h5ai 开启搜索功能

多文件下载设置

1.在配置文件中搜索 select,"enabled": true, 默认为 true 开启状态,false 为关闭。之后你的 h5ai 点击文件先端的时候,并不是下载,而是选中文件,下载的按钮,在左上角。如果要下载文件呢,可以点击文件名字依旧还是下载功能。

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

2.配置文件中搜索 download,将 "alwaysVisible": false 改为 "alwaysVisible": true,如果需要设置打包文件的格式为 zip,而不是默认的tar的话,需要将 php-tar 改为 shell-zip

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

信息与二维码

可以通过扫码的方式下载文件。在配置文件中搜索 "info" ,将 "show": false, 改为 "show": true

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

 

字体加速

h5ai使用了谷歌字体,我这里测试谷歌字体可以正常加载速度也很快,大家根据需要选择是否修改

打开文件目录:h5ai/private/conf/options.json,找到 resources 项,将 styles 参数中的

fonts.googleapis.com
替换为:
fonts.loli.net

或者选择将谷歌字体下载到 _h5ai/public/ext 文件中,同时将 options.json 中参数按下图修改

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

 

界面修改

修改默认显示域名

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

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

查找

===t?f.getDomain():n.name
修改为
===t?'你想显示的内容':n.name

相关设置说明

关键字说明

  • true -- 启用
  • false -- 不启用

 

其他说明

头部与底部说明

在需要显示说明的目录下,添加 _h5ai.headers.html_h5ai.footers.html

_h5ai.header.html 文件格式,注意里面不需要等标签

<h1 style="text-align:center">标题</h1>
<p style="text-align:center">
正文内容
</p>

_h5ai.footer.html 文件格式

<p style="text-align:center">正文内容</p>

这里使用 _h5ai.headers.md_h5ai.footers.md 也可以

 


 

解决宝塔面板使用h5ai报错的问题

报错分析

按照h5ai官网配置好以后,直接访问会提示如下错误:

Warning
: putenv() has been disabled for security reasons in
/www/wwwroot/***/_h5ai/private/php/class-bootstrap.php
on line
8

找到 class-bootstrap.php 之后查看代码第8行内容如下:

putenv('LANG=en_US.UTF-8');

经过分析确定问题是由于php禁用了"putenv"函数所以导致以上的错误提示。

解决问题

解决以上问题,只需要进入宝塔面板后台。选择“软件商店”,找到已安装对应的php版本,在右侧选择“设置”——“禁用函数”,在禁用函数列表中找到“putenv”删除,最后重启php即可。

1.首先确认网站的PHP版本

1.首先确认网站的PHP版本

2.编辑宝塔后台的PHP版本

2.编辑宝塔后台的PHP版本

3.删除PHP版本中的禁用函数putenv

3.删除PHP版本中的禁用函数putenv

后记

使用h5ai需要修改默认文档,根据h5ai官网提示需将 **/_h5ai/public/index.php** 添加到默认文档中。需要注意的是前面必须有"/",否则会出现错误。

更多内容请参考:https://larsjung.de/h5ai/

 


给你的h5ai 网盘增加密码访问,免遭被滥用

说明:一般h5ai安装后都是不需要用户名和密码就可以直接查看目录的,这样很不好,所以我们需要手动添加些代码,使其需要输入用户名和密码才能查看。【Via

随着大硬盘VPS的普及,许多朋友都自己搭建了类似网盘的东西,其中比较受欢迎的H5ai,但是h5ai虽然功能强大,但是使用却是各种不方便,苏苏也自己搭建了一个,比较坑的是中文始终无法正常显示,折腾了许久,也就放弃了。h5ai另一个让我们诟病的是,是开放式的,任何人只要知道你的网址,就可以随意访问你里面的文件,完全没有隐私可言。有时候如果我们想放一些不可描述的东西就显得比较为难了。给h5ai增加密码访问,保护好自己的文件,不被陌生人访问,就成了刚需。

其实给h5ai增加密码访问也不是没有办法,而且办法也很简单,就是用PHP的HTTP认证即可,寥寥几行代码即可完成。但是,PHP 的 HTTP 认证机制仅在 PHP 以 Apache 模块方式运行时才有效,因此该功能不适用于 CGI 版本。

更具体的信息,大家可以参考PHP的相关手册,这里不多做介绍。直接开始本文的教程。

方法1:

首先我们要找进入h5ai目录找到【 _h5ai/public/index.php 】并编辑

1、在所有代码前增加以下代码,默认演示密码为:1024+1024

<?php
session_start();
if(isset($_POST['password']) && $_POST['password'] == '1024+1024'){
    $_SESSION['ok'] = 1;
    header('location:?');
}
if(!isset($_SESSION['ok'])){
    exit('
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="renderer" content="webkit"> 
    <meta name="author" content="mengkun">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>该页面已被加密</title>
    <style type="text/css">
    *{font-family:"Microsoft Yahei",微软雅黑,"Helvetica Neue",Helvetica,"Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif;box-sizing:border-box;margin:0px;padding:0px;font-size:14px;-webkit-transition:.2s;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s}
    html,body{width:100%;height:100%}
    body{background-color:#F4F6F9;color:#768093}
    input,button{font-size:1em;border-radius:3px;-webkit-appearance:none}
    input{width:100%;padding:5px;box-sizing:border-box;border:1px solid #e5e9ef;background-color:#f4f5f7;resize:vertical}
    input:focus{background-color:#fff;outline:none}
    button{border:0;background:#6abd09;color:#fff;cursor:pointer;opacity:1;user-select:none}
    button:hover,button:focus{opacity:.9}
    button:active{opacity:1}
    .main{width:100%;max-width:500px;height:300px;padding:30px;background-color:#fff;border-radius:2px;box-shadow:0 10px 60px 0 rgba(29,29,31,0.09);transition:all .12s ease-out;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;text-align:center}
    .alert{width:80px}
    .mk-side-form{margin-bottom:28px}
    .mk-side-form input{float:left;padding:2px 10px;width:77%;height:37px;border:1px solid #ebebeb;border-right-color:transparent;border-radius:2px 0 0 2px;line-height:37px}
    .mk-side-form button{position:relative;overflow:visible;width:23%;height:37px;border-radius:0 2px 2px 0;text-transform:uppercase}
    .pw-tip{font-weight:normal;font-size:26px;text-align:center;margin:25px auto}
    #pw-error {color: red;margin-top: 15px;margin-bottom: -20px;}
    .return-home{text-decoration:none;color:#b1b1b1;font-size:16px}
    .return-home:hover{color:#1E9FFF;letter-spacing:5px}
    </style>
</head>
<body>
    <div class="main">
        <svg class="alert" viewBox="0 0 1084 1024" xmlns="http://www.w3.org/2000/svg" width="80" height="80">
            <defs><style/></defs>
            <path d="M1060.744 895.036L590.547 80.656a55.959 55.959 0 0 0-96.919 0L22.588 896.662a55.959 55.959 0 0 0 48.43 83.907h942.14a55.959 55.959 0 0 0 47.525-85.534zm-470.619-85.172a48.008 48.008 0 1 1-96.015 0v-1.567a48.008 48.008 0 1 1 96.015 0v1.567zm0-175.345a48.008 48.008 0 1 1-96.015 0V379.362a48.008 48.008 0 1 1 96.015 0v255.157z" fill="#FF9800"/>
        </svg>
        
        <form action="" method="post" class="mk-side-form">
            <h2 class="pw-tip">该页面已被加密</h2>
            <input type="password" name="password" placeholder="请输入访问密码查看" required><button type="submit">提交</button>
        </form>
        <a href="" class="return-home" title="点击回到网站首页">- 返回首页 - </a>
    </div>
	
<!--
恭喜发现彩蛋
请解密这段摩斯电码:-.--.----.--/---../-....
-->

</body>
</html>
    ');
}
?>

 

0.30.0版本【 _h5ai/public/index.php 】文件演示代码如下:

<?php
session_start();
if(isset($_POST['password']) && $_POST['password'] == '1024+1024'){
    $_SESSION['ok'] = 1;
    header('location:?');
}
if(!isset($_SESSION['ok'])){
    exit('
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="renderer" content="webkit"> 
    <meta name="author" content="mengkun">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>该页面已被加密</title>
    <style type="text/css">
    *{font-family:"Microsoft Yahei",微软雅黑,"Helvetica Neue",Helvetica,"Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif;box-sizing:border-box;margin:0px;padding:0px;font-size:14px;-webkit-transition:.2s;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s}
    html,body{width:100%;height:100%}
    body{background-color:#F4F6F9;color:#768093}
    input,button{font-size:1em;border-radius:3px;-webkit-appearance:none}
    input{width:100%;padding:5px;box-sizing:border-box;border:1px solid #e5e9ef;background-color:#f4f5f7;resize:vertical}
    input:focus{background-color:#fff;outline:none}
    button{border:0;background:#6abd09;color:#fff;cursor:pointer;opacity:1;user-select:none}
    button:hover,button:focus{opacity:.9}
    button:active{opacity:1}
    .main{width:100%;max-width:500px;height:300px;padding:30px;background-color:#fff;border-radius:2px;box-shadow:0 10px 60px 0 rgba(29,29,31,0.09);transition:all .12s ease-out;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;text-align:center}
    .alert{width:80px}
    .mk-side-form{margin-bottom:28px}
    .mk-side-form input{float:left;padding:2px 10px;width:77%;height:37px;border:1px solid #ebebeb;border-right-color:transparent;border-radius:2px 0 0 2px;line-height:37px}
    .mk-side-form button{position:relative;overflow:visible;width:23%;height:37px;border-radius:0 2px 2px 0;text-transform:uppercase}
    .pw-tip{font-weight:normal;font-size:26px;text-align:center;margin:25px auto}
    #pw-error {color: red;margin-top: 15px;margin-bottom: -20px;}
    .return-home{text-decoration:none;color:#b1b1b1;font-size:16px}
    .return-home:hover{color:#1E9FFF;letter-spacing:5px}
    </style>
</head>
<body>
    <div class="main">
        <svg class="alert" viewBox="0 0 1084 1024" xmlns="http://www.w3.org/2000/svg" width="80" height="80">
            <defs><style/></defs>
            <path d="M1060.744 895.036L590.547 80.656a55.959 55.959 0 0 0-96.919 0L22.588 896.662a55.959 55.959 0 0 0 48.43 83.907h942.14a55.959 55.959 0 0 0 47.525-85.534zm-470.619-85.172a48.008 48.008 0 1 1-96.015 0v-1.567a48.008 48.008 0 1 1 96.015 0v1.567zm0-175.345a48.008 48.008 0 1 1-96.015 0V379.362a48.008 48.008 0 1 1 96.015 0v255.157z" fill="#FF9800"/>
        </svg>
        
        <form action="" method="post" class="mk-side-form">
            <h2 class="pw-tip">该页面已被加密</h2>
            <input type="password" name="password" placeholder="请输入访问密码查看" required><button type="submit">提交</button>
        </form>
        <a href="" class="return-home" title="点击回到网站首页">- 返回首页 - </a>
    </div>
	
<!--
恭喜发现彩蛋
请解密这段摩斯电码:-.--.----.--/---../-....
-->

</body>
</html>
    ');
}
?>








<?php

define('H5AI_VERSION', '0.30.0');
define('MIN_PHP_VERSION', '7.0.0');

if (!function_exists('version_compare') || version_compare(PHP_VERSION, MIN_PHP_VERSION, '<')) {
    header('Content-type: text/plain;charset=utf-8');
    exit('[ERR] h5ai requires PHP ' . MIN_PHP_VERSION . ' or later, but found PHP ' . PHP_VERSION);
}

if (substr(H5AI_VERSION, 0, 1) === '{') {
    header('Content-type: text/plain;charset=utf-8');
    exit('[ERR] h5ai sources must be preprocessed to work correctly');
}

require_once __DIR__ . '/../private/php/class-bootstrap.php';
Bootstrap::run();

 

方法2:

首先我们要找进入h5ai目录找到【 _h5ai/public/index.php 】并编辑

1、在头部 <?php 的下一行,增加

auth();

在底部增加 以下代码:

function auth ()
{
        $valid_passwords = array ("账号" => "密码");
        $valid_users = array_keys($valid_passwords);

        $user = $_SERVER['PHP_AUTH_USER'];
        $pass = $_SERVER['PHP_AUTH_PW'];

        $validated = (in_array($user, $valid_users)) && ($pass == $valid_passwords[$user]);

        if (!$validated) {
          header('WWW-Authenticate: Basic realm="My Realm"');
          header('HTTP/1.0 401 Unauthorized');
          die ("Not authorized");
        }
}

注:账号和密码可以根据自己需求进行填写。

 

赞() 打赏
未经允许不得转载:我的博客 » H5ai 完整安装及使用教程
分享到: 更多 (0)

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    这是评论测试

    DUX主题小秘7个月前 (09-17)回复
    • 飞歌导航东方红烦得很

      themebetter主题小秘3周前 (04-08)回复
  2. #2

    这是新的一条评论

    DUX主题小秘7个月前 (09-17)回复
  3. #3

    未来一年,中国的移动支付市场会是什么样?

    DUX主题小秘7个月前 (09-17)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

大前端WP主题 更专业 更方便

联系我们 联系我们