目 录CONTENT

文章目录

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

咕咕
2021-09-19 / 0 评论 / 0 点赞 / 497 阅读 / 0 字
温馨提示:
本文最后更新于2024-02-21,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告 广告

结合视频食用更佳

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
0
广告 广告

评论区