Skip to content

Latest commit

 

History

History
179 lines (131 loc) · 8.46 KB

README.md

File metadata and controls

179 lines (131 loc) · 8.46 KB
Raw

TGTalk FrontEnd

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

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

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

This item was generated automatically by the keyboard and AI, and I am not obligated to be responsible for any disputes arising from this item

本项目由键盘和 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 (which may lead to XSS issues, but TGTalk-FrontEnd derives its content from trusted user input, so TGTalk-FrontEnd will invert the marked.js-processed HTML tags), and it will be rendered properly 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

Usage the project(CDN)

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: "", // 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-->

Use your template

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>

Open Handlebars Helper

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

Name Way Effect
tagExtractor tagExtractor(text) Traverse and return tag in text
tagConverter tagConverter(text, renderTagList) Convert a tag to tags in tagList
contains contains(str, sub)
(contains text "Channel")		 Determine if str includes sub
not not(value)
(not (contains text "Channel"))		 Returns the opposite of a given value (true -> false / false -> true), can be used with #if
replaceImage replaceImage(originalLink)
{{ replaceImage this }}		 Overwrite Image Link(Telegram CDN only)
replaceTime replaceTime(timestamp)
{{replaceTime time}}		 Rewrite timestamp to local time
maskRender maskRender(text)
{{maskRender text}}		 Convert Telegram mask in text to plugin-heimu
add add(a, b) Add a to b (number type)

Chinese

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

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

但，你可以在说说中插入 HTML 标签（由此可能引申出 XSS 问题，但 TGTalk-FrontEnd 的内容来源于可信用户输入，因此 TGTalk-FrontEnd 会将 marked.js 处理后的 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: "", // 你部署的 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

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

名字 使用方法 效果
tagExtractor tagExtractor(text) 遍历并返回 text 中的 tag
tagConverter tagConverter(text, renderTagList) 转换 a 标签为 tagList 中的 tags
contains contains(str, sub)
(contains text "Channel")		 判断 某个字符串(str)中是否包括 特定字符串(sub)
not not(value)
(not (contains text "Channel"))		 返回给定值的相反值（true -> false / false -> true），可与 #if 连用
replaceImage replaceImage(originalLink)
{{ replaceImage this }}		 覆写图片链接（仅适用于 Telegram CDN）
replaceTime replaceTime(timestamp)
{{replaceTime time}}		 重写时间戳为本地时间
maskRender maskRender(text)
{{maskRender text}}		 转换文字中的 Telegram 遮罩为 plugin-heimu
add add(a, b) 将 a 与 b 相加（数字类型）

部署 API

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

进入 Cloudflare 仪表盘

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

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

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

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

image-20240323203711238

image-20240323203519290

image-20240323203802170

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