ad-baidu网盟广告详解 ad-baidu网盟广告怎么用

ad-baidu网盟广告怎么用？ad-baidu网盟广告详解中将会为大家全面解析该广告组件的使用方法，请看下文介绍。

支持布局

fixed-height

fixed

示例

非定制基本使用

<div class="mip-adbd">

<mip-ad

type="ad-baidu"

cproid="u2697398">

</mip-ad>

</div>

非定制加布局

组件布局：文档

<div class="mip-adbd">

<mip-ad

layout="responsive"

width="414"

height="80"

type="ad-baidu"

cproid="u2697398">

</mip-ad>

</div>

定制广告使用

需要注意的是：

定制广告的 script 标签中的参数必须带双引号，也就是说 script 标签中的数据必须是 json 格式的

mip-embed 或者 mip-ad 标签必须有一个div子节点，并且此节点必须有属性id，并且id的属性值是"cpro_"为前缀，script标签中的cproid为后缀的字符串，本例应为"cproid="u1908671"

定制广告的参数与原页面参数保持一致，如下代码仅为参考

layout="responsive" 为组件布局设定，文档

<mip-embed

layout="responsive"

width="414"

height="157"

type="ad-baidu"

cproid="u1908671">

<script type="application/json">

{

"at": "3",

"hn": "0",

"wn": "0",

"imgRadio": "1.7",

"scale": "20.6",

"pat": "6",

"tn": "template_inlay_all_mobile_lu_native",

"rss1": "#FFFFFF",

"adp": "1",

"ptt": "0",

"titFF": "%E",

"rss2": "#FFFFFF",

"titSU": "0",

"ptbg": "70",

"ptp": "1"

}

</script>

<div id="cpro_u1908671"></div>

</mip-embed>

属性

type

说明：广告类型

必选项：是

类型：字符串

取值：ad-baidu

默认值：无

cproid

说明：网盟广告id

必选项：是

类型：字符串

默认值：无

mip-ad 用来支持站长添加网页内自定义广告，主要包括连接、图文，多图，banner四种形式，这类广告可以制定大小也可以被用户关闭。

标题	内容
类型	通用
支持布局	responsive 文档
所需脚本	https://mipcache.bdstatic.com/static/v1/mip-ad/mip-ad.js
版本v1.0	支持别名mip-embed

示例

通用广告banner样式基本使用

<mip-ad type="ad-comm" tpl="onlyImg" href="//m.baidu.com/s?word=百度" data-size="1242 180" src="//m.baidu.com/static/search/ala/ad_1.png"> </mip-ad>

使用别名

<mip-embed type="ad-comm" tpl="onlyImg" href="//m.baidu.com/s?word=百度" data-size="1242 180" src="//m.baidu.com/static/search/ala/ad_1.png"> </mip-embed>

mip-vd-tabs 用来支持网页中标签页的显示。标签页内元素较多时不建议使用,会影响页面性能.

标题	内容
类型	通用
支持布局	responsive,fixed-height,fill,container,fixed
所需脚本	https://mipcache.bdstatic.com/static/v1/mip-vd-tabs/mip-vd-tabs.js

示例

一共支持5种样式

等分固定标签页

<mip-vd-tabs>

<section>

<li>第一页</li>

<li>第二页</li>

<li>第三页</li>

<li>第四页</li>

</section>

<div>内容1</div>

<div>内容2</div>

<div>内容3</div>

<div>内容4</div>

</mip-vd-tabs>

横滑标签页

<mip-vd-tabs allow-scroll>

<section>

<li>第一季</li>

<li>第二季</li>

<li>第三季</li>

<li>第四季</li>

<li>第五季</li>

<li>第六季更新至09</li>

</section>

<div>内容1</div>

<div>内容2</div>

<div>内容3</div>

<div>内容4</div>

<div>内容5</div>

<div>内容6</div>

</mip-vd-tabs>

带下拉按钮的横滑标签页

<mip-vd-tabs allow-scroll toggle-more toggle-label="自定义文字">

<section>

