【如何优雅地写博客】利用h5ai自建一个视频床！

结合视频食用更佳

https://bilibili.com/BV1Xv411w7zq

Halo完整搭建视频：

https://bilibili.com/BV1JN411Q7Na

视频测试环境

• Ubuntu20.04
• 宝塔面板7.7.0
• Nginx1.18.0
• MySQL5.6.50
• PHP7.4
• Docker20.10.8
• Docker Compose1.29.2

Markdown用法

具体请见：https://markdown.com.cn/

自适应代码

b站通用代码

<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"src="//player.bilibili.com/player.html?aid=632650247&bvid=BV1bb4y1m73h&cid=398488643&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" ></iframe>
</div>

自定义视频代码

不自动播放：

<div style="position: relative; padding: 30% 45%;">
<video style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" controls>
    <source src="https://files.guguge.ga/video/Water%20Rocket%20-%20Data%20Visualizer%20Demo%20%281%29.mp4" type="video/mp4">
</video>
</div>

自动播放：

<div style="position: relative; padding: 30% 45%;">
<video style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" controls autoplay>
    <source src="https://files.guguge.ga/video/Water%20Rocket%20-%20Data%20Visualizer%20Demo%20%281%29.mp4" type="video/mp4">
</video>
</div>

参考：html – 如何在iframe中禁用本地视频的自动播放

网易云音乐

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=32507038&auto=0&height=66"></iframe>

如果设置auto=1，则会自动播放

源码下载：

https://release.larsjung.de/h5ai/h5ai-0.30.0.zip

伪静态

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

配置优化

参考链接：https://waterbear.pw/1973.html

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

语言设置

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

enabled：是否允许更改界面语言

lang：默认界面语言，en 为英文，zh-cn 为中文简体，zh-tw 为中文繁体。

useBrowserLang：是否根据浏览器的语言来自动调整界面语言。

显示设置

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

enabled：是否显示右侧边栏（详情栏）。

show：是否一直显示右侧边栏。

qrcode：是否在右侧边栏生成下载链接的二维码以方便移动端下载。

字体设置(Google字体换镜像源)

将 fonts.googleapis.com 更换为国内的镜像网站。如中科大。

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

下载设置

"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：下载按钮是否动态显示（只能选中文件后显示）。

页眉页脚设置

当分享的文件夹太多时，为了方便区分，可以在文件夹下创建指定名称的文件来提供简介。

这些信息显示在页面文件夹列表的上面或下面。

页眉

在文件夹下新建 _h5ai.header.html 或 _h5ai.header.md，以提供此文件夹简介。

在浏览器中刷新此文件夹的页面即可。

_h5ai.header 的内容被添加在

里。所以页面里不能包含 等标签。

_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.footer.html 或 _h5ai.footer.md，以提供此文件夹简介。

在浏览器中刷新此文件夹的页面即可。

_h5ai.footer 的内容被添加在

里。所以页面里不能包含 等标签。

_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>

更多功能，可以访问https://waterbear.pw/1973.html 参考

filebrowser安装

docker run -d -v /www/wwwroot/files.guguge.ga:/srv -v /root/filebrowser/filebrowserconfig.json:/etc/config.json -v /root/filebrowser/database.db:/etc/database.db --name myfile -p 8002:80 filebrowser/filebrowser