博客更新日志 (III)
最近重构了一些模块, 把独立的模块拆分到子仓库, 然后通过PR同步到主仓库。
一、新增音乐模块 (含字幕)
1.1 音乐模块
依旧非常喜欢 HX-Music 中的 ASS 字幕渲染.
奈何网络上实在没有什么符合我胃口的ass特效歌词 (太难找了), 有很多都是内嵌. 没有外挂 ass, 找到了也只能看. 不清楚如何实现的.
而且还找到了:
它使用的不是标准的 libass 支持的ass格式. 而是 VSFilterMod 扩展标签.
为了更好的在前端能渲染, 我还 fork 其源码, 支持了 部分 VSFilterMod 扩展 (未支持的就等我碰到再说吧qwq...)
此外, 因为 ass 比较大, 甚至 CDN (免费的) 都无法接受 (> 20 MB)
所以为了提速. 我还开发了 HX-CDN-Forge (一个灵活的 React + TypeScript CDN 节点选择器; 内置 Github 的国内 CDN, 自动选择延迟最低的; 并且可并行分块加载) 充分白嫖 CDN
对应的音乐什么的. 存放于子模块: HXLoLi-Music 中
1.2 Ass 预裁剪
对于 Ass 特效歌词. 因为原本其是为视频适配的. 所以尺寸是 1920x1080 的.
但是如果只是渲染歌词的话. 显然不需要这些尺寸.
同时还需要兼容 歌词上下分离的场景 (比如: 顶部是中文歌词, 底部是日语歌词), 所以需要预裁剪.
Tip
因为我们是静态博客. 所以这些都可以直接预处理. 不用像 HX-Music 中需要考虑客户端本地情况. 而采用 TBB 本地播放前实时裁剪.
特别的, 还要支持一些特别情况. 比如 有时候 左上 和 右下 两个位置需要渲染歌词.
使用朴素的算法就比较难对付. 因为 max/min 得到的框框, 会过大, 导致字幕很小.
为了优化这种情况. 还采用 平滑裁剪 算法, 对于每一个时刻的情况, 都记录下来. 然后平滑裁剪过渡.
这样不会导致字幕过小, 也不会因为裁剪位置变化过大导致抖动、抽搐. 影响体观感~
二、分离子仓库
2.1 CDN 请求 tag 而不是 commit_id
原本的 CDN 方案是:
- 本仓库提交 (工作流可能会需处理数据); 获取到新版
commit_id, 然后再回写仓库中; 用于 CDN 请求.
Tip
不直接使用 主分支 是因为 CDN 的缓存有 1 年时间. 所以都是旧信息. (虽然有api可以清空. 但是太麻烦了)
所以, 我们才需要指定 commit_id 进行请求. 而坏处是会而外引入一次 git 提交. 让仓库 git log 变得很卢瑟.
更好的解决方案是, 我们在提交前, 先商量好一个 tag_id, 这样就可以随着上一次提交一起提交. 无需额外提交.
之后再让 工作流 新增一个tag就行了.
2.2 分离仓库
既然如此. 那顺便就把 ANiMe 和 Music 都分离在子仓库了. 这样即便子仓库被封了. 也不会影响我主仓库的数据 awa
然后他们还可以使用我上面的方案生成 CDN. 至于如何同步给主仓库他们的 tag ? 直接工作流提 PR 即可!
真不错!
三、私有笔记
简单说明一下. 目前博客是在公开仓库部署的 (因为工作流是免费的)
但是我也是有 私有 笔记的需求的. 那如何展示在主站呢?!
简单的说. 就是笔记存档到私有仓库. 主仓库构建时候, 在工作流可以拉取私有仓库的内容.
然后合并即可. 对于加密的话. 类似于 Https 的思路. 非对称 + 对称 这种.
所以我专门写了个插件: HXLoLi-NaGaMe 用于查看私有笔记.
自带解密. 很神奇吧?
