
一个零JS的微博客解决方案,让 Telegram Channel 内容优雅地展示在网页上,也就是将你的 Telegram Channel 内容直接转化到微博客类型的网站,SEO 友好,并且生成 sitemap.xml,可以很方便添加 Google Search Consle 和 Adsense 代码,而且如果你修改了 Telegram Channel 内容,网站会同步直接修改,一键撤回并且修改;通过 #文字 来添加文章标签和作为菜单目录直接添加到网站首页。
部署也极其简单,就像我这样的小白,也可以通过 CloudFlare Worker 直接一键部署。
项目地址:https://github.com/ccbikai/BroadcastChannel
技术亮点
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’。
真实用户
- 面条实验室
- Find Blog????发现博客
- Memos 广场 ????
- APPDO 数字生活指南
- 新闻在花频道
- ALL About RSS
- Charles Chin's Whisper
- PlayStation 新闻转发
- Yu's Life
- Leslie 和朋友们
- OKHK 分享
- gledos 的微型博客
- Steve Studio
- LiFePO4:沙雕吐槽
- Hotspot Hourly
- _My. Tricks ???? Collection
- miyi23's Geekhub资源分享
- Magazine|期刊杂志|财新周刊
- Remote Jobs & Cooperation
- 甬哥侃侃侃--频道发布
- Fugoou.log
- MakerHunter
- Abner's memos
- 小众软件的发现
- 小报童优惠与排行榜
可部署的平台
广播频道支持部署在 Cloudflare、Netlify、Vercel 等支持 Node.js SSR 的无服务器平台或者 VPS。
技术栈
- 框架:Astro
- 内容管理系统:Telegram Channels
- 模板: Sepia
部署教程
Docker
docker pull ghcr.io/ccbikai/broadcastchannel:main docker run -d --name broadcastchannel -p 4321:4321 -e CHANNEL=miantiao_me ghcr.io/ccbikai/broadcastchannel:main
Serverless
- Fork 此项目到你 GitHub
- 在 Cloudflare/Netlify/Vercel 创建项目
- 选择 BroadcastChannel 项目和 Astro 框架
- 配置环境变量 CHANNEL 为你的频道名称。此为最小化配置,更多配置见下面的配置项
- 保存并部署
- 绑定域名(可选)。
- 更新代码,参考 GitHub 官方文档 从 Web UI 同步分叉分支。
环境变量配置
## Telegram 频道用户名,必须配置。 t.me/ 后面那串字符 CHANNEL=miantiao_me ## 语言和时区设置,语言选项见[dayjs](https://github.com/iamkun/dayjs/tree/dev/src/locale) LOCALE=zh-cn TIMEZONE=Asia/Shanghai ## 社交媒体用户名 TELEGRAM=ccbikai TWITTER=ccbikai GITHUB=ccbikai ## 下面两个社交媒体需要为 URL DISCORD=https://DISCORD.com PODCASRT=https://PODCASRT.com ## 头部尾部代码注入,支持 HTML FOOTER_INJECT=FOOTER_INJECT HEADER_INJECT=HEADER_INJECT ## SEO 配置项,可不让搜索引擎索引内容 NO_FOLLOW=false NO_INDEX=false ## Sentry 配置项,收集服务端报错 SENTRY_AUTH_TOKEN=SENTRY_AUTH_TOKEN SENTRY_DSN=SENTRY_DSN SENTRY_PROJECT=SENTRY_PROJECT ## Telegram 主机名称和静态资源代理,不建议修改 HOST=telegram.dog STATIC_PROXY= ## 启用谷歌站内搜索 GOOGLE_SEARCH_SITE=memo.miantiao.me ## 启用标签页, 标签使用英文逗号分割 TAGS=标签A,标签B,标签C ## 展示评论 COMMENTS=true ## 链接页面中的超链接, 使用英文逗号和分号分割 LINKS=Title1,URL1;Title2,URL3;Title3,URL3; ## 侧边栏导航项, 使用英文逗号和分号分割 NAVS=Title1,URL1;Title2,URL3;Title3,URL3; ## 启用 RSS 美化 RSS_BEAUTIFY=true
部署常见问题
为什么部署后内容为空?
- 检查频道是否是公开的,必须是公开的
- 频道用户名是字符串,不是数字
- 关闭频道 Restricting Saving Content 设置项
- 修改完环境变量后需要重新部署
- Telegram 会屏蔽一些敏感频道的公开展示, 可以通过访问 https://t.me/s/频道用户名 确认
未经允许不得转载:主机格调 » BroadcastChannel:将 Telegram Channel 频道内容直接生成微博客网站的建站程序
主机格调



