@floatsheep/tg-talker

v2.0.0-alpha2.5

Published

3 months ago

中文（简体）| [English](README.md)

Downloads

0High
0Medium
0Low

floatsheep

TGTalk-Frontend

中文（简体）| English

TL;DR

部署 API
- 参阅 API 部署
部署前端
- 使用 CDN 部署项目
- 引入样式文件和 Vue.js
- 在 HTML 中添加显示内容的容器
- 引入并初始化 tgTalker

示例代码

<html>
  <head>
    <!--样式文件-->
    <link
      rel="stylesheet"
      href="https://registry.npmmirror.com/@floatsheep/tg-talker/latest/files/dist/style.css"
    />
  </head>
  <body>
    ...
    <!--显示内容的容器-->
    <div id="talk-container"></div>
    <!--显式引用 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", // 显示内容的容器
        zoom: true, // 是否启用图片缩放
      });
      talker.init(); // 在容器中注入 talker
    </script>
  </body>
</html>

配置
- 详见：配置解析

关于分支

我会使用一些新的工具来构建这个项目，这个分支储存了开发文件，但是最好不在生产环境使用

关于项目

这是一个使用 Vue.js 和 Vite 重构的 TGTalk-Frontend

同时，本项目的 umd 格式文件打包体积与 v1 相比，减少了 ~54% 的包体积

在 TGTalk-Frontend v2 中，已不再提供 Markdown 的渲染支持
因为 Telegram 默认会渲染 Markdown，但本项目会处理一些 Telegram 的特殊标签

在 TGTalk-Frontend v2 中，已不再支持自定义模板
如有需要，可以克隆本项目进行自定义

如何使用

首先，你需要部署 API。

参阅 API 部署

第二，你需要在网站上部署前端

你可以使用 CDN 来部署这个项目

<html>
  <head>
    <!--样式文件-->
    <link
      rel="stylesheet"
      href="https://registry.npmmirror.com/@floatsheep/tg-talker/latest/files/dist/style.css"
    />
  </head>
  <body>
    ...
    <!--显示内容的容器-->
    <div id="talk-container"></div>
    <!--为了显着减少包大小，我们没有将 vue 打包，因此您需要显式引用它-->
    <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", // 显示内容的容器
        zoom: true, // 是否启用图片缩放
      });
      talker.init(); // 在容器中注入 talker
    </script>
  </body>
</html>

配置详见：配置解析

项目依赖

前端框架： Vue.js
构建工具： Vite
懒加载： vue3-lazy
类 GitHub 评价：emaction
- 由于 emaction 默认前端使用 Web Components 技术，考虑到兼容性问题，本项目中将其转换为 Vue SFC
  - 仅作转换并继承 bug
图片缩放：v-viewer
后端 API：在 ChenYFan 大佬基础上进行修改的 TGTalk-worker.js

Published

Vulnerabilities

Links

Maintainers

Keywords