开启试验性telegram Instant View功能

发表于 2020-10-13 分类于日常阅读次数：

正如同我之前介绍过，Telegram的Instant View功能非常方便。为博客加入此功能可能招到更多阅览量。本文理论上适用于所有NEXT主题hexo博客进行参考。

学习并初步编写规则

首先所有的规则编写方式和样本在官网说道很清楚。下面的部分主要参考官网文档。

编辑器
根据文档可得，title和body是必须存在的。虽然可能已经智能生成，不过具体操作时仍要注意选取部分和效果。对于本hexo NEXT主题博客来说，title会自动生成。但body需要自行改改

1
2
3

~version: "2.1"
# 版本2.1
body:     //article

调试

不过一般仅仅这样是不够的，会出现各种问题，比如fancybox插件导致的”img标签出现在p里面”问题↓

1
2
3

 Element <img> is not supported in <p>: <img data-src="/images/HUAWEIpost0/%E6%B8%AF%E5%8C%BA%E5%8D%8E%E4%B8%BA%E8%8E%B7%E5%8F%96%E6%9D%83%E9%99%90.jpg" alt="港区华为获取权限" src="/images/HUAWEIpost0/%E6%B8%AF%E5%8C%BA%E5%8D%8E%E4%B8%BA%E8%8E%B7%E5%8F%96%E6%9D%83%E9%99%90.jpg"/>
 
An error has occurred while processing your template

为此，只需将所有包含img标签的p标签改成div即可。
查阅文档得出规则编辑器规则：<div>: $body//p/img/parent::p
这句规则的语法是：将冒号后面指定的标签（XPath语法）替换为div标签。

同理，其他类似错误也可以得到解决：

footer内出现不支持标签——把footer改成div: <div>: $body//footer
figure标签内不能出现table——把所有包含table的figure改成div: <div>: $body//figure/table/parent::figure

不过，对于智能化程度较高的next主题来说，telegram Instant View在处理中还可能遇到不支持img标签中data-src属性的问题。对此我们需要将data-src连同内容变成src

1	@set_attr(src, @data-src): //img

这里用到的set_attr函数可以在文档中查到使用方法

润色并发布使用

根据官方文档，除了必要的body和title意外还有下面这些属性可设置↓

属性	类型	描述
title Required	RichText	Page title
subtitle	RichText	Page subtitle
kicker	RichText	Kicker
author	String	Author name
author_url	Url	Author link
published_date	Unixtime	Date published
description	String	A short description (used in link preview)
image_url	Url	Link preview photo (used in link preview)
document_url	Url	Link preview document (used in link preview)
site_name	String	Name of website (used in link preview)
channel	String	The username of the article author's (or the originating website's) channel on Telegram in the format `@username`
cover	Media (Image/Video/Embed/Map)	Page cover
body Required	Article	Page content

对于本博客来说，当前设置了如下属性↓

site_name: "Alevel Blog"
# 本站名称
author!!: "admin"
# 作者
author_url: "https://blog.alevel.tech/about"
# 关于页
channel: "@InstantTechTips"
# telegram频道

藏起赞赏区域

由于赞赏区域的JavaScript无法被telegram实现，会导致3个二维码直接显示（效果不好），因此需要藏起来。经过实验，类似维基百科的实现效果最佳↓

赞赏

点击上面“赞赏”二字后出现包含二维码的下拉框。

为此，需要将赞赏区域HTML改为details和summary标签，如下↓

<details>: $body//div[has-class("reward-container")]
# 将赞赏区域div改成details
<summary>: $body//button[contains(concat(" ", normalize-space(@onclick), " "), "document.querySelector('.post-reward').classList.toggle('active');")]
# 精确定位“赞赏”按钮并将其变成summary以起到效果

这里summary的XPath语法稍难，不过对于next主题的hexo博客应该都生效。

~~实际上是上一文章和下一文章~~

文中出现可instant view链接都可以进行此操作↓

1 2	<related>: $body//div[has-class("post-nav-item")] # 将最下面两个页面内文章链接美化

后记

本站附属telegram频道
欢迎在留言区提出建议，包括美化建议和查漏补缺
并不是写好规则就能即时在手机端telegram看到效果。需要超过10篇文章可用规则并进行提交，可以使用试验性链接进行测试。

学习并初步编写规则

调试

润色并发布使用

藏起赞赏区域

相关文章

后记