结合视频食用更佳
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://halo.run/archives/use-markdown
自适应代码
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
评论区