前面兩篇課程,我們分別介紹了MIP的入門認(rèn)識(shí)和操作流程,今天我們進(jìn)行實(shí)站織夢(mèng)MIP操作,網(wǎng)站可以選擇直接將原先的移動(dòng)站點(diǎn)直接改成MIP站,也可以單獨(dú)再做一套MIP站點(diǎn)與移動(dòng)站并存。從一個(gè)html頁(yè)面的上下順序一步步改造,只要按照本文章內(nèi)的一步步來(lái),即可完成MIP改造。
1. Doctype改造
1.1 打開你的模板或代碼文件看第一行,將<! DOCTYPE ***>改為<!DOCTYPE html>
2. <Html>標(biāo)簽改造
2.1 完成第一步后,繼續(xù)修改下一行代碼,將: <html xmlns="http://www.w3.org/1999/xhtml">或:<html lang="en"> 改成:<html mip>注意全部小寫
3. Head部分改造
3.1 <head>標(biāo)簽必須是完全小寫。
3.2 頁(yè)面的編碼必須是utf-8,修改聲明為:<meta charset="utf-8">
3.3 頁(yè)面中加入<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
3.4 頁(yè)面中加入MIP專用樣式文件< link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/mipmain-v1.0.1.css" >
3.5 這里需要告訴搜索引擎改頁(yè)面對(duì)應(yīng)的標(biāo)準(zhǔn)html頁(yè)面地址,如果存在則標(biāo)識(shí)<link rel="canonical" href="H5/PC原頁(yè)面"> 其中href值修改成為與當(dāng)前mip頁(yè)面相對(duì)應(yīng)的標(biāo)準(zhǔn)頁(yè)面url地址。如果只有mip頁(yè)面沒有相對(duì)應(yīng)的標(biāo)準(zhǔn)頁(yè)面則標(biāo)識(shí)為:<link rel="standardhtml" href="MIP自身"> 其中的href值為當(dāng)前頁(yè)面地址。
4. Body內(nèi)改造
4.1 首先<body>標(biāo)簽必須是小寫的;
4.2 加入MIP專用JS文件:<script src="https://mipcache.bdstatic.com/static/mipmain-v1.0.2.js"></script>
4.3 替換<img>, <style>, <frame>, <form>,< input>, <textarea>, <select>, <option>標(biāo)簽為對(duì)應(yīng)MIP組件標(biāo)簽,具體見官網(wǎng)文檔。
4.4 引用MIP-JS 運(yùn)行環(huán)境 <script src= "https://mipcache.bdstatic.com/static/mipmain-v1.1.0.js"></script>放在頁(yè)面尾部。
5. 使用MIP Cache注意事項(xiàng)
5.1 一般Cache圖片、樣式、腳本,做完上述4步后,修改資源地址為相對(duì)地址或合法絕對(duì)地址(以校驗(yàn)工具為準(zhǔn));
5.2 Cache的內(nèi)容需要更新需要通過(guò)MIP數(shù)據(jù)提交中的更新數(shù)據(jù)接口,把更新的url鏈接推送過(guò)去,等待百度更新。
6. 組件的使用
6.1 除了上述這些需求外,一部分站點(diǎn)可能需要用到組件,官網(wǎng)文檔包含了目前支持的所有組件,詳見《組件概述》。
6.2 目前官網(wǎng)開發(fā)了很多通用性組件,并提供了使用示例,以百度統(tǒng)計(jì)組件為例:在百度統(tǒng)計(jì)中申請(qǐng)js統(tǒng)計(jì)代碼,將其中的token值截取出來(lái),如下圖所示字符串:
將字符串以<mip-stats-baidu token="02890d4a309827eb62bc3335b2b28f7f"></mip-stats-baidu>的形式植入到頁(yè)面中,并在頁(yè)面中嵌入 <script src="https://mipcache.bdstatic.com/static/v1.1/mip-stats-baidu.js"></script>
以上步驟就可以將百度統(tǒng)計(jì)組件植入到MIP頁(yè)面中了!
6.3特定組件的使用:對(duì)于官網(wǎng)沒有的組件,網(wǎng)站可以自主開發(fā)組件接入,具體方法可以參考《擴(kuò)展組件開發(fā)規(guī)范》;