导航
模板制作首页
系统使用
插件使用
米拓商城
模板制作
应用开发
系统开发
https://doc.metinfo.cn/mb/
1
模板制作首页
模板标签大全
制作规范
代码规范
更新时间：2020-07-20 09:27:45
作者：米拓建站
## 书写规范 - 行级标签写法必须以`/`结尾，例如：`<include file="head.php"/ >` - 块级标签写法必须有闭合结尾的标签，例如： `<if value="$sex eq 1">男</if>` `<list data="$result">...自定义代码</list>` `<tag action="category" type="head">...自定义代码</tag >` - 在模板标签、html标签包含的代码中使用变量需要用`{}`把变量包起来，变量里的字段需要用` . `来连接，例如：`<h1> {$lang.webname}</h1>` - 在模板标签中传参，参数为变量时使用方式，变量里的字段需要用`['']`把字段名包起来，例如：`<tag cid="$data['classnow']"></tag>` ## 文件声明 **标签模板文件夹下的`static/metinfo.css`文件头部必须加上该声明** ``` /*#文件名称:metinfo.css #米拓企业建站系统 #Copyright (C) 长沙米拓信息技术有限公司 (http://www.metinfo.cn). All rights reserved.*/ ``` **标签模板文件夹下的`static/metinfo.js`文件头部必须加上该声明** ``` /*#文件名称:metinfo.js #米拓企业建站系统 #Copyright (C) 长沙米拓信息技术有限公司 (http://www.metinfo.cn). All rights reserved.*/ ``` **UI所在文件夹下的`index.css`文件头部必须加上该声明** ``` /*#文件名称:index.css #米拓企业建站系统 #Copyright (C) 长沙米拓信息技术有限公司 (http://www.metinfo.cn). All rights reserved.*/ ``` **UI所在文件夹下的`index.js`文件头部必须加上该声明** ``` /*#文件名称:index.js #米拓企业建站系统 #Copyright (C) 长沙米拓信息技术有限公司 (http://www.metinfo.cn). All rights reserved.*/ ``` ## SEO的代码规范以及HTML规范： - 每个页面有且仅有一`<h1>`标签，代码规范如下： ● head_nav需要添加的：  ● 详情页需要这样写：  - img标签要写alt属性，如下代码：  - 自定义属性要以data-开头，如下代码：  - `ul/ol`的直接子元素只能是li，如下代码：  - 首页布局，首页内容区块都用`<section>`，section标签增强seo，内容区块标题都用`<h2>`代码如下：  - section里面要有标题标签： 如果你用了section/aside/article/nav这种标签的话，需要在里面写一个h1/h2/h3之类的标题标签，因为这四个标签可以划分章节，它们都是独立的章节，需要有标题，如果UI里面根本就没有标题呢？那你可以写一个隐藏的标题标签，如果出于SEO的目的，你不能直接display: none，而要用一些特殊的处理方式，如下套一个hidden-text的类。 如下代码：  - html要保持简洁，不要套太多层 - img空src的问题，解决代码如下：  - 类的命名使用小写字母加中划线连接，如下代码：  - 不推荐使用自定义标签，不利于seo - 尽量不使用id，以防冲突 - 不推荐使用属性设置样式，ios的safari上面是不支持的，可以自行实验。但是canvas 例外，以下是错误示例：  - 使用适合的标签： ➢ `<h1>~<h6>`标签的使用，要注意的点如下： ● 每个页面有且只有一个h1标签 ● 首页内容区块标题使用h2标签 ● 首页调用栏目列表的标题使用h3标签 ● 首页调用内容列表的标题使用h4标签 ● 产品，新闻，图片，招聘，下载等内容列表页的标题使用h4标签 ● 内容详情页的标题一级栏目标题使用h3，二级使用h4，三级使用h3 ● 内页二级导航的标题使用h3 ● sidebar内页侧栏一级栏目标题用 ● b标签使用：用于关键词上 ● a标签需要加title属性 ● img标签需要加alt属性 ● 使用html5语义化标签，如导航使用nav，侧边栏使用aside，顶部和尾部使用header/footer，页面比较独立的部分可以使用article，如用户的评论 ● 按钮就应该写一个button或者`<input type=”button”>`，而不是写一个a标签或者其他标签替代设置样式 ● 如果是标题就应该使用标题标签h1/h2/h3，而不是自己写一个`<p class=”title”></p>`，相反如果内容不是标题就不要使用标题标签了 ● 如果是分隔线就使用hr标签，而不是自己写一个border-bottom的样式，使用hr容易进行检查 ● 如果是换行文本就应该使用p标签，而不是写br，因为p标签可以用margin设置行间距，但是如果是长文本的话使用div，因为p标签里面不能有p标签，特别是当数据是后端给的，可能会带有p标签，所以这时容器不能使用p标签。 - 特殊UI需要特殊处理，比如底部导航带有友情链接，应该给友情链接一个开关并且友情链接只能在首页显示； - UI里的设置比较特殊应该在UI描述中说明，比如一些内容手机段不显示之类的； - 头部seo优化代码和底部seo优化代码需要加在头部和底部导航中并且不需要显示在页面中 - 栏目列表和内容列表新窗口打开不能忘 - 栏目列表和友情链接nofollow属性不能忘 - 表单验证 只要表单元素启用了验证，比如不能为空、格式验证，UI就必须加载`form插件`，设置了验证的元素的父元素必须加上class`form-group`。 例如： ```html <form> <div class="form-group"> <input type="text" name="name" required data-fv-notempty="true" data-fv-notempty-message="This is required"/> </div> //'required'以及'data-fv'开头的的属性为表单验证的属性 </form> ``` - 所有图片尽可能的使用lazyload延迟加载方法 系统basic.js会自动执行lazyload函数，不需要模板里自定义执行该函数。 例如： ```html <img data-original="upload/thumb_src/484_300/1515635850.jpg" alt="图片关键词" title="图片关键词"> ``` ## CSS代码规范： css命名规则：类的命名应当使用它所表示的逻辑意义，请勿用拼音命名 颜色修改首先尽量集成模板风格里的设置，然后再给自定义 - 字体大小：首页标题字体大小建议加上字体大小设置，为了风格统一 - 所有css样式类前都需要加$uicss，避免影响其他css - 减少覆盖，看如下示例：  - 少用!important，除非需要覆盖系统样式 - 多写注释，有利于维护 - 不要设置太大的z-index - 合并属性，看如下示例代码：  - 使用了浮动，记得清除浮动 - 不要断词，指一个英文单词不要在两行显示 - 页面禁止左右滑动，一般在内页二级导航没有处理好会出现，还有带有编辑区块没有设置好的时候会出现 ## JS代码规范： - UI模板中的UI里的index.js获取所在区块内dom元素时必须通过METUI['$uicss']去获取，以免污染全局，比如如下代码： ```js //METUI['$uicss']等于$('.$uicss')：当前区块的dom，.$uicss：当前区块的类名 var list=METUI['$uicss'].find('.index-product-list'); ``` - 所有的调试代码（`console、alert`）上线前必须删除 - 注意选择器性能问题，看如下代码：  - 尽量不要在JS里面写CSS
上一篇
: lang 多语言列表
下一篇
: 引入css、js文件
文档中心
米拓学堂
帮助中心
在线交流
{"status":1,"html":"<style type=\"text\/css\">\r\n.onlinebox_three{border:2px solid;}\r\n.onlinebox_three .onlinebox_three_list{width: 160px;padding: 10px 0px;}\r\n.onlinebox_three .online-item{margin-bottom: 5px; padding: 0px 17px; position: relative;display: block;color: #666;}\r\n.onlinebox_three .online-item:last-child{margin-bottom: 0px;}\r\n.onlinebox_three .online-item:hover{background: #f8f8f8;}\r\n.onlinebox_three .online-item i{font-size: 16px;}\r\n.onlinebox_three .onlinebox-open{font-size: 22px;display:none;cursor: pointer;padding: 0 10px; font-size: 18px; line-height: 40px;}\r\n.onlinebox.min .onlinebox-open{display:block;padding:0 10px;background:#444;font-size:18px;line-height:40px;color:#fff}\r\n.onlinebox .onlinebox-min{position: relative;top:-4px;}\r\n@media (max-width: 767px){\r\n.onlinebox_three .online-item{font-size: 12px;padding-top: 6px;}\r\n.onlinebox_three .online-item i{font-size: 14px;}\r\n}\r\n<\/style>\r\n<div id='onlinebox' class=\"onlinebox onlinebox_three hide\" m-type='online' m-id='online' style=\"border-color:#1baadb;\">\r\n <div class=\"onlinebox-open\" style=\"background:#1baadb;\"><i class=\"fa fa-comments-o\"><\/i><\/div>\r\n <div class=\"onlinebox-box\">\r\n <div class=\"onlinebox-top\" style=\"background:#1baadb;\">\r\n <div class=\"onlinebox-top-btn font-size-26\">\r\n <a href=\"javascript:;\" class=\"onlinebox-close\" title=\"\">×<\/a>\r\n <a href=\"javascript:;\" class=\"onlinebox-min\">-<\/a>\r\n <\/div>\r\n <h4>在线交流<\/h4>\r\n <\/div>\r\n <div class=\"met-editor onlinebox-bottom p-x-10 p-y-5\"><p style=\"text-align: center;\">\r\n <img src=\"..\/upload\/202001\/1579417409303256.png\" data-width=\"120\" width=\"120\" data-height=\"120\" height=\"120\" title=\"\"\/>\r\n<\/p>\r\n<p style=\"text-align: center;\">\r\n 微信公众号\r\n<\/p>\r\n<p style=\"text-align:center;\">\r\n <img src=\"..\/upload\/202001\/1579417452544806.png\" data-width=\"150\" width=\"150\" data-height=\"150\" height=\"150\" title=\"\"\/>\r\n<\/p>\r\n<p style=\"text-align: center;\">\r\n QQ交流群\r\n<\/p><\/div>\r\n <\/div>\r\n<\/div>","t":"4","x":"10","y":"130"}