As the name suggests, this is a front end to TGTalk.

This project originated from ChenYFan. Without him, this project would not exist.

本项目起源于 ChenYFan，如果没有他，这个项目不可能存在！

本项目由键盘和 AI 自动生成，本人没有义务对该项目引发的任何争议负责任

English | 中文（简体）

TGTalk supports Markdown rendering based on marked.js, but since Telegram automatically recognizes links (adding hyperlinks, escaping, etc.), the effect is not good

You can now use it normally! syntax and`syntax However, you can insert HTML tags into the talk, and it will be rendered normally by TGTalk

However, due to Telegram's ability to automatically identify links, you will not be able to use tags such as video and audio that require data from the outside

If you have the ability, I recommend you write your own styles and templates, so that you can better control the display effect, in addition to this, you can better avoid style pollution (limit the style effect to the mount container)

Add the style file

<link
  rel="stylesheet"
  href="https://registry.npmmirror.com/@floatsheep/tg-talker/latest/files/dist/main.css"
/>

Add the init script and main script

<script>
  window.G_CONFIG = {
    api: "https://tgtalk.api.eurekac.cn", // A api that you deployed
    ref: "g-container", // A container that you want to mount it
    template: "default", // Choose "custom" or "default"
    zoom: true, // Enable Medium-Zoom
  };
</script>
<script src="https://registry.npmmirror.com/@floatsheep/tg-talker/latest/files/dist/index.js"></script>
<div id="g-container"></div> <!--You can choose the id-->
<button id="load-more">More</button> <!--A load more button-->

If you want to use your template, you can choose custom in the template setting

And then, you should refer to the documentation of handlebars to add a template and make its id template

Just like this:

<script id="template" type ="text/x-handlebars-template">
...Your template
</script>
<script>
  window.G_CONFIG = {
    ...Your config
    template: "custom"
  }
</script>

These are the Handlebars Helpers open in this project, which may help you if you want to write your own templates:

TGTalk 支持基于 marked.js 的 Markdown 渲染，但由于 Telegram 会自动识别链接（添加超链接、转义等），效果并不好

目前，你可以正常使用 ![]() 语法 和 []() 语法

但，你可以在说说中插入 HTML 标签，它将会被 TGTalk 正常渲染

尽管如此，受限于 Telegram 自动识别链接的功能，你将无法正常使用 video 和 audio 等需要从外部获取数据的标签

如果你有能力，我更推荐你自己编写样式和模板，这样你能更好控制显示效果，除此之外，你还能更好的避免样式污染（将样式生效范围限定在挂载容器之内）

添加样式文件

<link
  rel="stylesheet"
  href="https://registry.npmmirror.com/@floatsheep/tg-talker/latest/files/dist/main.css"
/>

添加初始化脚本和主要脚本

<script>
  window.G_CONFIG = {
    api: "https://tgtalk.api.eurekac.cn", // 你部署的 API
    ref: "g-container", // 你想要挂载的容器
    template: "default", // 选择 "custom" 或者 "default"
    zoom: true, // 启用 Medium-Zoom（点击图片放大）
  };
</script>
<script src="https://registry.npmmirror.com/@floatsheep/tg-talker/latest/files/dist/index.js"></script>
<div id="g-container"></div> <!--你可以更改ID-->
<button id="load-more">加载更多</button> <!--加载更多按钮-->

如果你想要使用你的 Handlebars 模板，你可以在模板设置中选择 custom

然后你应该参照 Handlebars 的官方文档创建一个 ID 为 template 的模板，就像下面这样：

<script id="template" type ="text/x-handlebars-template">
...你的模板内容
</script>
<script>
  window.G_CONFIG = {
    ...你的配置
    template: "custom"
  }
</script>

这些是本项目中开放的 Handlebars Helper，如果你要编写自己的模板，或许会对你有所帮助：

访问 Gist，复制其中所有代码

进入 Cloudflare 仪表盘

选择创建应用程序 -> 创建 Worker -> 修改名称（部署）-> 编辑代码

在其中粘贴你复制的所有代码，并且修改 ChannelName 为你的频道名称，部署并访问 Worker 查看是否能正确返回内容

！如果不能返回内容，请将 nextBefore 一行更改为 Number((getDataFromTelegram.match(/data-before="([0-9]+)"/g) || ["0"])[0].match(/[0-9]+/g))

接着你可以为你的 Worker 绑定一个域名

保存，然后将你绑定的域名填入配置中的 api 项即可