规则之树

typecho实现QQ卡片链接,教程案例

昨晚上在typecho交流群讨论过的问题,就是如何让发到群里的网址自动显示卡片的形式,而不通过浏览器或者其它接口的分享。实现的方法其实不算难,主要是页面头部的meta申明,按道理一般的模板开发者都会的,不过鉴于还是新手太多,所以整理一篇教程也没什么关系(最近没什么东西好写)。值得注意的是,配置好了也不一定会立即生效,QQ存在缓存,可能要过一两天,另外部分网址,比如存在加载不出的超时链接,或者域名存在问题的,也不会显示。

代码如下,加入全局头部模板head标签内部:

<meta property="og:image" <?php if($this->is('post')||$this->is('page')): ?>
content="<?php showThumbnail($this,0); ?>"<?php else: ?>
<?php if ($this->options->logoUrl){ ?>content="<?php $this->options->logoUrl();?>"<?php }else{ ?>content="<?php $this->options->siteUrl(); ?>logo.jpg"<?php };?><?php endif; ?>>
<meta property="og:title" content="<?php $this->archiveTitle(array(
'category'=>_t('%s '),
'search'=>_t('包含关键字 %s 的文章'),
'tag' =>_t('标签 %s 下的文章'),
'author'=>_t('%s 的主页')
), '', ' - '); ?><?php $this->options->title(); ?>"/>
<meta property="og:description" content="<?php $this->options->description(); ?>">  
<meta property="og:url" content="<?php $this->permalink() ?>"/>  
<meta itemprop="name" content="<?php $this->archiveTitle(array(
'category'=>_t('%s '),
'search'=>_t('包含关键字 %s 的文章'),
'tag' =>_t('标签 %s 下的文章'),
'author'=>_t('%s 的主页')
), '', ' - '); ?><?php $this->options->title(); ?>">
<meta itemprop="description" content="<?php $this->options->description(); ?>">
<meta itemprop="image" <?php if($this->is('post')||$this->is('page')): ?>
content="<?php showThumbnail($this,0); ?>"<?php else: ?>
<?php if ($this->options->logoUrl){ ?>content="<?php $this->options->logoUrl();?>"<?php }else{ ?>content="<?php $this->options->siteUrl(); ?>logo.jpg"<?php };?><?php endif; ?>>

昨晚上有人提出了疑问,所以我慢慢的解释

1.关于图片的问题

<meta property="og:image" <?php if($this->is('post')||$this->is('page')): ?>
    content="<?php showThumbnail($this,0); ?>"<?php else: ?>
    <?php if ($this->options->logoUrl){ ?>content="<?php $this->options->logoUrl();?>"<?php }else{ ?>content="<?php $this->options->siteUrl(); ?>logo.jpg"<?php };?><?php endif; ?>>

以上代码og:image,代表你想要在卡片中显示的图片,我这里是对typecho的页面进行判断,如果是文章页和独立页面,则调用第一张设置的图片,而首页则调用logo,如果模板没在设置中定义logo,则调用在根目录的logo.jpg文件。但是存在问题的是以下代码。

<?php showThumbnail($this,0); ?>

这句代码是我写在function.php的方法,为调用文章的第一个图片附件,而不同的模板可能是不同的方法,所以如果要用,请将这一句改成自己所使用模板的缩略图调用方法,如果没有缩略图功能,可以参考typecho调用多张缩略图,非插件实现
相应的,最后一句itemprop="image"也是相同的含义。

2.关于标题的问题

<meta property="og:title" content="<?php $this->archiveTitle(array(
    'category'=>_t('%s '),
    'search'=>_t('包含关键字 %s 的文章'),
    'tag' =>_t('标签 %s 下的文章'),
    'author'=>_t('%s 的主页')
    ), '', ' - '); ?><?php $this->options->title(); ?>"/>

这句代码调用了不同页面的标题,根据typecho自带的判断,一般来说自己的模板都会在title有这类写法,所以直接参考那里的将这些判断修改即可。注意需要和网站本身的命名方式相同最好。

最后一些说明

1.这样的申明对部分搜索引擎也有效,比如360和搜狗,


2.在QQ里面如果没有显示效果,优先应该检查网站内是否有长时间无法加载的外部链接比如图片,css,js等。如果仍然不显示,那就是缓存,等待一段时间,如果还不行,那就是人品问题了。

【规则之树版权所有,转载注明来源】

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »