本文最后更新于 2024-07-30，

若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益， 请联系我 删除。

本站只有Telegram群组为唯一交流群组， 点击加入

文章内容有误？申请成为本站文章修订者或作者？ 向站长提出申请

这个项目用于将电报（或任何兼容的）频道数据显示为交互式网页的前端。

项目地址：https://github.com/one-among-us/tg-blog

数据格式在models.ts中指定，可以使用TelegramBackup生成。

RSS机器人推送消息到指定频道：https://poiblog.com/archives/OuaXMD4C

Telegram备份

先备份telegram频道的数据

项目地址：https://github.com/one-among-us/TelegramBackup?tab=readme-ov-file

用法

安装

首先，安装 Python >= 3.11。然后，运行 pip install tgc

然后，为了支持视频/动画/贴纸转换，您必须安装以下非 Python 依赖项：

  1. 安装 Node 19.2 和 yarn 1.22
  2. yarn global add puppeteer-lottie-cli
  3. ffmpeg使用系统包管理器安装

模式一：转换电报导出

如果只需要一次性导出，则可以使用模式 1。为此，首先需要使用tdesktop导出一个频道。

要将导出文件转换为tg-blog支持的格式，您可以运行 tgce <export path>

模式二：使用 MTProto API 爬取频道

如果您有权限向频道添加机器人账户，或邀请自机器人账户，则可以使用 MTProto 爬虫进行自动增量导出更新。（请不要登录您自己的 Telegram 帐户进行抓取，因为很有可能被误归类为垃圾邮件并被禁止）

使用这种方式可以自动增量更新通道备份，信息会更完整，但设置起来比方式一更困难。

设置 API 密钥

  1. 获取 api_id并 api_hash创建你的 Telegram 应用程序（官方指南）
    1. 登录https://my.telegram.org/apps
    2. 填写表格以创建申请
    3. 或者，如果您为了方便而想要违反 Telegram 的 EULA，您可以将其留空以使用 Telegram 官方客户端的 API 哈希，风险自负。
  2. 选择登录的账户类型：
    1. 机器人账户：使用@BotFather机器人创建机器人。
    2. 自助机器人帐户：留空 bot_token，它会提示您登录。您只应在您不是频道管理员时使用自助机器人（因为邀请机器人需要管理员权限）。
  3. 填写 token ~/.config/tgc/config.toml 如果没有文件，请先创建对应文件夹和文件
# Telegram API id & hash
api_id = 10000000
api_hash = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

# Telegram bot token (leave blank to log into self-bot account)
bot_token = "0000000000:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
TOML

设置完密钥后，就可以进行频道设置了：

设置要抓取的渠道

  1. 邀请你的机器人加入频道，或使用你自己的机器人账户加入频道（必须）
  2. 将频道消息转发给@RawDataBot以获取频道 ID。（您将看到 JSON 响应，并可以从字段中找到 ID forward_from_chat）
  3. 填写频道信息，~/.config/tgc/config.toml如下图所示
# One export entry in a list of exports
[[exports]]
chat_id = -1001191767119    # Telegram channel chat id
path = "exports/hykilp"     # Output Path
TOML

所有设置完成后，您就可以继续运行爬虫了。

运行爬虫

只需运行 tgc命令即可。

附加配置

您可以为每个导出条目设置附加配置，如下所示：

参数 描述 类型
size_limit_mb 限制下载文件大小（跳过大文件） 浮动

RSS 提要生成

如果您想生成RSS feed，您可以在导出条目下添加以下内容：

[[exports]]
chat_id = -1001191767119    # Telegram channel chat id
path = "exports/hykilp"     # Output Path

[exports.rss]
title = "小桂桂的回忆录 📒"
link = "https://aza.moe/life"
description = "「我们所经历的每个平凡的日常，也许就是连续发生的奇迹」"
language = "zh-cn"
image_url = "https://aza.moe/meru_256px.png"
TOML

使用 GitHub Actions 自动更新

如果您想使用 GitHub Actions 自动备份/同步电报频道数据，您可以这样做。

  1. 创建您的 config.toml
  2. Fork https://github.com/hykilpikonna/blog-data
  3. 在 GitHub 的“设置”选项卡中，创建一个名为的Secret TGC_CONFIG，并将您的粘贴 config.toml那里。
  4. 请记住将 a 设置 size_limit_mb为 100 以下，这样 git lfs 就不会因推送大文件而发出警告。

