百度的熊掌号出来也有一段时间了，本站也是再早期就已经开通了熊掌号、mip站点和粉丝关注代码了。效果还是非常不错的。很多小伙伴问我怎么添加熊掌号的粉丝关注功能，今天就来具体说下zblog在模版内添加熊掌号粉丝关注功能。其实也是非常简单的和前端时间写的一篇关于添加熊掌号的一篇文章非常相似可以参考下《Zblog博客不用插件手动添加支持熊掌号代码,支持提交文章第一张图片》
首先先看下百度官方的添加熊掌号粉丝关注介绍如下
添加熊掌号ID声明
<script src="https://xiongzhang.baidu.com/sdk/c.js?appid=XXXXXXXXXXXX"></script>熊掌号ID点击这里查看：https://ziyuan.baidu.com/xzh/home/index然后点击粉丝关注即可查看
在页面</head>标签前添加代码
注意：appid为熊掌号唯一ID，请勿做任何修改，否则无法正常展现。
添加关注功能代码（强烈推荐）
添加需要展现的bar(只允许添加2个，后期会审核)
吸顶bar
<script>cambrian.render('head')</script>
在页面<body>标签后添加代码
文章段落间bar
<script>cambrian.render('body')</script>
在页面段落之间添加代码
底部bar
<script>cambrian.render('tail')</script>
在页面文章结束位置添加代码
注意：上述三种bar在样式上没有 预留左右边距，若页面自身没有设置边距，建议按照如下方法使用。 其中padding-left、padding-right为边距属性，可按需修改。
选择类型：
吸顶bar
<div style="padding-left: 17px; padding-right: 17px;">
<script>cambrian.render('head')</script>
</div>
上面的百度官方介绍其实已经说的非常清楚了，首先确定要添加那种效果，是吸顶、还是在文章内和在文章结尾显示，
这里就那文章底部举例，如下面百度官方说的首先引用JS找到zblog当前使用的主题文件夹找到single.php文件直接在</head>标签前面添加<script src="https://xiongzhang.baidu.com/sdk/c.js?appid=XXXXXXXXXXXX"></script>即可
如果文件内是下面这样的形式
<!DOCTYPE html>
<html>
<head>
{template:header}//这是说明引用文件内的header.php文件
</head>
<body>
那么就打开header.php文件在
{if $type=='article'}//这个判断说明是只在文章也显示下面的代码
<link rel="canonical" href="{$article.Url}" />
<title>{$title}-{$name}</title>
<meta name="keywords" content="{foreach $article.Tags as $tag}{$tag.Name},{/foreach}{$name}" />
<meta name="description" content="{php}$description = preg_replace('/[\r\n\s]+/', '', trim(SubStrUTF8(TransferHTML($article->Content,'[nohtml]'),130)));{/php}{$description}" />
<script src="https://xiongzhang.baidu.com/sdk/c.js?appid=XXXXXXXXXXXX"></script>//JS文件在这里引用
<script type="application/ld+json">
{
"@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
"@id": "{$article.Url}",
"appid": "XXXXXXXX",
"title": "{$article.Title}",
"images": ["{php}$pattern="/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png]))[\'|\"].*?[\/]?>/";$content = $article->Content;preg_match_all($pattern,$content,$matchContent);echo $matchContent[1][0];{/php}"],
"pubDate": "{$article.Time('Y-m-d')}T{$article.Time('H:i:s')}"
}
</script>
{else}//如果不是文章页就显示下面代码
<title>{$title}-{$name}</title>
<meta name="Keywords" content="{$name}">
<meta name="description" content="{php}$description = preg_replace('/[\r\n\s]+/', '', trim(SubStrUTF8(TransferHTML($article->Content,'[nohtml]'),130)));{/php}{$description}">
{/if}
上面的代码也可以自动手动添加实现不用插件添加熊掌号支持图片显示的，上面说到的文章就是这样实现的。
这样JS文件就引用成功了。再然后在single.php文件内找到下面这样的代码
{if $article.Type==ZC_POST_TYPE_ARTICLE}
{template:post-single}//文章引用post-single.php文件
{else}
{template:post-page}页面引用post-page.php文件
{/if}
现在只需要打开post-single.php文件搜索
{$article.Content}
在{$article.Content}代码下面添加底部bar代码
<script>cambrian.render('tail')</script>
然后保存，覆盖源文件[清空缓存并重新编译模板]，这样就大功告成了。快去文章页看看吧
如无特殊说明，解压密码均为：aisoa.cn
您可能感兴趣的文章
- 值类型“@context”不正确错误，关闭百度熊掌号，谷歌站长平台Google Search Console无法解析的结构化数据
- zblog文章列表添加谷歌信息流广告非插件zblog首页代码添加谷歌信息流广告
- Zblog支持og标签,zblog添加og标签代码支持百度百度星火计划原创规范2.0
- Zblog博客不用插件添加代码支持og标签,zblog博客添加og标签代码
- zblog首页或分类添加谷歌信息流广告代码，zblog添加谷歌信息流广告方法
- 本文固定链接:https://aisoa.cn/post-2197.html
- 转载请注明:于爱搜路由发表
支付宝打赏
微信打赏