5.如何自定义模板变量

更新时间：2020-06-01 11:22:11 作者：米拓建站

## 了解自定义变量
米拓标签模板自定义变量需通过模板制作助手工具设置，参考[准备工作](https://doc.metinfo.cn/mb/mb/25.html "准备工作")，安装模板制作助手工具；
模板自定义变量分为**公共变量**和**区块自定义变量**，通过自定义变量可设置当前区块调用的内容、展示风格、颜色、字体大小等，例如metv7模板首页产品区块的设置选项
![](../upload/202005/1590657279460389.png)
这些设置选项，就是通过模板制作助手自定义添加。
![](../upload/202005/1590735263377796.png)

## 了解模板制作助手
安装好模板制作助手工具后，登陆网站可视化后台——应用插件——模板制作助手V6（MetInfov6.0以上系统）——选择对应的标签模板，点击“自定义标签”，可设置功能变量或按页面区块设置变量
![](../upload/202005/1590736242144758.png)
- **作用范围：**按照标签使用页面范围，分为全局，首页、列表页、详情页；
- **类型：**可选分区、简短文本、多行文本、单选按钮、栏目选择、上传组件、编辑器、颜色选择器；
- **变量名：**自定义设置，分区的变量名定义后不可修改，在模板代码中可通过`{$lang.变量名}`进行调用，在css文件中通过`$变量名$`进行调用；
- **默认值：**自定义变量默认值；
- **标题：**自定义变量名称；
- **说明：**自定义变量描述文字，用于说明设置；
- **位置：**分区或变量作用范围，分区下的变量需与分区作用范围一致；
- **添加子选项：**点击“添加子选项”按钮，可在当前分区下任意添加多个自定义变量；
- **添加选项：**单选按钮、栏目选择类型变量，需点击“添加选项”按钮，设置单选按钮选项值（单选按钮）、栏目选择范围（栏目选择类型），具体请参考下方“添加选项值”；
- **删除：**区块或自定义变量都支持删除，删除区块则区块下的变量会一起被删除，可点击单个删除或选择多个后点击下方的“删除”按钮，批量删除，若模板文件代码中已引用此设置，请谨慎操作删除。

**【注意】添加的区块或自定义变量需在模板文件`.php`或`.css`代码中引用，否在不显示，或设置无效。在.php的文件中变量名的语法是：`{$lang.变量名}`，比如：`{$lang.nav_ml}`，而.css文件中的语法则是：`$变量名$`，比如：`$color$`，具体可参考下方的示例。**
### 添加选项值
单选、栏目类型的变量，添加后，需点击变量右侧对应的“添加选项”设置选项值
![](../upload/202006/1590979905147944.png)
**单选类型变量：**点击“+”图标，可添加多个选项值，格式：选项文字|值，注意值只能是字母或数字。
![](../upload/202006/1590980040655971.png)
**栏目类型变量：**通过选择的栏目，可调用对应栏目的信息，在添加栏目类型变量时，可通过选项设置，设置栏目的选择范围：**选择所有栏目、只选择一级栏目、只能选择带信息列表的栏目（文章、产品、图片、下载、招聘）。**
![](../upload/202006/1590981359870175.png)

### 修改自定义变量排序
点击分区下的自定义变量列表每行空白区块，按住鼠标左键，上下拖拽即可更改变量排序。
![](../upload/202006/1590981620713539.png)
建议：将常用的设置变量，排序放在前方显示，例如区块开关、区块标题、描述、调用栏目内容等。

## 示例
### 场景1：在模板文件中如何引用自定义分区
#### 分区命名规范：
**公共分区：**公共分区变量名固定为`global`且分区下的自定义的参数，会在网站可视化后台—风格—风格设置中显示；
**自定义分区：**可自定义命名设置，例如首页产品分区`met_index_product`、新闻列表页`met_news`，便于自己区分和记忆即可；
【注意】分区变量名自定义后不可修改。
####场景案例：如何给首页对应区块添加自定义变量
区块对应的变量在对应的分区中，需先在首页中添加对应的分区及子选项
![](../upload/202005/1590742999643598.png)
再到模板首页文件`index.php`中对应区块的代码中通过`m-id="分区变量名"`引用对应的分区，例：m-id="met_index_product"则可在分区中再继续调用对应的子选项，即当前区块的自定义变量。

<div class="met-index-news" m-id="met_index_product">
        .....
    </div>
	
![](../upload/202005/1590743091753539.png)

### 场景2：在模板文件中如何引用自定义变量
**场景案例：**通过自定变量，用户可在区块设置中自定义调整头部导航间距
1.在模板制作助全局——头部区块分区`met_head`中添加自定义变量`nav_ml`
![](../upload/202005/1590737802713362.png)

2.到头部导航对应的模板文件`head.php`中引用自定义变量`{$lang.nav_ml}`代码如下：
    
    <li class='nav-item m-l-{$lang.nav_ml}'>
        <a href="{$m.url}" {$m.urlnew} title="{$m.name}" class="nav-link {$m.class}">{$m._name}</a>
    </li>
	
3.到网站可视化后台——点击头部导航区块的“设置”按钮，可自定义设置导航间距，例如设置为10，保存设置
![](../upload/202005/1590741303290430.png)
前台页面访问的HTML代码：
    
    <li class="nav-item dropdown m-l-10">
       <a href="http://localhost/test6/about/" title="关于我们" target="_self" class="nav-link ">
           <span>关于我们</span>
        </a>
    </li>
    
【注意】当前区块必须引用分区变量名后，才可以在区块的代码中引用当前分区下的自定义变量。

###场景3：在css文件中如何引用公共变量
**场景案例：**通过调用模板公共变量，可一键修改整站字体颜色。
1.在模板制作助全局——公共参数`global`中添加自定义颜色选择器类型变量`first_color`，默认颜色为`#000000`
![](../upload/202005/1590740660287183.png)
【注意】公共参数在网站可视化后台——风格——风格设置中设置。

2.模板文件`static/metinfo.css`中引用自定义变量`$first_color$`代码如下：
    
    a{color:$first_color$;}
	
3.登陆网站可视化后台——风格——风格设置，可自定义设置模板主色调`#1baadb`，为空则默认为`#000000`；
![](../upload/202005/1590741149759709.png)

设置后需在网站可视化后台——常用功能中清空网站缓存，则重新生成的缓存文件`cache/metinfo.css`中可查看到对应的样式代码：

a{color:#1baadb;}
	
【注意】css中调用分区中的自定义变量和调用公共变量的方法一致。

文档中心

米拓学堂

帮助中心

在线交流

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