支持状态

功能支持

  • 所有文本格式（包括剧透）
  • @用户名，#标签
  • 转发自、回复至（可点击）
  • 地图！（位置共享）
  • 民意调查（仅显示结果，无法投票）
  • 联系方式
  • 搜索、标签搜索

媒体支持

  • 贴纸、动画贴纸 (webm 和 tgs)
  • 自定义表情符号、动画自定义表情符号
  • 视频、gif 动画
  • 文件
  • 音频、语音信息（包括音频播放器）
  • 媒体团体
  • 图像查看和平铺
  • 媒体剧透（图片、视频、gif）

前端安装

在纯 HTML 中使用

你可以在纯 HTML 中使用它，无需现代 Web 构建工具：

<html lang="en">
<head>
  <title>My Blog</title>

  <!-- Import Libraries -->
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/tg-blog"></script>
  <link rel="stylesheet" href="https://unpkg.com/tg-blog/dist/style.css">

  <!-- Styles -->
  <style>
      body { font-family: Avenir, Helvetica, Arial, sans-serif }
  </style>
</head>
<body>
  <!-- Template setup (Paste your data url here) -->
  <div id="app">
    <tg-blog posts-url="https://profile-api.hydev.org/exports/hykilp/posts.json"></tg-blog>
  </div>

  <!-- Vue js setup -->
  <script>
    Vue.createApp().component("tg-blog", TgBlog.TgBlog).mount('#app')
  </script>
</body>
</html>
HTML

在 Hexo 博客中使用

举例源代码

根据主题的 CSS，可能需要进行一些修改才能正常工作。例如，Icalm 主题需要进行这些修改。

但是，您可以按照以下格式将页面添加为 markdown：

---
title: 'Telegram Blog'
date: 2023-01-13
---

{% raw %}

<!-- Import Libraries -->
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/tg-blog"></script>
<link rel="stylesheet" href="https://unpkg.com/tg-blog/dist/style.css">

<!-- Styles & Patches -->
<style>
    #tg-blog-app { font-family: Avenir, Helvetica, Arial, sans-serif }

    /* Icalm Fix: Override img max-width: 100% set in layout.styl */
    #tg-blog-app img { max-width: unset; }

    /* Icalm Fix: overflow-x: hidden breaks infinite scroll */
    .container { overflow-x: unset !important; }
    body { overflow-x: unset !important; }
</style>

<!-- Template setup (Paste your data url here) -->
<div id="tg-blog-app">
    <tg-blog posts-url="YOUR-POSTS-URL-HERE!"></tg-blog>
</div>

<!-- Vue js setup -->
<script>
const app = Vue.createApp().component("tg-blog", TgBlog.TgBlog)
app.mount('#tg-blog-app')

// Hexo patch: Destroy app when page switched
const interval = setInterval(() => {
    if (!document.getElementById('tg-blog-app')) 
    {
        app.unmount()
        clearInterval(interval)
    }
}, 1000)
</script>

{% endraw %}
XML

在 Vite 中使用

您还可以使用 vite 等现代构建工具将其导入到您的项目中：

1.安装依赖项

yarn add tg-blog
C#

2. 在 main.ts

import {createApp, h} from 'vue'
import App from './App.vue'
// Add this:
import 'tg-blog/dist/style.css'
TypeScript

3. 在您的 中 vite.config.ts，您应配置重复数据删除 vue

export default defineConfig({
  resolve: {
    dedupe: ['vue'],
  },
});
TypeScript

4. 导入组件

import { TgBlog } from 'tg-blog';

// If you're using Vue-TS Class Component, then add this:
@Options({components: { TgBlog }})
export default class ...
TypeScript

组件

博客

您只需指定一个选项：posts-url，它应该指向 posts.json您的博客数据。

您可以 posts.json使用TelegramBackup生成

<tg-blog posts-url="https://profile-api.hydev.org/exports/hykilp/posts.json"></tg-blog>
XML

选项

选项 描述
posts-url 指向您的博客数据 posts.json文件的 HTTP 链接

图像查看器（内部）

如果您只想要图像查看器功能，您可以导入此模块。

效果

页面：https://poiblog.com/an-zhong-guan-cha

1722228424328.webp