请选择 进入手机版 | 继续访问电脑版
查看: 1587|回复: 0

网站页面MIP改造快速入门

[复制链接]

393

主题

394

帖子

2015

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2015
发表于 2018-4-24 13:36:16 | 显示全部楼层 |阅读模式
一、MIP 改造前说明

对于简单的WAP站点进行MIP Html改造,一般不会造成界面的改变,但是也有很多站点会出现“大改版”的现象。在Wap原站点上进行改造,更适合新闻资讯类生成静态或者伪静态的站点。熟悉DIV+CSS的肯定也熟悉一个词,叫“DIV重构”,其实简单的WAP网站改造成MIP站点,有点DIV重构的感觉。功能非常复杂或者特效非常多的站点,最好是新建一套MIP模版。

二、MIP改造界面预览

内容页
列表页

内容页

内容页

列表页

列表页

因为我是做的MIP新建,所以模版我本着简洁简洁再简洁的原则来制作。
一个普通的网页<html></html>里面主要包含<head></head>和<body></body>两大部分,单从截图可以看出来,整个网站页面的BODY大体的布局是
首页body布局,头部:标题+导航;内容区:大图+列表;页脚无内容显示。
列表页body布局,头部:标题+导航;内容区:大图+列表+分页;页脚无内容显示。
内容页body布局,头部:标题;内容区:文章标题+内容+分页+列表内容;页脚无内容。
那么下面就从HEAD和BODY进行拆解分析,最后附有内容页、列表页、首页完整代码

三、Head改造详解

普通网页的写法

  1. <!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html  xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.         <meta  http-equiv="Content-Type" content="text/html;  charset=utf-8" />
  5.         <meta  name="viewport"  content="width=device-width,minimum-scale=1,initial-scale=1">
  6.         <title>移动网页DEMO</title>
  7.         <meta name="description"  content="描述" /> <meta name="keywords" content="关键词" />
  8.         <link  rel="stylesheet"   href="/skin/css/style.css"   type="text/css" />
  9. </head>
复制代码

MIP的Head区域的写法
  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.         <title>MIP DEMO</title>
  7.         <meta  name="description" content="描述" /><meta name="keywords" content="关键词" />
  8.         <link rel="stylesheet"  type="text/css"  href="//mipcache.bdstatic.com/static/mipmain-v1.0.1.css">
  9.         <link rel="canonical"  href="页面h5 url">
  10.         <style mip-custom>css 部分</style>
  11. </head>
复制代码

其实对比可以看得出来,MIP和普通网页虽然大部分相同,但还是有不同地方的:
其中对于<head>之前的部分,就是网页一开始,必须引入
<!DOCTYPE html>,
<htmlmip>
<head></head>之间的部分首先要注明网页编码,<metacharset="utf-8">目前MIP只支持UTF-8。

其次加入移动端缩放代码
<metaname="viewport"content="width=device-width,minimum-scale=1,initial-scale=1">

对于网页的TDK部分,和普通网页一样的写法
<title>网页标题</title>,
<meta name="description"content="描述" />,
<metaname="keywords" content="关键词" />
其中加入<link rel="canonical" href="页面h5 url">指明和MIP对应的普通网页地址;
如果一个页面的MIP和非MIP版本同时被收录,这个标签能够帮助搜索引擎将两个页面对应起来。

对于常规网页,会在头部引用css和js,但是MIP只可以引用一个官方css,写法如下
  1. <linkrel="stylesheet" type="text/css"href="//mipcache.bdstatic.com/static/mipmain-v1.0.1.css">
复制代码
对于网页中需要用到的CSS样式,只能以<style mip-custom>CSS样式代码</style>形式,写到</head>之前,而且所有的CSS只能一次性全写到这里面。

对于MIP标准,head还是有几点需要注意的,当然,你要是直接复制我的代码进行修改,需要注意的并不多,下面一起看一下这几点需要注意的吧,其实主要是给粗心的人准备的。
1、代码大小写。
网页大部分是强制小写的。其中规定
<html mip>,<head>,
<meta name="viewport"content="width=device-width,minimum-scale=1,initial-scale=1">,
< link rel="stylesheet"type="text/css"href="https://mipcache.bdstatic.com/static/mipmain-v1.0.1.css" >,
<link rel="standardhtml"href="xxx">
都是必须小写的,强制规定的,不小写不行!所以网页全局尽量都小写吧。

2、网页只可以有两个<link  
   一个是引用官方标准的css文件,
  <link rel="stylesheet"type="text/css"href="https://mipcache.bdstatic.com/static/mipmain-v1.0.1.css" >
   一个指明标准页面地址。
  <linkrel="standardhtml" href="xxx">
  其他的不准再出现以<link 开头的代码。

3、<head></head>内容区域代码标签,不可以写到<body>区域,或者写到其他区域,
   不属于<head> </head>区域代码也不要往这里随便写。
   MIP html要求大家书写代码规范!重要的事情说三遍,规范!规范!规范!

