在自己网站添加通用的三种熊掌号bar展现改造方式

熊掌ID—查看bar提供了三种样式类型供选择,分别为吸顶Bar、段落间Bar、底部Bar,请在页面HTML代码的<body>标签内,需要出Bar的位置,嵌入代码。

 

吸顶Bar

在页面<body>标签后添加代码

<script>

 

cambrian.bar({

 

data: {

 

type: ‘head’

 

}

 

});

 

</script>

 

效果示例:

文章段落间Bar

在页面段落之间添加代码

script>

 

cambrian.bar({

 

data: {

 

type: ‘body’

 

}

 

});

 

</script>

 

 

效果示例:

底部Bar

在页面文章结束位置添加代码

<script>

 

cambrian.bar({

 

data: {

 

type: ‘tail’

 

}

 

});

 

</script>

 

效果示例:

注意事项

当按照上述方式使用时,Bar将使用同步渲染,如果必须使用异步渲染,可以在JS代码onload后调用接口,指定Bar的渲染位置,以吸顶Bar为例:

cambrian.bar({

 

data: {

 

type: ‘head’,

 

anchor: document.getElementById(‘xxxx’) // HTMLElement,将在该元素前渲染bar

 

}

 

});

 

在百度APP v10.3.0版本及以上、 简单搜索 v2.4.0版本及以上,贴在页面顶部的Bar将被屏蔽,改为出端的Bar。可以通过监听cambrian.bar的回调获得这一状态,如下所示:

ambrian.bar({

 

data: {

 

type: ‘head’

 

},

 

fail: function (data) {

 

if (data.status === 111) {

 

console.log(‘status为111标示bar被屏蔽了’);

 

}

 

}

 

});

 

 

注意:上述三种bar在样式上没有预留左右边距,若页面自身没有设置边距,建议按照如下方法使用。以旧接口为例,其中padding-left、padding-right为边距属性,指定左右边距值,可按需修改。

<!–吸顶Bar–>

 

<div style=”padding-left: 17px; padding-right: 17px;”>

 

<script>cambrian.bar({data: {type: ‘head’}});</script>

 

</div>

 

 

 

<!–段落间Bar–>

 

<div style=”padding-left: 17px; padding-right: 17px;”>

 

<script>cambrian.bar({data: {type: ‘body’}});</script>

 

</div>

 

 

 

<!–底部Bar–>

 

<div style=”padding-left: 17px; padding-right: 17px;”>

 

<script>cambrian.bar({data: {type: ‘tail’}});</script>

 

</div>

使用这些Bar进行改造页面时还需要将以下代码放在</head>之前。

当然,这不是固定的只是按标准来进行安放代码。

总之,你只需记住以下代码一定要放在Bar之前才能正确的显示!

<script src=”%20https://xiongzhang.baidu.com/sdk/c.js?appid=你自己的熊掌号ID”></script>

 

 

分享到:
赞(0)

评论3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #3
    支持
    That person.2019-05-04 10:11:59回复
  2. #2
    支持
    That person.2019-05-04 10:11:59回复
  3. #1
    支持
    That person.2019-05-04 10:11:59回复