适配 Telegram Instant View

Moe23333,Sun Aug 28 2022•dev

Update: ... 早已成功提交了模板，但 TG 似乎并没有应用咱适配好的模板，似乎 TG 商业化之后对即时预览等模块的内容越来越不关心了呢

某天心血来潮想要适配一下 Telegram 的即时预览 (Instant View) (opens in a new tab)，于是便去翻阅了官方文档，写了个模板进行适配。期间~~因为太笨了所以~~绕了很多弯路，于是便想要水写一篇文章记录一下适配过程。

Instant View 是什么？

~~不知道！（被打）~~ 呜呜，Telegram Instant View 就是 TG 的即时预览，平常在 Telegram 发送链接时，有的链接会带有“即时预览”的按钮，点开后可以在一个十分清爽、简洁的页面内浏览文章，仅包含网页的正文内容，没有广告、Cookies 提示等，也不存在跟踪器，无任何干扰，拥有绝佳的阅读体验。

说完了优点，再来说说缺点。Instant View 的不足之处有：

它不支持 WebP (opens in a new tab) 格式的图片！截至本文发布时，Instant View 尚不支持 WebP 格式图片。目前似乎是仅支持 JPG、PNG、GIF 这些最为经典的图片格式，而 AVIF 等现代图片格式自然也不支持了。这点在 TG 聊天中也有体现：发送 WebP 格式图片时，会发现 Telegram 将其识别为了贴纸——似乎是把它当作了贴纸的专属格式。
需要手动适配。尽管文档、示例模板已经十分详尽，但手动适配~~对咱这样的笨蛋来说~~依然不太容易。尤其是网页样式改变时可能需要重新编写模板进行适配。咱近日将本站使用的主题更到了最新版，于是原先的模板就不能用了，不得不重新适配一遍了。
模板需要提交审核，通过后才能使用。这倒不是什么问题，但审核最低要求得确保 10 个页面显示正常qwq，可咱博客的文章数量还不到 10 个啊quq... ~~所以咱要努力水文章（~~

如何适配 Instant View？

就跟着示例模板、跟着官方文档，对着自己的网站写一下模板就好了嘛！但由于它们都是英文，所以咱还是在这里写一下。

首先要去官网 (opens in a new tab)登录自己的 Telegram 账号，才能创建模板。创建新的模板后就可以将针对自己的网站适配的内容添加进去啦！

咱针对自己的网站适配的模板是这样的：

~version: "2.1"
?path: /posts/.+
body: //article
title: $body//h1
moe: /html/head/meta
author: $moe[@property="author"]
channel: @Moe23333
published_date: //time
@split_parent: //p/img
@split_parent: //blockquote/img
@remove: //div[has-class("nx-flex")]
@remove: //small[contains(@style,"margin-top")]
@remove: //img[ends-with(@src, ".svg")]

那么咱就用自己写的模板来逐行解读一下：

~version，Instant View 版本。直接无脑使用最新版就好了啦！截至本文发布时，最新版本是 2.1，所以在模板的开头写 ~version: "2.1"。
?path，Instant View 所覆盖的路径。TG 规定即时预览只能包含文章等，而咱的文章都在 /posts/ 路径下，所以加上一行 ?path: /posts/.+。
body，文章正文。一般它会位于 <article> 标签下，咱的页面也不例外，所以写上 body: //article，这同时也能作为一个可复用的变量。
title，标题。一般为 <article> 下的 <h1>，所以用 title: $body//h1 即可。
author，文章作者。咱在这里先为 <meta> 标签指定了个变量叫 moe（嗯咳咳，其实变量取什么名字都可以的啦，逃），然后用 author: $moe[@property="author"] 获取 <meta> 标签里的作者属性。
(可选) channel，作者的 Telegram 频道，这应该不用解释啦~ 可以填也可以不填，填了就会在即时预览的文章顶部显示你的频道！
published_date，文章发布时间。由于咱的博客主题刚好有个 <time> 元素，直接用就好啦~ 写上 published_date: //time。
@split_parent，这个主要是将主标签与次级标签脱离开来。咱在检查转载来的 RSS 那篇文章时发现 Telegram 很奇怪地提示 Element <img> is not supported in <p>（另一个 blockquote 也有类似的提示），于是搜了下得知加上这个即可解决。
@remove，这个应该很好理解，就是移除内容中不需要的部分，比如咱的网站需要移除：标签栏、页脚、以及 Telegram 不支持的 SVG 图片，分别对应以上 3 行的内容。

好啦，这样就适配完了喵~

可惜咱提交上去的模板还没有审核通过。但值得庆幸的是，Telegram 依然提供了一个用于测试的 Instant View 链接：可以将 https://t.me/iv?url=https%3A%2F%2Fmoe23333.vercel.app%2Fposts%2Ftelegram-instant-view&rhash=b065e4cf24933b (opens in a new tab) 整个链接复制到 Telegram 里，发送后可直接查看咱适配好的即时预览效果！喵呜~

推荐使用 Firefox 来浏览本站Privacy Policy