导航
模板制作首页
系统使用
插件使用
米拓商城
模板制作
应用开发
系统开发
https://doc.metinfo.cn/mb/
1
模板制作首页
标签模板制作教程
6.实现可视化编辑
更新时间：2020-08-18 23:54:59
作者：米拓建站
## 概述： 在模板文件里通过调用模板标签和模板自定义参数，则在可视化界面，页面大部分内容会出现可视化修改图标（纯数字不支持可视化编辑），即可实现可视化编辑，想改哪里点哪里。 ## 实现方法： 要实现可视化编辑和模板制作助手密不可分。 首先想要网站区块可以可视化编辑，重要的是每个区块外层标签加上属性m-id="区块变量名"，每个区块都有唯一的区块变量名，视情况而定给区块外层标签属性m-type=""（请参照下面的【m-id，m-type属性特殊值规范】） ### ①定义区块变量名： 通过模板制作助手工具，进入对应模板自定义标签页面，点击底部的【添加自定义标签】，选择添加【分区】类型参数，自定义设置区块变量名和标题，具体可参考"[如何自定义模板变量](https://doc.metinfo.cn/mb/mb/28.html "如何自定义模板变量")"  ### ②添加属性`m-id`和`m-type` 找到目标区块所在模板文件中的代码位置，在区块代码外层标签上添加`m-id`属性，属性值为第①步中的`区块变量名`。 #### 模板代码： <div class="" m-id='区块变量名' m-type=''>//m-id、m-type属性值请按照下面两个表格的规定进行设置 ....//区块详细代码 </div> //假设区块变量名为met_index_product，则代码为： <div class="" m-id='met_index_product' m-type=''> ....//区块详细代码 </div> 添加完属性后，在可视化编辑界面中，把鼠标移到目标区块中，可看到区块上方正中间有两个按钮--【设置】和【内容】。  区块【设置】和【内容】按钮显示状态与区块外层标签属性`m-id`、`m-type`值的关系： | 按钮 | 控制属性 | 控制属性值 | 显示状态 | | ------------ | ------------ | ------------ | ------------ | | 设置 | m-id |noset | 不显示 | | | | 区块变量名（如果没有区块变量名，可以自定义名称） | 显示| | | | 特殊值（参照下面的规范表） | 显示 | |内容| m-type | nocontent（参照下面的规范表）| 不显示 | | | | 不定义或者为空 | 显示 | | | | 特殊值（参照下面的规范表） | 显示 | 点击区块【设置】按钮，可弹窗展示区块下自定义的变量参数，具体可参考“[如何自定义模板变量](https://doc.metinfo.cn/mb/mb/30.html "如何自定义模板变量")”进行设置； 点击区块【内容】按钮，可编辑区块调用的内容详情，根据`m-type`属性值不同，弹窗设置界面不同。**m-id，m-type属性特殊值规范如下：** #### m-id，m-type属性特殊值规范: | 区块 | m-id，m-type值 | | ------------ | ------------ | | 轮播图 | m-type='banner' | | 头部导航 | m-type='head_nav' | | 头部优化文字 | m-type='head_seo' | | 底部导航 | m-type='foot_nav' | | 底部信息（版权） | m-type='foot' | | 底部手机表单 |m-type='menu' | | 会员 |m-id='member' m-type='member' | | 多语言 | m-id='lang' m-type='lang' | | 在线交流 | m-id='online' m-type='online' | |留言列表 | m-type='message_list' | | 留言表单 |m-id='message_form' m-type='message_form' | | 反馈表单 | m-id='feedback' m-type='feedback' | | 一些不需要显示内容按钮的（比如：二级导航） | m-type='nocontent' |
上一篇
: 5.如何自定义模板变量
下一篇
: 7.实现区块可自由开关
文档中心
米拓学堂
帮助中心
在线交流
{"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"}