zblog主题添加熊掌号粉丝关注功能zblog粉丝关注熊掌号改造怎么添加熊掌号
百度的熊掌号出来也有一段时间了，本站也是再早期就已经开通了熊掌号、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>
然后保存，覆盖源文件[清空缓存并重新编译模板]，这样就大功告成了。快去文章页看看吧
本站附件分享，如附件失效，可以去找找看
诚通网盘附件、百度网盘附件
PS：由于百度网盘附件太大，所以百度网盘附件为拆分压缩，全部下载后打开zip后缀文件即可。也可以只下载zip后缀文件查看（只可以查看不能解压）是否有需要的文件，再下载全部文件解压需要的文件
干饭福利分享： 微信扫码领取“饿了么”抵用券↓↓↓↓↓↓↓↓↓↓