[typecho教程]typecho如何实现QQ聊天窗口卡片样式显示连接教程

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

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

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

最后修改:2019 年 04 月 12 日 08 : 02 PM
南来北往的大爷们,可怜可怜我吧,赏几两碎银子吧!

1 条评论

  1. 寒夜方舟

    代码如下,加入全局头部模板head标签内部
    这个head标签内部在handsome设置自定义输出head 头部的HTML代码吗

发表评论