Skip to content

BroadcastChannel - 将你的 Telegram Channel 转为微博客

Published: at 17:18

之前一直在 X 分享一些有趣的工具,而且也会同步到 Telegram Channel 上。看到 Austin 说准备建立一个网站,把分享内容都收录进去。 刚好想到最近看到的一个模板 Sepia,就想到把 Telegram Channel 转成微博客。

难度不大,主功能一个周末就搞完了。过程中做到了浏览器端 0 JS, 分享一些有趣的技术点:

  1. 防剧透模式和移动端搜索框隐藏展示,使用的 CSS “:checked 伪类” 和 ”+ 紧邻兄弟组合器” 实现的,参考

  2. 过渡动画使用的 CSS View Transitions, 参考

  3. 图片灯箱用的 HTML 的 popover 属性,参考

  4. 返回顶部的展示和隐藏使用 CSS animation-timeline 实现 Chrome 115 以上版本专属,参考

  5. 多图瀑布流布局,使用 grid 布局实现,参考

  6. 访问统计使用一个 1px 的透明图片做 LOGO 背景,上古技术了,现在几乎没有访问统计软件支持了

  7. 禁止浏览器端 JS 运行,使用的 Content-Security-Policy 的 script-src ‘none’ 参考

搞完以后,就直接开源了,很意外有那么多人喜欢,一周就收获了 800+ 的 star 了。

如果你也有兴趣,可以去 GitHub 上看看。

https://github.com/ccbikai/BroadcastChannel

GitHub 上的 BroadcastChannel 仓库


Previous Post
Vite SSR 项目 Docker 镜像最小化打包方案
Next Post
阿里云 AP8220 刷机教程