BroadcastChannel:将 Telegram Channel 频道内容直接生成微博客网站的建站程序

BroadcastChannel:将 Telegram Channel 频道内容直接生成微博客网站的建站程序技术教程主机格调

一个零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’。

真实用户

可部署的平台

广播频道支持部署在 Cloudflare、Netlify、Vercel 等支持 Node.js SSR 的无服务器平台或者 VPS。

  1. Cloudflare
  2. Netlify
  3. Vercel

技术栈

部署教程

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

  1. Fork 此项目到你 GitHub
  2. 在 Cloudflare/Netlify/Vercel 创建项目
  3. 选择 BroadcastChannel 项目和 Astro 框架
  4. 配置环境变量 CHANNEL 为你的频道名称。此为最小化配置,更多配置见下面的配置项
  5. 保存并部署
  6. 绑定域名(可选)。
  7. 更新代码,参考 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 频道内容直接生成微博客网站的建站程序