建站经验技巧网站MIP改造的简单步骤和基本技巧

网站MIP改造的简单步骤和基本技巧

MIP是百度推出的一个移动加速项目,官方网站是:https://www.mipengine.org ……按照MIP的规范改造或设计的网页在移动百度上有排名方面的优势,百度站长平台也建议站长将移动网页进行MIP的改造,下面简单的说说设计符合MIP规范的网页的方法步骤:

1. MIP网页头部声明与html5的写法相同:
<!DOCTYPE html>
2. MIP网页的根元素标签写法为:
<html mip>
3. MIP网页头部组成部分如下:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css" />
<link rel="canonical" href="https://www.cssaaa.com/" />
<title>网页的标题</title>
<style mip-custom>
body{margin:10px;}
</style>
</head>

其中关于网页编码的写法与html5写法相同,不过在MIP的规范里,只允许只用UTF-8的编码,原因是兼容性更好;

其中viewport标签的写法请将minimum-scaleinitial-scale的值设为1,如果写为1.0则无法通过校检;

其中mip.css是每个MIP网页都必须引入的官方样式表;

其中link标签canonical链接地址设置为MIP页面所对应的原移动网页,如果没有则写该MIP网页的地址即可;

其中关于CSS样式表标签应当写为<style mip-custom>而不是<style>,当然目前MIP允许通过link方式调用外部样式表,但是内联属性style是不被允许的。

4. 将普通网页改造为MIP网页技巧:

MIP官方js引入:

<script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>

每个MIP网页都必须引入该js文件,一般将这段代码放在</body>标签的前面即可。

MIP禁止使用的标签:

script标签只能用于引入MIP官方的的js,自定义js文件不允许引用;

frame、embed、object这些标签在MIP中不允许使用,因此请替换为其他标签。

MIP需要更换的标签:

img图片标签在MIP中要写为mip-img,例如插入图片的代码写法是:

<mip-img width="350" height="263" src="/logo.png"></mip-img>

同样的,还有mip-video视频标签,mip-audio音频标签和mip-iframe框架标签(框架内容必须为https)都需要按照这个格式更改。

MIP网页中,大多数网页所需功能均以官方组件的方式加载,例如刚才提到的图片组件和视频组件,下面介绍几个最常用的组件:

A. 图片轮播 mip-carousel,图片幻灯片轮播可以通过下面的代码实现:

<mip-carousel autoplay defer="1000" layout="responsive" width="600" height="400">
  <a href="#"><mip-img src="/image/1.jpg" width="600" height="400"></mip-img></a>
  <a href="#"><mip-img src="/image/2.jpg" width="600" height="400"></mip-img></a>
  <a href="#"><mip-img src="/image/3.jpg" width="600" height="400"></mip-img></a>
  <a href="#"><mip-img src="/image/4.jpg" width="600" height="400"></mip-img></a>
</mip-carousel>

其中defer的值表示图片切换的间隔时间,width和height并不表示实际尺寸,两者配合可以设置显示的比例。

B. 回到顶部按钮 mip-gototop,点击按钮使页面回到顶部:

<mip-fixed type="gototop">
    <mip-gototop></mip-gototop>
</mip-fixed>

网页底部引入下面的js文件:

<script src="https://mipcache.bdstatic.com/static/v1/mip-gototop/mip-gototop.js"></script>

C. 百度统计 mip-stats-baidu,实现代码为:

<mip-stats-baidu token="02890d4a309827eb62bc3335b2b28f7f"></mip-stats-baidu>

网页底部引入下面的js文件:

<script src="https://mipcache.bdstatic.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>

其中token的值可以在百度统计代码里获取。

D. 普通广告 mip-ad,用于添加图文链接广告,例如:

<mip-ad
    layout="responsive"
    width="414" height="80" 
    type="ad-comm"
    tpl="onlyImg" 
    href="//m.baidu.com/" 
    data-size="1242 180" 
    src="/1.jpg">
</mip-ad>

网页底部引入下面的js文件:

<script src="https://mipcache.bdstatic.com/static/v1/mip-ad/mip-ad.js"></script>

E. 百度联盟广告 mip-ad:ad-baidu,用于添加百度联盟广告,例如:

<div class="mip-adbd">
    <mip-ad
     type="ad-baidu" 
     cproid="u2697398">
    </mip-ad>
</div>

网页底部引入下面的js文件:

<script src="https://mipcache.bdstatic.com/static/v1/mip-ad/mip-ad.js"></script>

其中cproid可以在百度联盟广告代码里获得。

F. 百度联盟广告防屏蔽模式 mip-ad:baidu-wm-ext,用于添加反屏蔽的联盟代码:

<mip-ad 
    type="baidu-wm-ext" 
    domain="a1.baidu.com" 
    token="67fe1103c" >
    <div id="67fe1103c"></div>
</mip-ad>

网页底部引入下面的js文件:

<script src="https://mipcache.bdstatic.com/static/v1/mip-ad/mip-ad.js"></script>

其中domain填写您的反屏蔽域名,token和id的值可以在防屏蔽联盟代码里获取。

G. 畅言评论组件 mip-changyan,用于添加畅言评论框:

<mip-changyan
 appid="cysjB6Scw"
 conf="prod_5ca6838c335b62e95ab4306b79f503f5"
 critical-width="960">
<div id="SOHUCS"></div>
</mip-changyan>

网页底部引入下面的js文件:

<script src="https://mipcache.bdstatic.com/static/v1/mip-changyan/mip-changyan.js"></script>

这里的conf值可以在搜狐畅言后台获取。

H. CNZZ统计组件,用于添加CNZZ统计代码:

<mip-stats-cnzz token="8888"></mip-stats-cnzz>

网页底部引入下面的js文件:

<script src="https://mipcache.bdstatic.com/static/v1/mip-stats-cnzz/mip-stats-cnzz.js" ></script>

这里的token值可以在cnzz官方统计代码中获取。

mip.png

5. CMS增加MIP站的简单步骤:

对于网站MIP改造,一般有三种做法:

A. 在原本PC站和手机站的基础上再做一套MIP站,即PC+WAP+MIP

B. 将原本的手机版网站改造为MIP站,即PC+MIP

C. 将原本PC和手机自适应的网页改造为自适应的MIP站

一般使用第一种方法的站长较多,因为MIP是百度推出的一项移动网站加速服务,目前在初始发展阶段,可能并不能和所有浏览器及搜索引擎兼容,所以很多站长保留自己的PC站和WAP站,专为百度设计一套MIP站,并只允许百度抓取。一般单独设计MIP站需要与PC站共用一个数据库,多数站长的做法是新创建一个网站,调用PC站的数据库,并单独制作一套模板。

用文本编辑器打开模板文件,将头部的代码修改为:

<!DOCTYPE html>
<html mip>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css" />
<link rel="canonical" href="本页的URL" />

这里的官方CSS后面可以通过<style mip-custom>标签加入自定义CSS样式,也可以通过link标签引入自己的CSS文件;

关于canonical中的URL地址,可以通过CMS程序对应的标签实现自动加入,例如dedecms文章页该标签可写为:

<link rel="canonical" href="{dede:global.cfg_basehost/}{dede:field name='arcurl'/}" />

在模板尾部</body>标签前面加上:

<script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>

如果需要使用百度统计和百度联盟广告,则底部再加上:

<script src="https://mipcache.bdstatic.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>
<script src="https://mipcache.bdstatic.com/static/v1/mip-ad/mip-ad.js"></script>

如果需要其他对应的组件,则同样在底部引入对应的官方js文件即可;

将模板里的图片标签替换为<mip-img>图片尾部加上</mip-img>,并给图片加上宽和高的属性,给每个图片都加上alt属性;

去掉MIP不允许的标签,去掉除官方js以外的其他外部js代码,去掉所有内链CSS样式;

去掉所有的广告代码,以MIP提供的组件实现广告的展示;

经过简单的修改后,使用修改后的模板生成网页,浏览新生成的网页,查看其源代码,将所有源代码复制到MIP官方校检工具里查看是否符合规范,工具网址为:

https://www.mipengine.org/validator/validate (将你的网页代码复制到这个网页即可检测)

对不符合规范的源代码,该工具会给出对应的提示,可根据提示再去修改模板中的代码。

网站首页和列表页中的图片容易替换标签,而文章内容中的图片稍微麻烦一些,需要在CMS程序里使用正则的方式替换,例如dedecms,可以在\include\arc.archives.class.php中加入下面的代码进行图片标签的替换:

 $this->Fields['body'] = preg_replace('/<img.*?src=[\"|\']?(.*?)[\"|\']?\s.*?>/i',"<mip-img data-carousel=\"carousel\" class=\"mip-element mip-img\" src=\"$1\"></mip-img>", $this->Fields['body']);

同样的,还可以通过正则的方式替换到内容页里所有的内链style样式,不同的CMS程序修改方法各有不同,但思路一样,都可以采用正则替换的方式。

关于dedecms,帝国CMS,Discuz,WP和Zblog等常用建站程序,都有热心网友免费分享了修改的方法和简单的MIP模板,我们可以根据他们的方法和思路来修改自己的网站:

上述五种CMS的MIP参考模板下载,链接:https://pan.baidu.com/s/1dE85zGH 密码:z7tv

此外,还有大神推出了MIPCMS建站系统,可以轻松的制作符合MIP规范的网站,有兴趣的朋友可以试试看,官方网址是:
http://www.mipcms.com/

关于MIP更详细的知识和更多组件请参考MIP官方网站:
https://www.mipengine.org/ 

关于MIP网站改造遇到的一些问题可以在官方博客里反馈或寻找解决方法:
http://www.cnblogs.com/mipengine/ 

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/website/108.html