今天看到Telegram的Instant View功能向所有网站开放了。通过一系列自定义的规则（每个人都可以为任何网站创建）就能给某个网站启用Instant View功能。当然考虑到安全性，有以下一些限制：
- Instant View内容会在Telegram服务器上处理和保存
- 并不是直接发链接就能看到Instant View功能的；Telegram会给
(你的规则, URL) 的二元组生成一个rhash，发送链接时需要发送带有你的rhash的跳转链接才能看到Instant View按钮（如图）
- 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> 为预格式化文本类型（否则里面的空格会被合并，回车会被去除），就大功告成啦。
完整的规则如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
# WordPress 文章页面才有评论区，所以用评论区的存在与否判定是否为文章页 # 如果是则启用 Instant View 规则 ?exists: //div[@id="comments"] # 找到标题 title!: //div[@class="entry-header"]//h1 # 作者 author!!: "James Swineson" # 找到文章部分 body!: //div[@class="entry-content"] # 删掉 Crayon 代码高亮插件生成的 <table> @remove: //table[@class="crayon-table"] @remove: //div[@class="crayon-toolbar"] @remove: //td[has-class("crayon-nums")] # 把 Crayon 插件复制粘贴所使用的 <textview> 区域内容提取出来，增加等宽文本样式（把 tag 替换成 <code>） @replace_tag(<code>): //textarea[has-class("crayon-plain")] # 保留所有 <code> 中的空行 @pre: //code # 删除文章末尾 Jetpack 增加的点赞功能 @remove: //div[has-class("sharedaddy")] |
点击此处将本文分享到Telegram以查看本文在Instant View下的效果。