给博客增加Telegram的Instant View支持

今天看到Telegram的Instant View功能向所有网站开放了。通过一系列自定义的规则(每个人都可以为任何网站创建)就能给某个网站启用Instant View功能。当然考虑到安全性,有以下一些限制:

  • Instant View内容会在Telegram服务器上处理和保存
  • 并不是直接发链接就能看到Instant View功能的;Telegram会给 (你的规则, URL) 的二元组生成一个rhash,发送链接时需要发送带有你的rhash的跳转链接才能看到Instant View按钮(如图)a comparison of telegram instant view enabled links and normal links
  • rhash是要手工去Telegram后台创建的,不会自动生成
  • 如果文章改变或者规则改变,需要去Telegram后台手工reload每个受影响的网页,然后mark as checked才能生效(并且之前已经收到过该页链接的客户端缓存不一定会刷新)
  • 部分元素如 <table> 暂时不被支持
  • 代码高亮暂时不被支持,据说之后会有

如何写一个规则

首先在这里登录,输入你网站的任何一篇文章的URL,按回车,然后就可以参考文档开始撰写规则了。首先你要写一行判断对该页面是否启用Instant View功能的判断规则(例如,对文章页面启用,对文章列表则不启用),然后用xpath和正则表达式把文章区域提取出来,对其中部分元素做一些简单的修改即可。

以本站为例:

标题

title!: //div[@class="entry-header"]//h1 一行xpath查找规则解决问题。

作者

我这边偷懒,直接把作者hard code进规则里: author!!: "James Swineson" 。

文章

内容的提取也只需要一行xpath: body!: //div[@class="entry-content"] 。但是代码区域成为了一个大问题。Crayon代码高亮插件在渲染时把代码写在Instant View尚不支持的 <table> tag内,导致默认规则下Instant View会报错。所幸Telegram提供了一系列函数用来修改提取出来的文章内容,先用 @remove 函数删除 <table> 部分,然后用 @replace 函数把Crayon插件用来支持复制粘贴功能的 <textview> (里面有完整的代码区内容)转换成 <code> ,再声明 <code> 为预格式化文本类型(否则里面的空格会被合并,回车会被去除),就大功告成啦。

完整的规则如下:

点击此处将本文分享到Telegram以查看本文在Instant View下的效果。

发表评论