觸屏版
全國服務(wù)熱線:0571-87205688
登錄
注冊
客戶中心
關(guān)注云客
在讀這篇文章之前,請確定你已經(jīng)了解MIP定義及加速原理。如果不確定的話,可以到MIP官網(wǎng)了解。文章內(nèi)容來自MIP博客。
改造前期準(zhǔn)備和注意事項(xiàng):
你可以選擇直接將原先的移動(dòng)站點(diǎn)直接改成MIP站,也可以單獨(dú)再做一套MIP站點(diǎn)與移動(dòng)站并存。
復(fù)雜的頁面暫不建議MIP改造,目前對資訊、圖文類支持已較好,若功能較為復(fù)雜的建議自定義組件或等待MIP項(xiàng)目小組開發(fā)。
改造需具備一定的html知識,改造MIP教程請按照教程來,特別注意大小寫,建議全局小寫。
我們從一個(gè)html頁面的上下順序一步步改造,只要按照本文章內(nè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> 改成:<html mip>注意全部小寫
3. Head部分改造
3.1 <head>標(biāo)簽必須是完全小寫。
3.2 頁面的編碼必須是utf-8,修改聲明為:<meta charset="utf-8">
3.3 頁面中加入<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
3.4 頁面中加入MIP專用樣式文件< link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css" >
3.5 這里需要告訴搜索引擎改頁面對應(yīng)的標(biāo)準(zhǔn)html頁面地址,如果存在則標(biāo)識<link rel="canonical" href="https://www.baidu.com"> 其中href值修改成為與當(dāng)前mip頁面相對應(yīng)的標(biāo)準(zhǔn)頁面(移動(dòng)頁)url地址。如果只有mip頁面沒有相對應(yīng)的標(biāo)準(zhǔn)頁面則標(biāo)識為:<link rel="canonical" href="https://www.baidu.com"> 其中的href值為當(dāng)前頁面地址。詳細(xì)說明
4. Body內(nèi)改造
4.1 首先<body>標(biāo)簽必須是小寫的;
4.2 替換<img>, <style>, <frame>, <form>,< input>, <textarea>, <select>, <option>標(biāo)簽為對應(yīng)MIP組件標(biāo)簽,具體見官網(wǎng)文檔。
4.3 引用MIP-JS 運(yùn)行環(huán)境 <script src= "https://mipcache.bdstatic.com/static/v1/mip.js"></script>放在頁面尾部。
5. 使用MIP Cache注意事項(xiàng)
5.1 一般Cache圖片、樣式、腳本,做完上述4步后,修改資源地址為相對地址或合法絕對地址(以校驗(yàn)工具為準(zhǔn));
5.2 Cache的內(nèi)容需要更新需要通過MIP數(shù)據(jù)提交中的更新數(shù)據(jù)接口,把更新的url鏈接推送過去,等待百度更新。
6. 其他組件使用
6.1 除了上述這些需求外,一部分站點(diǎn)可能需要用到組件,官網(wǎng)文檔包含了目前支持的所有組件,本文簡單舉例說明一下使用百度統(tǒng)計(jì)該如何實(shí)現(xiàn):
6.2 查找原有百度統(tǒng)計(jì)工具查看統(tǒng)計(jì)JS代碼(可全局查找 var _hmt 關(guān)鍵字)獲取token(hm.js?之后的編碼),在頁面底部,所有script前放入代碼:<mip-stats-baidu token="22090d4a309827eb62bc1335b2b28f11(網(wǎng)站統(tǒng)計(jì)token值)"></mip-stats-baidu>
6.3 去除原有百度統(tǒng)計(jì)工具查看統(tǒng)計(jì)JS代碼,刪除整段js.
更多教程參考,可查看:
[MIP新手指南]https://www.mipengine.org/doc/00-mip-101.html
[MIP 完整demo]https://www.mipengine.org/doc/01-mip-demo.html
[canonical使用說明]http://www.cnblogs.com/mipengine/p/canonical_link.html
站點(diǎn)在MIP改造中遇到任何問題,歡迎前往站長社區(qū):MIP專區(qū)進(jìn)行提問解惑。
一個(gè)草根站長談企業(yè)網(wǎng)站為什么選擇定制網(wǎng)站好
巧用5個(gè)心理學(xué)現(xiàn)象優(yōu)化用戶體驗(yàn)設(shè)計(jì),提高網(wǎng)站轉(zhuǎn)化率
外貿(mào)英文網(wǎng)站谷歌SEO排名優(yōu)化問題匯總
實(shí)戰(zhàn)經(jīng)驗(yàn):客戶不信任你的用戶體驗(yàn)設(shè)計(jì)的6個(gè)原因
進(jìn)擊的人工智能:從產(chǎn)品角度,深度解析「對話機(jī)器人」
交互設(shè)計(jì)師的設(shè)計(jì)需求與分析(二)
眼皮底下溜走的用戶體驗(yàn):淺談產(chǎn)品設(shè)計(jì)可用性原則
一個(gè)草根站長談企業(yè)網(wǎng)站為什么選擇定制網(wǎng)站好
tag是什么意思?
打造一個(gè)吸引力的網(wǎng)站 網(wǎng)站建設(shè)中這些要素不可忽略
評論(0人參與,0條評論)
發(fā)布評論
最新評論