一个为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.phphead标记内即可,对于标题的获取,直接调用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
最后修改:2019 年 11 月 08 日 09 : 37 PM
欢迎投食喵 ~

发表评论 取消回复

3 条评论

  1. Janch

    我想知道你评论的默认头像怎么设置的,那个代码怎么填

  2. 蝉時雨

    首页卡片图片鼠标🖱跟踪效果不错~

    1. 无限UCW
      @蝉時雨

      哇~看来我调了半个下午的参数没有白费