Quickly build MIP and experience friendly mobile pages

original None but Li 2017-07-11 09:45:10

Before reading this article, please make sure that you have understood the definition of MIP and the principle of acceleration. If you are not sure, you can go to the MIP official website. The content of the article comes from the MIP blog.

Preparation and precautions in the early stage of transformation:

You can choose to directly change the original mobile station to a MIP station, or you can create a separate set of MIP stations to coexist with the mobile station.

MIP transformation is not recommended for complex pages. At present, it has better support for information, graphics and text. If the function is more complex, it is recommended to customize components or wait for the MIP project team to develop.

The transformation needs to have some knowledge of html. The MIP transformation tutorial should follow the tutorial. Pay special attention to case. It is recommended to use lower case for the whole.

We can complete the MIP transformation step by step from the up and down order of an html page, as long as we follow the steps in this article.

 1. Doctype transformation 1.1 Open your template or code file and see the first line! DOCTYPE * * *>is changed to<! DOCTYPE html> 2.<Html>label transformation 2.1 After completing the first step, continue to modify the next line of code, and change:<html xmlns=“ http://www.w3.org/1999/xhtml ">or:<html>change to:<html mip>pay attention to all lowercase 3. Partial head reconstruction 3.1 The<head>label must be completely lowercase. 3.2 The page code must be utf-8. The modification statement is:<meta charset="utf-8"> 3.3 Add<meta name="viewport" content="width=device width, minimum scale=1, initial scale=1"> 3.4 Add MIP special style files to the page<link rel="stylesheet" type="text/css" href=“ https://mipcache.bdstatic.com/static/v1/mip.css " > 3.5 Here we need to tell the search engine the standard html page address corresponding to the changed page. If it exists, it will be marked<link rel="canonical" href=“ https://www.baidu.com ">The href value is modified to the URL address of the standard page (mobile page) corresponding to the current mip page. If only the mip page does not have a corresponding standard page, it is marked as:<link rel=" canonical "href=" https://www.baidu.com ">The href value is the current page address. Detailed description 4. Body internal reconstruction 4.1 Firstly, the<body>label must be lowercase; 4.2 Replace<img>,<style>,<frame>,<form>,<input>,<textarea>,<select>,<option>tags with corresponding MIP component tags. See the official website for details. 4.3 Reference MIP-JS running environment<script src=“ https://mipcache.bdstatic.com/static/v1/mip.js "></script>at the end of the page. 5. Precautions for using MIP Cache 5.1 For general cache images, styles, and scripts, after completing the above four steps, modify the resource address to a relative address or a legal absolute address (subject to the verification tool); 5.2 Cache content needs to be updated. It needs to push the updated url link through the update data interface in MIP data submission, and wait for Baidu to update. 6. Use of other components 6.1 In addition to the above requirements, some sites may need components. The official website documents contain all the components currently supported. This article gives a simple example of how to use Baidu Statistics: 6.2 Find the original Baidu statistical tool View the statistical JS code (you can find the var_hmt keyword globally) to obtain the token (the code after hm. js?), and put the code at the bottom of the page before all scripts:<mip stats baidu token="22090d4a309827eb62bc1335b2b28f11 (website statistical token value)"></mip stats baidu> 6.3 Remove the original Baidu statistical tool to view the statistical JS code and delete the entire section of js