让博客(typecho-handsome)的链接通过QQ发送时显示为卡片

我最开始是通过搜索typecho QQ卡片搜到一个教程,但他的方法只对他自己的主题有效,而我又找不到handsome调用文章的代码,不会魔改他的方法,因此只能将就的利用常见的方法来显示。
(教程已更新,新版方法可以动态获取文字内容和头图,旧方法已折叠)

旧版-所有文章只能显示相同的内容

编辑handsome的header.php文件,文件位置在:

/data/basic/sites/www.coldark.cn/www/usr/themes/handsome/component/

我是用的appnode,如果用其他的环境比如宝塔或者lnmp一键脚本请自行进入自己的文件夹内
编辑header.php.(网上说不手动添加代码就会抓取其它内容,但根据我的经验QQ压根不会抓取)
在<head>标签下面添加代码:

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

标题为网站标题,可以替换成你网站的名称。
图片即为你想要QQ卡片显示的图片链接,建议使用网站logo,大小合适。
描述就随便写一段话,瞎写都行。
写完后保存文件,接下来就是刷新缓存了。

有两种刷新方式:
第一种是常规的用

https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshareget_urlinfo?url=你的网址

例如我的:

https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshareget_urlinfo?url=https://www.coldark.cn

应该显示json代码,也就是你填的内容:
1.png
好处是高大上,坏处就是效率低,并且当显示一堆乱码的时候你会感觉是不是自己弄错了。
第二种就是用AE博客的强制刷新工具
这个工具是别人用易语言编写的,卡巴斯基虽然没报毒,但我也没源码,不能保证安全性,所以请在虚拟机内运行。
下载地址
我使用XML地址(也就是网站的网站地图“sitemap”)点击启动,返回关键词即为我设置的关键词。
不太一样的地方是我之前测试的时候QQ缓存,还没更新。
1-1.png
显示效果如下所示:
IMG_20191107_194340.jpg

QQ缓存基本上要一天时间生效,如果你刷新缓存并正常显示你的内容,但QQ卡片就是不显示,那就等一天,我是第二天才生效的。
还有这个卡片貌似只在手机QQ/手机TIM客户端生效,并且发送到的人看不到,只有接收到的人才能看到,建议双开个QQ测试

这种卡片对搜索引擎也有效果:
IMG_20191107_195011.jpg
但我的貌似只能在手机端搜索引擎才会这也显示,我猜是搜索引擎的缓存的原因。
处理的好的话可以让搜索引擎界面很整洁。

下面是使用新的方法,内容比较长,请仔细阅读,代码中的链接仅适合我的博客,请根据自己的博客链接进行替换

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

<!-- 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,图片我选择了网站logo(但是因为懒就没有动态获取),描述则直接输出博客描述,即:

<?php if($this->is('index')): ?>
<meta itemprop="image" content="https://pic.coldark.cn/images/2019/11/08/50x50.png">
<meta name="description" itemprop="description" content="<?php $this->options->description(); ?>">

如果你也需要相同的部署,请替换https://pic.coldark.cn/images/2019/11/08/50x50.png为你希望的首页展现图片地址。

第二种情况,当前页面是文章页,即$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://pic.coldark.cn/images/2019/11/08/50x50.png">
<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://pic.coldark.cn/images/2019/11/08/50x50.png">
<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://pic.coldark.cn/images/2019/11/08/50x50.png">
<meta name="description" itemprop="description" content="<?php $this->options->description(); ?>">
<?php endif; ?>
<!-- QQCard END -->

请替换https://pic.coldark.cn/images/2019/11/08/50x50.png为你希望的首页展现图片地址。

刷新缓存:
完成插入后,我们还需要验证配置是否有效并刷新QQ的缓存,这一步通常是通过访问https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshareget_urlinfo?url=欲检测的网址来完成,如果返回的jsonp数据中包括你设置的内容,表示设置有效且缓存已经刷新完毕。视情况可能需要多次刷新。
还有使用易语言编写的脚本,只不过这里使用ucw大佬编写的python3脚本
但前提是你的网站需要有一个sitemap.xml。脚本的内容如下:

#!/usr/bin/python3
import xml.etree.ElementTree as ET
import requests
xmldata=requests.get('https://www.coldark.cn/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://www.coldark.cn/sitemap.xml替换成你自己的网站地图

脚本运行情况如下所示:
py-1.png
(由于之前的缓存很难清除,所以大部分内容还是我之前的内容)


参考:
一个为handsome主题特化的QQ卡片解决方案
themes:is-syntax - Typecho Docs

最后修改:2019 年 12 月 03 日 03 : 55 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论