WithdewHua 959 words 2 minutes to read

本文最后更新于2019-05-23,若有失效或者错误内容请留言或者通过其他方式联系我,尽可能及时更新。


前言

看了 ZHUANGZHUANG 大佬弄了 Telegram 的即时预览之后,想给自己博客也弄一个,但是之前因为 <img> 标签的问题没有继续下去,当时也懒得看官方的文档,就一直搁浅了。不过最近 ZHUANGZHUANG 大佬告诉我他的评论区有解决办法了,我这才重新捡起来了。

参考教程

配置过程

创建模板

  1. 进入 Instant View 官网
  2. 登录自己的 Telegram 之后点击右下角的 My Templates
  3. 输入自己的域名后即可为其创建一个模板;
  4. 添加一篇自己的文章 URL,然后进入到规则编辑界面。

修改规则

我参照 Telegraph 和 官方手册修改后的规则如下:

# 设置版本号
~version: "2.1"

# debug
#@debug: //img[ends-with(@data-src, ".png")]

# 1.设置可以使用IV的文章
# 由于我文章 URL 的命名是带有日期的,所以利用正则匹配下,以下规则只对该路径下的文章有效
?path: /\d+/.+

# 2.设置文章主体、标题、作者等信息
# body 为文章主体,我设置为原网页中第一个`<acrticle>`下的内容
body: (//article)[1]  
$header: $body//header
# 设置文章标题
title: $header//h1
# 设置文章作者和作者链接
# 根据自己网站上文章作者所在的标签设置
author: $header//div[@class="meta"]/span[@class="author"]
# 设置作者链接,设置为以 author 名为 Telegram username 的链接
@set_attr(href,"https://t.me/",$author): $author
author_url: $author/@href
# 设置站点名字
site_name: "方寸间"
# 频道信息
channel: "@FunCunJ"
# 设置发布日期
published_date: $header//div[@class="meta"]/time/@datetime

# 3.处理文章图片
# 删除无效图片
@remove: $body//a//img[@data-src="//"]
# 将`<a>`和`<p>`标签下的`<img>`标签替换为`<figure>`,使子标签下的 <img> 正常显示
@replace_tag(<figure>): //a[.//img]
@replace_tag(<figure>): //p[.//img]
# 设置 <img> 标签的属性 src=data-src,这是因为我博客里面的图片时懒加载,没有实际的 src 属性
# 所以设置一个新属性 src,属性值与 data-src 相同
@set_attr(src,@data-src): $body//img

# 4.处理背景
# 如果存在`$body//figure[@class="image featured"]//img`,那么设置其为 cover
@if( $body//figure[@class="image featured"]//img ) {
  cover: $body//figure[.//img]
}
# 设置链接预览时显示的图片,依次查询
image_url: $cover/self::img/@src
image_url: $cover/self::figure//img/@src
image_url: //head/meta[@property="og:image"]/@content


# 5.cleanup
# 去除原文章中 `<header>` 和 `<footer>` 标签内容
@remove: //article/header
@remove: //article/footer
# 删除 `<noscript>` 标签内容,同样是因为图片懒加载引入的
@remove: //noscript
# 去除目录
@remove: $body//div[@class="toc"]

获取即时预览链接

创建好规则之后,点击右上角的 TRACKING CHANGESVIEW IN TELEGRAM 即可从 URL 中找到自己的 rhash,之后可以根据t.me/iv?url=...&rhash=...获取文章的即时预览链接。

例如,https://t.me/iv?url=[文章 URL]/&rhash=5efa36f09a006f即是我的文章的即时预览链接。

最终效果

  1. Link Preview 效果如图:
    8ccc3e4e4cbf3d53c9623aa0dbfd6eda.jpg

  2. 文章内效果如图: