本文以织梦cms为例记录下百度mip页面改造过程,前几天看了些教程,这两天捣鼓了下百度mip的改造,先说结论:对于技术能力不足的二营长来说,用现成的百度mip改造模板最是方便,但是中间也踩了一些坑,总结下经验。干货在最后。
MIP改造前准备工作
特别说明,由于MIP必须要求UTF-8的编码,所以站点模版是做的UTF的,不支持GBK,大概得流程是,安装空白织梦UTF-8版,安装MIP模版,填充测试数据。由于二营长已经在自己的虚拟机上早就安装好cms程序,所以只需要把相应的文件拷贝到虚拟机的相应文件夹里替换原来的文件就行。
百度mip改造第一步:
先下载百度mip改造的模板,解压出两个文件夹,分别是include和templates,将这俩文件夹里的文件,在网站程序中找到相应的文件夹,复制进去,覆盖原文件。
百度mip改造第二步:
include文件夹的arc.archives.class.php,出现img开头的域名,替换成你的域名或者图片地址,mip开头的改成你的MIP域名,位置在253、254和255行,这三行,具体改法看下面的代码,这是二营长改好的:
//253行 $$this->Fields['body'] = preg_replace('/<img.*?src=[\"|\']?(.*?)[\"|\']?\s.*?>/i', "<mip-img data-carousel=\"carousel\" class=\"mip-element mip-img\" src=\"http://m.techseo.cn$$1\"></mip-img>", $$this->Fields['body']); //254行 $$this->Fields['body'] = preg_replace("(src=\"/uploads/allimg/)", "src=\"http://m.techseo.cn/uploads/allimg/", $$this->Fields['body']); //255行 $$this->Fields['body'] = preg_replace("(<a href=\"/)", "<a href=\"http://m.techseo.cn/", $$this->Fields['body']);
百度mip改造第三步:
校验
百度mip改造可视化校验链接:https://www.mipengine.org/validator/preview
百度mip改造html代码校验链接:https://www.mipengine.org/validator/validate
在页面上输入URL:http://m.techseo.cn/m/view.php?aid=57可以查看效果
百度mip改造总结干货:
1、mip页面里的所有url必须是绝对路径,不能是相对路径,要不就出现错误代码:06200301,造成这个错误的原因就是html源码中有的url链接不是绝对路径。
2、干货中的干货,由于太干,请自备鸡汤,在文章中上传图片以后,移动端设备访问mip页面,图片显示正常,但是在pc站访问,图片调不出来,这是因为第二个步骤改的php代码导致的,这个php代码会将图片的img标签自动换为mip页面专门的mip-img标签,这样的话在pc站当然调不出来,解决办法:
在pc站的详情页模板里加以下js:
<script src="https://mipcache.bdstatic.com/static/v1/mip.js" ></script>
这个js可以解析mip-img标签,只是居中效果就没有了,蛋疼ing...
3、mip页面不允许调用任何外部css和js文件,自定义css只能写到html的head里。
4、发挥不解决问题就不睡觉的精神!