English | 中文（简体）
-
Deploy API
- Refer to API Deployment
-
Deploy Frontend
-
Use CDN to deploy the project
-
Include the stylesheet and Vue.js
-
Add a container in the HTML for displaying content
-
Include and initialize
tgTalker
-
-
Example Code
<html> <head> <!-- Stylesheet --> <link rel="stylesheet" href="https://registry.npmmirror.com/@floatsheep/tg-talker/latest/files/dist/style.css" /> </head> <body> ... <!-- Container for displaying content --> <div id="talk-container"></div> <!-- Explicitly include Vue.js --> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src="https://registry.npmmirror.com/@floatsheep/tg-talker/latest/files/dist/tgTalker.umd.js"></script> <script> const talker = new tgTalker({ serverUrl: "https://dev-tgtalk.floatsheep.workers.dev", // API selector: "#talk-container", // Container for displaying content zoom: true, // Enable image zoom }); talker.init(); // Inject talker into the container </script> </body> </html>
-
Configuration
This branch stores development files using new tools. It is not recommended for production use.
This project is a refactored version of TGTalk-Frontend using Vue.js and Vite. The umd format file size is reduced by approximately 54% compared to v1.
In
TGTalk-Frontendv2, Markdown rendering is no longer supported because Telegram renders Markdown by default, but this project handles some special Telegram tags.Custom templates are no longer supported in
TGTalk-Frontendv2. If needed, you can clone this project for customization.
-
Deploy the API
- Refer to API Deployment
-
Deploy the Frontend
-
Use CDN to deploy the project
-
Include the stylesheet and Vue.js
-
Add a container in the HTML for displaying content
-
Include and initialize
tgTalker
-
-
Example Code
<html> <head> <!-- Stylesheet --> <link rel="stylesheet" href="https://registry.npmmirror.com/@floatsheep/tg-talker/latest/files/dist/style.css" /> </head> <body> ... <!-- Container for displaying content --> <div id="talk-container"></div> <!-- Explicitly include Vue.js --> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src="https://registry.npmmirror.com/@floatsheep/tg-talker/latest/files/dist/tgTalker.umd.js"></script> <script> const talker = new tgTalker({ serverUrl: "https://dev-tgtalk.floatsheep.workers.dev", // API selector: "#talk-container", // Container for displaying content zoom: true, // Enable image zoom }); talker.init(); // Inject talker into the container </script> </body> </html>
-
Configuration
-
Frontend Framework: Vue.js
-
Build Tool: Vite
-
Lazy Loading: vue3-lazy
-
GitHub-like Reactions: emaction
- Converted to Vue SFC for compatibility
-
Image Zoom: v-viewer
-
Backend API: Modified version of TGTalk-worker.js based on ChenYFan's work