一个为handsome主题特化的QQ卡片解决方案

这几天看到了一个QQ卡片的简单解决方案，于是决定稍作适配后在博客上部署。所谓QQ卡片，即使用QQ发送链接时显示为卡片，但实际测试这个方案有效性玄学，我部署它仅仅是出于心理安慰目的，所以这篇文章的重点是handsome下博客相关信息的获取。

解决方案

首先我们看一下这段声明的格式：

<!-- QQCard BEGIN -->
<meta itemprop="name" content="标题">
<meta itemprop="image" content="图片">
<meta name="description" itemprop="description" content="描述">
<!-- QQCard END -->

meta标签直接插入component/header.php的head标记内即可，对于标题的获取，直接调用libs/Content.php中的方法Content::echoTitle($this,$this->options->title,$this->_currentPage);即可；而对于图片和描述，我们分情况讨论：

第一种情况，当前页面为首页，即$this->is('index')==true，图片我选择了首页个人头像[heimu]（但是因为懒就没有动态获取）[/heimu]，描述则直接输出博客描述，即：

<?php if($this->is('index')): ?>
<meta itemprop="image" content="https://res.ucw.moe/misaka_a.jpg">
<meta name="description" itemprop="description" content="<?php $this->options->description(); ?>">

如果你也需要相同的部署，请替换https://res.ucw.moe/misaka_a.jpg为你希望的首页展现图片地址。

第二种情况，当前页面是文章页，即$this->is('post')==true，我认为此时应该输出该文章的头图和对应的文章摘要，这部分参考主题写法和libs/Content.php中的内容很快可以得到。这里我使用Content::returnHeaderImgSrc($this,'post',0,true);来获取头图的URL；使用Content::excerpt(trim($this->fields->customSummary)!=''?$this->fields->customSummary:$this->excerpt,200);来获取摘要，我截取了200字，但事实上QQ也会进行一次截取，长度大概更短，所以截取的字数基本上是无关紧要的。这部分的代码如下：

<?php elseif($this->is('post')): ?>
<meta itemprop="image" content="<?php echo Content::returnHeaderImgSrc($this,'post',0,true); ?>">
<meta name="description" itemprop="description" content="<?php echo Content::excerpt(trim($this->fields->customSummary)!=''?$this->fields->customSummary:$this->excerpt,200); ?>">

我没有扩展更多的情况，对于我来说，这两种情况够用了，我设置的其他情况规则与首页规则相同，但是为了方便以后的扩展我还是将两者分开书写。如果你有更多需求，可以自行扩展，扩展时对页面类型的判断方法可以参考神奇的is语法。

<?php else: ?>
<meta itemprop="image" content="https://res.ucw.moe/misaka_a.jpg">
<meta name="description" itemprop="description" content="<?php $this->options->description(); ?>">
<?php endif; ?>

那么最终我们的完整代码就是这样：

<!-- QQCard BEGIN -->
<meta itemprop="name" content="<?php Content::echoTitle($this,$this->options->title,$this->_currentPage); ?>">
<?php if($this->is('index')): ?>
<meta itemprop="image" content="https://res.ucw.moe/misaka_a.jpg">
<meta name="description" itemprop="description" content="<?php $this->options->description(); ?>">
<?php elseif($this->is('post')): ?>
<meta itemprop="image" content="<?php echo Content::returnHeaderImgSrc($this,'post',0,true); ?>">
<meta name="description" itemprop="description" content="<?php echo Content::excerpt(trim($this->fields->customSummary)!=''?$this->fields->customSummary:$this->excerpt,200); ?>">
<?php else: ?>
<meta itemprop="image" content="https://res.ucw.moe/misaka_a.jpg">
<meta name="description" itemprop="description" content="<?php $this->options->description(); ?>">
<?php endif; ?>
<!-- QQCard END -->

刷新缓存

完成插入后，我们还需要验证配置是否有效并刷新QQ的缓存，这一步通过访问https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshareget_urlinfo?url=欲检测的网址来完成，如果返回的jsonp数据中包括你设置的内容，表示设置有效且缓存已经刷新完毕。视情况可能需要多次刷新。

为简化批量操作，我编写了一个Python脚本来进行这个操作，但前提是你的网站需要有一个sitemap.xml。脚本的内容如下：

#!/usr/bin/python3
import xml.etree.ElementTree as ET
import requests
xmldata=requests.get('https://ucw.moe/sitemap.xml')
root=ET.fromstring(xmldata.text)
for url in root:
    print(requests.get('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshareget_urlinfo?url=%s'%url[0].text).text)

将其中的https://ucw.moe/sitemap.xml替换为你网站的sitemap.xml地址即可。

参考

1. 让博客（typecho-handsome）的链接通过QQ发送时显示为卡片 - 方舟基地
2. themes:is-syntax - Typecho Docs

版权声明：本文是原创文章，版权归 无限UCW 所有。

本文链接：https://ucw.moe/archives/typecho-handsome-qq-card.html

本站所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由地转载和修改，但请务必注明文章来源并且不可用于商业目的。