四、MIP Html Body简单说明

对于懂CSS和html的技术员来说,MIP的内容和常规网页区别不是很大。
1、其中图片标签由<img src="图片地址" />换成了<mip-img  src="图片地址"></mip-img>
图片地址必须为完整地址,当然<mip-img 里面是可以加alt、css、的,可以参考示例。

2、其中<head>区域引用的官方标准CSS文件中,包含了很多css样式比如.mip-html、mip-img、.mip-html p、header、body、.mip-text等等,后续将不断完善。希望大家可以下载官方css文件仔细看一下,这都是可以直接引用,其他没有的css样式,需要在head区域的<style mip-custom></style>里面写入,然后在body引用。

3,首先</body>前面加上MIP必须的官方js文件
  1. <scriptsrc="https://mipcache.bdstatic.com/static/mipmain-v1.0.3.js"></script>
复制代码
它是支持MIP必须的组件。

目前,除了官方js文件,是禁止链接非官方js文件的,如果需要新建组件来实现特定的交互,请在github的mipengine项目中提交组件代码,目前支持的js组建有:百度统计、百度分享、百度联盟广告、app下载、视频、音频、隐藏层等。

此示例,演示了百度统计的MIP JS和代码书写
  1. <mip-stats-bidutoken="623be0d7dc9047afe33405a0a69ab869"></mip-stats-bidu>
  2. <scriptsrc="https://mipcache.bdstatic.com/static/v0.1/mip-stats-bidu.js"></script>
复制代码
详情看官网组件的使用https://www.mipengine.org/doc/4-widget/1-overview.html
比较直白地说,如果想改造 MIP,不要指望把以前网站所有的特效都搬过来,而是针对MIP现在有的组件进行网页改造。

4,所有的<a>链接,必须是<a href="url"target="_blank"></a>,
url必须是完整地址,必须新窗口打开,不可以是<a href="javascript:xxx()"></a>,如果要在当前窗口打开,可使用

<mip-link>组件,记得引用配套JS。

5,Body内容,不支持常规表单提交、不支持注册登录等动态网页代码、不支持搜索内容等。

6,还是重提一下书写代码要规范这个事
该在head写的标签和代码,不要写在body里面;该在body写的代码和标签,也不要随便往其他地方写

五、首页BODY改造拆解

对于MIP改造,其实和常规网页制作区别不是太大,只要额外注意MIP提出的几点规范即可,大部分还是和常规HTML一样来设计制作网页的。

对于首页显示的头部,我这里有一个黑色背景的标题《励志教育·励志人物》,以及导航,其实这部分代码和常规HTML代码没什么区别,唯一一点就是所有超链接必须是完整连接和新窗口打开。

首页内容区域是一个大图,然后下面就是列表,一排排的文章罗列下来的。
其中单独说一下大图代码和其中一篇文章代码

大图代码
  1. <a  href="http://mip.lypk.net/renwu/276.html"  target="_blank">
  2.         <mip-img  data-carousel="carousel" class="mip-element mip-img  quanping"  src="//lypk.net/uploads/allimg/160711/1153333261-28.jpg">
  3.         <p  class="mip-img-subtitle">LV边上开了家烧饼油条店,</p>
  4.      </mip-img>
  5. </a>
复制代码

如果是普通网页,大概是这个写法
  1. <a href="http://mip.lypk.net/renwu/276.html"  target="_blank">
  2.         <img data-carousel="carousel"  class="mip-element mip-img quanping"  src="//lypk.net/uploads/allimg/160711/1153333261-28.jpg">
  3.         <p  class="mip-img-subtitle">LV边上开了家烧饼油条店,</p>
  4. </a>
复制代码

不同之处在于,img-换成了mip-img而且还有结尾</mip-img>,当然图片包含超链接,都必须是完整地址的,超链接必须是新窗口打开的。如果要在当前窗口打开,可使用<mip-link>组件。其它部分和普通网页是一样的写法。

其中一篇文章的代码
  1. <li><div  class="list_img2"><a  href="http://mip.lypk.net/renwu/276.html"  target="_blank">
  2. <mip-img data-carousel="carousel"  class="mip-element mip-img"  src="//lypk.net/uploads/allimg/160711/1153333261-28.jpg"></mip-img></a></div>
  3. <div class="list_cont"><div  class="list_title2"><a  href="http://mip.lypk.net/renwu/276.html"  target="_blank">LV边上开了家烧饼油条店,火遍上海滩</a></div> <div class="list_time2">
  4. <p><b>热</b>2016-09-02</p><span  class="list_fx2"></span></div></div>
  5. <div  class="clearfloat"></div></li>
复制代码