<li>第一季</li>

<li>第二季</li>

<li>第三季</li>

<li>第四季更新至09</li>

</section>

<div>内容1</div>

<div>内容2</div>

<div>内容3</div>

<div>内容4</div>

</mip-vd-tabs>

底部标签页

<mip-vd-tabs allow-scroll type="bottom" current="3">

<div>内容1</div>

<div>内容2</div>

<div>内容3</div>

<div>内容4</div>

<section>

<li>第一季</li>

<li>第二季</li>

<li>第三季</li>

<li>第四季更新至09</li>

</section>

</mip-vd-tabs>

剧情展开标签页

<mip-vd-tabs

type="episode"

toggle-more

toggle-label="老九门剧情选集"

allow-scroll

total="23"

current="11"

text-tpl="看第{{x}}集"

link-tpl="http://www.baidu.com/{{x}}/juji">

</mip-vd-tabs>

属性

type

说明：一共有三种特型, bottom(底部选项卡), episode(剧情选项卡), 不填则为默认特型

必填项：否

allow-scroll

说明：允许滑动

必填项：否

toggle-more

说明：是否显示下拉按钮. 前置依赖于allow-scroll属性

必填项：否

toggle-label

说明：下拉说明文字. 前置依赖于toggle-more属性

必填项：否

current

说明：当前已选标签页, 从0开始计数(current="3"表示第4个标签页). 当type="episode"时,表示当前剧集,从1开始计数(current="4"表示第4集),默认为1.

必填项：否

total

说明：剧集总数. 前置依赖于type="episode",并且当type="episode"为必填

必填项：否

page-size

说明：每页显示剧集数. 前置依赖于type="episode",默认为50

必填项：否

text-tpl

说明：显示在标签页上的剧集文案, "第{{x}}集"里的"{{x}}"将被替换成表示集数的数字. 前置依赖于type="episode".

必填项：否

link-tpl

说明：标签页和下拉菜单里的剧集跳转链接, 链接里的"{{x}}"将被替换成表示集数的数字. 前置依赖于type="episode",当type="episode"为必填.

必填项：否

head-title

说明：标签页和下拉菜单里的剧集跳转新页面的头部标题. 前置依赖于type="episode",当type="episode"为必填.

必填项：否

mip-stats-tianrun 用来支持站长添加天润统计，本次为大家带来的mip-stats-tianrun 天润统计详解，为大家全面解析该组件的使用的方法。

标题	内容
类型	通用，定制
支持布局	responsive,fixed-height,fill,container,fixed
所需脚本	https://mipcache.bdstatic.com/static/v1/mip-stats-tianrun/mip-stats-tianrun.js

示例

MIP 提供天润的插件，便于站长更好的接入 MIP，noscript 标签中是的代码是当访客手机不支持JS时直接URL回传统计数据，内容由第三方站长自己实现参数填充，代码示例：

<!-- 人民网CMS自己实现参数填充 noscript 示例：-->

<mip-stats-tianrun>

<noscript>

<img src="//cl2.webterren.com/11.gif?z=26&_wdxid=000000000000000000000000000000000000000000&_wdt=011&_wdc=w_2930&_wdci=7678771&_wda=254&_wdp=2016-10-08&_wdori=%u4e2d%u56fd%u53f0%u6e7e%u7f51%u7efc%u5408&_wdti=%u6e56%u5317%u8b66%u6821%u6821%u82b1%u6652%u82f1%u6b66%u5236%u670d%u7167%u0030%u7ec6%u6570%u8b66%u5bdf%u754c%u7684%u4eba%u6c14%u201c%u7f51%u7ea2%u201d&_wdurl=http://m2.people.cn/mip/r/MV80Xzc2Nzg3NzFfMjkzMF8xNDc1ODgzNjcz?s=baidu-mip&_wdqd=m2_baidu&_wdvs=wap&_wda2=254&_wdot=0" width="0" height="0" alt=""/>

</noscript>

</mip-stats-tianrun>

注意事项

img 的 src 不能写协议