7.实现区块可自由开关

更新时间：2020-07-16 09:35:48 作者：米拓建站

## 概述：
通过自定义模板区块开关变量，并在区块代码中通过`if标签`判断变量的值，即可实现区块自由开关，控制区块显示或隐藏。
## 实现方法：
### ①定义区块开关参数
在模板制作助手工具中，对应的区块自定义一个单选按钮类型变量，命名格式建议统一为：`区块名_open`，比如：`met_index_product_open`，并设置对应的选项值，例如`"显示|1"`、`"隐藏|0"`，具体请参考"[如何自定义模板变量](https://doc.metinfo.cn/mb/mb/28.html "如何自定义模板变量")"。
![](../upload/202006/1591665915581681.png)
![](../upload/202006/1591665926607069.png)

**注意：如果模板参数里已经定义了该变量名却不是用于区块开关功能的话，则需另外定义一个区块开关参数变量名。**

### ②模板代码：
找到目标区块在模板文件中对应的代码，在该区块外层的元素之外添加`if标签`判断区块开关参数的值是否为1，并通过`if标签`把该元素包起来。
#### 语法：

<if value="$lang['区块开关变量名'] || $_M['form']['pageset']">//if标签具体语法请参考文档https://doc.metinfo.cn/mb/mbtag/85.html
    //$lang为标签模板自定义参数，通过该参数可调用该区块开关参数，具体解释请参考文档https://doc.metinfo.cn/mb/mbtag/81.html
    //$_M['form']['pageset']为判断当前页面是否处于可视化编辑界面，这样在可视化编辑界面里，不管区块开关参数设置成显示还是隐藏，该区块都会显示出来
    <div class="区块自定义类名" m-id="区块名">
       ...//区块详细代码
    </div>
    </if>

####示例：
以metv7模板首页产品区块为例：

<if value="$lang['met_index_product_open'] || $_M['form']['pageset']">
    <div class="met-index-product" m-id="met_index_product">
       ...//区块详细代码
    </div>
    </if>

登陆网站可视化后台，点击区块可视化【设置】按钮：通过区块参数设置，可控制该区块在前台的隐藏或显示。
![](../upload/202006/1591666212336094.png)

文档中心

米拓学堂

帮助中心

在线交流

{"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"}