普通网页的写法
  1. <li><div  class="list_img2"><a  href="http://mip.lypk.net/renwu/276.html"  target="_blank">
  2. <img  data-carousel="carousel" class="mip-element mip-img"  src="//lypk.net/uploads/allimg/160711/1153333261-28.jpg"></a></div>
  3. <div  class="list_cont"><div class="list_title2"><a  href="http://mip.lypk.net/renwu/276.html"  target="_blank">LV边上开了家烧饼油条店,火遍上海滩</a></div>  <div class="list_time2">
  4. <p><b>热</b>2016-09-02</p><span  class="list_fx2"></span></div></div>
  5. <div  class="clearfloat"></div></li>
复制代码

看到没,主要区别还是在于 img变换成mip-img,并且结尾有mip-img。图片链接和超链接必须是完整地址以及超链接必须是新窗口打开,如果要在当前窗口打开,可使用<mip-link>组件,这个规则不用再重复了吧。
内容区域到此,就结束了。

页脚部分代码写法
  1. <mip-stats-bidu  token="4f3148f2fe8dc07845739a9368dd0a8a"></mip-stats-bidu>
  2. <script  src="https://mipcache.bdstatic.com/static/mipmain-v1.0.3.js"  ></script>
  3. <script  src="https://mipcache.bdstatic.com/static/v1.1/mip-stats-bidu.js"  ></script>
复制代码

页脚部分是什么都不显示的,其中第一行和第二行代码是百度统计的作用,
其中token值这里是从百度统计代码的
hm.src ="//hm.baidu.com/hm.js?4f3148f2fe8dc07845739a9368dd0a8a"; 提取的。
值得注意的是<mip-stats-bidu>必须放在mip-stats-bidu.js前面统计才能生效

第三行代码是作为MIP必须引用的一段JS。对于JS部分,希望大家看JS组建教程进行详细的了解。
对于首页的MIP Body改造,在这里就介绍完毕了。

六、 列表页BODY改造拆解

列表页的头部、文章列表部分、底部其实是和首页一样的,在这里没有必要再罗列一遍,就说一下,列表页的分页代码。
对于很多网页列表页都有分页的,有的含有JS脚本,还有用到 input、textareaa、select、option。在这里说明一下,如果列表页含有分页,最好做成纯css样式的,不要包含JS或者select、option等,MIP目前是禁止的,附件中附有页面标签禁使表,或者去官方网站查看。分页所使用的超链接也必须是完整地址且新窗口打开
比如我列表页的分页代码如下,请做参考
  1. <p  align='center' class='ArtPage'><b>
  2. <span  class="now">1</span>
  3. <a  target='_blank' href='http://mip.lypk.net/wz/list_2.html'>2</a>
  4. <a  target='_blank' href='http://mip.lypk.net/wz/list_3.html'>3</a>
  5. <a  target='_blank' href='http://mip.lypk.net/wz/list_2.html'>向后</a>
  6. </b></p>
复制代码

在这里,列表页也算是做了一个了解。

七、内容页BODY改造说明

对于内容页,其中头部:网站标题;内容区:文章标题+内容+分页+列表内容;页脚无内容。都已经在首页和列表页中做了拆解。其实对于文章内容,主要是图片代码是<img src="图片地址" />换成<mip-img  src="图片地址"></mip-img>样式,如果是一般网站后台,那么内容区域除了替换img为mip-img,其他代码和普通网页并无太大区别。
当然对于主流cms,大家可以进行修改内核,添加文章内容正规则替换,来实现。

八、页面标签禁使表
MIP对于网页的改造,还是有些区别的,比如有些标签是不支持的
对于标签不支持,或者支持不太好的,尽量先不要用。
标签
使用范围
备注
img
替换为mip-img
video
替换为mip-video
暂未开放
audio
替换为mip-audio
暂未开放
iframe
替换为mip-iframe
暂未开放
style
替换为<style mip-custom>
只能在head标签中使用一次
script
禁止使用
禁止使用script标签, 以下两种情况除外:1)外链mip组件所需js,2)type为 "application/ld+json" 或 "application/json"
svg
允许使用
button
允许使用
link
允许使用
不允许使用link标签进行样式表的加载
a
允许使用
不可以href="javascript:",target必须设置为_blank
frame
禁止使用
frameset
禁止使用
object
禁止使用
param
禁止使用
applet
禁止使用
embed
禁止使用
form
禁止使用
input elements
禁止使用
包括: input, textareaa, select, option

九,首页、列表页、内容页代码,仅供参考

在这里提供首页、列表页、内容页代码,大家复制出来用dreamwever等网页编辑工具新建utf-8 的网页,然后把代码复制到新建的网页中,即可预览MIP改造后的网页。由于代码比较多,我们以附件的形式提供html代码。
首页、列表页、内容页.zip (13.29 KB, 下载次数: 12)
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|IPv6.la(IPv6技术网)

GMT+8, 2021-1-28 12:57 , Processed in 0.240706 second(s), 27 queries .

IPv6.la ©版权所有

© 2021 IPv6.la(IPv6技术网)

快速回复 返回顶部 返回列表