一个完整的例子

  1. <!DOCTYPE html>
  2. <html mip>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  6.         <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
  7.         <!--TODO: canonical href需要替换成原页面url-->
  8.         <link rel="canonical" href="https://www.example.com/your/path.html">
  9.         <title>MIP页Demo效果</title>
  10.         <!--TODO: 替换样式-->
  11.         <style mip-custom>
  12.             body { margin: 10px;}
  13.             .red-text { color: #f00;}
  14.             .middle-text { text-align: center; font-size: 20px;}
  15.             hr { margin: 20px 0;}
  16.             a { border: 1px solid #ddd; padding: 10px; display: block;}
  17.         </style>
  18.         <!-- noscript 标签是为了在不支持 script 的环境下快速的展现 MIP 页面，推荐使用 -->
  19.         <noscript>
  20.             <style mip-officialrelease>
  21.                 body {
  22.                     -webkit-animation: none;
  23.                        -moz-animation: none;
  24.                         -ms-animation: none;
  25.                             animation: none;
  26.                 }
  27.             </style>
  28.         </noscript>
  29.     </head>
  30.     <body>
  31.         <!--自定义样式-->
  32.         <p class="middle-text">增加样式</p>
  33.         <p class="red-text">MIP页支持修改css样式</p>
  34.         <hr>
  36.         <!--跳转链接, 落地页同为MIP-->
  37.         <p class="middle-text">mip 跳转链接</p>
  38.         <a data-type="mip" data-title="目标页面标题" href="https://www.mipengine.org/doc/00-mip-101.html">跳转到MIP新手指南 (MIP)</a>
  39.         <!--跳转链接, 落地页不是MIP-->
  40.         <a target="_blank" href="https://github.com/mipengine">跳转到GitHub (非MIP)</a>
  41.         <hr>
  43.         <!--图片组件-->
  44.         <p class="middle-text">mip-img 图片组件</p>
  45.         <mip-img layout="fixed" width="200" height="130" src="https://www.mipengine.org/static/img/mip_logo_3b722d7.png" alt="MIP LOGO"></mip-img>
  46.         <hr>
  48.         <!--分享组件，外链mip-share.js-->
  49.         <p class="middle-text">mip-share 分享组件</p>
  50.         <mip-share title="分享：我的第一个MIP页面"></mip-share>
  51.         <hr>
  53.         <!--百度统计组件，外链mip-stats-baidu.js TODO: 修改token值-->
  54.         <p class="middle-text">mip-stats-baidu 百度统计组件，代码可见</p>
  55.         <mip-stats-baidu token="4e397f684261b9e4ff9d8"></mip-stats-baidu>
  57.         <!--mip 运行环境-->
  58.         <script src="https://c.mipcdn.com/static/v1/mip.js"></script>
  59.         <!--分享组件 代码-->
  60.         <script src="https://c.mipcdn.com/static/v1/mip-share/mip-share.js"></script>
  61.         <!--百度统计组件 代码-->
  62.         <script src="https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>
  63.     </body>
  64. </html>