四、模板标签-MetInfo帮助中心

[TOC]
## 栏目调用
### 头部导航，底部导航，以及传参调用栏目
例如：
    
	// 渲染头部导航列表
    <tag action="category" type="head" class="active" hide="关于我们">
		<if value="!$m['hide']">// 对应tag标签传的hide参数
		<li class="{$m.class}">
			<a href="{$m.url}" title="{$m.name}">{$m._name}</a>
		</li>
		</if>
	</tag>
	如果当前页面栏目id等于【产品中心】栏目id，则该列表中【产品中心】所在的<li>标签会自动加上类名active
	hide参数传的名称包含某些头部导航栏目名称，则这些栏目名称就不会显示在头部导航（需要标签<if value="!$m['hide']">配合）
- #### 传入参数

|参数名|是否必填|默认值|说明|
|:----    |:-------    |:---|:---|
|action|是 |null|指定调用的方法(category)
|type|否 |head|head=头部导航数据，foot=底部导航数据，son=获取子栏目数据，current=获取cid传入的栏目数据
|cid|当 type 为 son 或者 current 时必须设置该参数 |0|指定调定栏目的ID
|class|否|空|列表输出的栏目id等于当前页面栏目id时该栏目要添加的高亮样式类名
|hide|否|空|用于隐藏不需要显示的子栏目的名称，多个栏目名称以丨分割，填写格式为：xxx丨xxx

- #### 返回$m数组所包含的数据，调用语法：{$m.字段名称}

|  字段名称 |  含义 |
| ------------ | ------------ |
| id  |  栏目ID |
| name  | 栏目名称  |
| _name  | 带栏目自定义样式的栏目名称  |
| namemark  |  栏目名称修饰文字 |
| url  | 栏目链接地址  |
| bigclass  |  上级栏目id |
| urlnew  |  是否新窗口打开栏目链接 |
| nofollow  |  是否向栏目链接网址传递权重（0为传递，1为不传递，默认传递） |
| module  | 栏目所属模块标识 |
| classtype  | 栏目级别，存在三种级别，分别为1、2、3  |
| ctitle  | 栏目页面标题 |
| keywords  |  简短关键字 |
| description  |  简短描述文字 |
| content  | 栏目内容，简介模块才有内容。 |
| index_num  | 栏目标识（栏目风格） |
| namemark  | 栏目修饰名称 |
| indeximg  |  栏目标识图片路径 |
| columnimg  |  栏目图片路径 |
| icon  | 栏目图标  |
| other_info  |  栏目其他信息 |
| custom_info  |  自定义栏目信息 |
| sub  |  用于判断是否存在下级，存在为1，不存在为0 |
| _index  |  索引，从0开始|
| _first  |  用于判断是否为第一个|
| _last  |  用户判断是否为后一个|

## 信息列表与模块参数
### 栏目下的信息列表
下面示例代码一般用与首页

<ul>
    	<tag action="list" cid="3" num="6" >
    		<li>
    			<a href="{$v.url}" title="链接关键词">{$v._title}</a>
    		</li>
    	</tag>
    </ul>
	
	
配合栏目使用
    
    <ul>
        <tag action="category" type="son" cid="3">
            <tag action="list" cid="$m['id']" num="6" type="new">
                <li>
                	<a href="{$v.url}" title="链接关键词">{$v._title}</a>
                </li>
            </tag>
        </tag>
    </ul>
- #### 传入参数

|参数名|是否必填|默认值|说明|
|:----    |:-------    |:---|:---|
|action|是 |null|指定调用的方法(list)
|cid|是|0|指定调用栏目的ID
|num|否|10|指定栏目的内容列表的大条数
|type|否|all|指定内容列表的内容类型，all=全部,com=推荐
|para|否|false|用于产品、图片、下载模块栏目的内容列表调用产品、图片、下载参数，调用时为true

- #### 返回$v数组所包含的数据，调用语法：{$v.字段名称}

|  字段名称 |  含义 |
| ------------ | ------------ |
|  id |  信息ID |
|  title | 信息标题  |
| _title  | 带自定义样式的信息标题  |
|  description | 简短描述文字|
|keywords|关键词|
|class1|所属一级栏目ID|
|class2|所属二级栏目ID|
|class3|所属三级栏目ID|
|imgurl|图片路径地址（产品、文字、图片模块的栏目专属）|
|updatetime|更新时间|
|content|详情内容1|
|content1|详情内容2（产品模块的栏目专属）|
|content2|详情内容3（产品模块的栏目专属）|
|content3|详情内容4（产品模块的栏目专属）|
|content4|详情内容5（产品模块的栏目专属）|
|displayimgs|展示图片列表（产品、图片模块的栏目专属）|
|addtime|发布时间 作用于[产品、文章、图片、下载模块]|
|tag|标签|
|hits|点击量（产品、文章、图片的栏目专属）|
|top_ok|判断内容是否置顶|
|com_ok|判断内容是否推荐|
|ctitle|自定义页面title|
|other_info|其他信息|
|custom_info|自定义信息|
| sub  |  用于判断数组长度|
| _index  |  当前内容的下标，从0开始|
| _first  |  用于判断是否为第一个|
| _last  |  用户判断是否为后一个|

### 模块参数
下面介绍一些模块特有的参数，以及每个模块调用方式
#### 简介模块show.php
> 简介模块页面信息数组，包括了简介模块页面所需要的信息，只能在简介模块页面中有效。

调用内容模块代码
    
    <section class="met-editor">// 调用通过编辑器编辑的内容所对应的字段，都要在内容的复父元素上添加类名met-editor
    		{$data.content}
    </section>
	
> **返回$data数组所包含的数据，调用语法：{$data.字段名称}**

| 名称  |  含义 |
| ------------ | ------------ |
|  id | 当前页面所属栏目ID  |
|name   |  栏目名称 |
| _name  | 带自定义样式的栏目名称  |
|module|模块标识，简介模块为1|
|class1|所属一级栏目ID|
|class2|所属二级栏目ID|
|class3|所属三级栏目ID|
|bigclass|上级栏目ID|
|classtype|所属栏目级别，分别为1、2、3|
|content|内容|
|keywords|关键词|
|description|简短描述|
|index_num|栏目标识，一般用于同一个模块通过栏目标识来判断显示不同的内容和样式|
|icon|栏目图标|
|tag|tag标签|
|ctitle|自定义页面title|
|other_info|其他信息|
|custom_info|自定义信息|

#### 文章模块news.php
文章模块列表信息数组。
    
    <tag action="news.list" num="$c[met_news_list]" cid="$data['classnow']">
	<a href="{$v.url}" title="{$v.title}" {$g.urlnew}>{$v._title}</a>
	</tag> //调用文章信息列表
	
> **传入参数**

|参数名|是否必填|默认值|说明|
|:----    |:-------    |:---|:---|
|action|是 |null|指定调用的方法(news.list)
|num|是|默认为父级栏目或者系统设置的显示条数，此处应手动传入$c[met_news_list]——可视化导航栏-【当前页设置】里的列表显示条数】|指定列表调用内容的大数量
|cid|否|$data['classnow']|列表调用内容的栏目id|

> **返回$v数组所包含的数据，调用语法：{$v.字段名称}**

| 名称  | 含义  |
| ------------ | ------------ |
|  id | 文章ID  |
| title  | 文章标题  |
| _title  | 带自定义样式的信息标题  |
|class1|所属一级栏目ID|
|class2|所属二级栏目ID|
|class3|所属三级栏目ID|
|keywords|关键词|
|description|简短描述|
|content|文章内容|
|imgurl|封面图片路径|
|com_ok|是否为推荐文章，1为推荐0为没有推荐|
|top_ok|是否为置顶文章，1为置顶0为没有置顶|
|issue|发布人|
|hits|点击次数|
|updatetime|更新时间|
|url|当前文章链接地址URL|
|ctitle|自定义页面title|
|other_info|其他信息|
|custom_info|自定义信息|
| sub  |  用于判断数组长度|
| _index  |  当前内容的下标，从0开始|
| _first  |  用于判断是否为第一个|
| _last  |  用户判断是否为后一个|

底下配合 <pager></pager> 就可以实现翻页的效果。

#### 产品模块product.php
产品模块列表信息数组

<tag action="product.list" num="$c[met_product_list]" cid="$data['classnow']">
	<a href="{$v.url}" title="{$v.title}" {$g.urlnew}>{$v._title}</a>
	</tag> //调用产品模块列表
	
> **传入参数**

|参数名|是否必填|默认值|说明|
|:----    |:-------    |:---|:---|
|action|是 |null|指定调用的方法(product.list)
|num|是|默认为父级栏目或者系统设置的显示条数，此处应手动传入$c[met_product_list]——可视化导航栏-【当前页设置】里的列表显示条数】|指定列表调用内容的大数量
|cid|否|$data['classnow']|列表调用内容的栏目id|

> **返回$v数组所包含的数据，调用语法：{$v.字段名称}**

| 名称  | 含义  |
| ------------ | ------------ |
|  id | 信息ID  |
| title  | 信息标题  |
| _title  | 带自定义样式的信息标题  |
|class1|所属一级栏目ID|
|class2|所属二级栏目ID|
|class3|所属三级栏目ID|
|keywords|关键词|
|description|简短描述|
|content|详情内容|
|content1|详情内容2|
|content2|详情内容3|
|content3|详情内容4|
|content4|详情内容5|
|imgurl|封面图片路径|
|displayimgs|展示图片路径，返回一个数组|
|para|产品参数，返回一个数组|
|com_ok|是否为推荐列表，1为推荐0为没有推荐|
|top_ok|是否为置顶列表，1为置顶0为没有置顶|
|hits|点击次数|
|updatetime|更新时间|
|addtime|发布时间|
|url|信息内容页链接地址URL|
| sub  |  用于判断数组长度|
| _index  |  当前内容的下标，从0开始|
| _first  |  用于判断是否为第一个|
| _last  |  用户判断是否为后一个|

底下配合 <pager></pager> 就可以实现翻页的效果。

> **产品参数的调用**

列表页调用产品参数
    
    <tag action='product.list' num="$c[met_product_list]">
    	<list data="$v['para']"  name='$para'>
    		<if value="$para[value]">
    			<p>{$para.name}:{$para.value}</p>
    		</if>
    	</list>
    </tag>
详情页调用产品参数

<list data="$data['para']" name="$para" num='100'>
    	<if value="$para[value]">
    		<li class="p-x-0 p-r-15">
    			<span>{$para.name}：{$para.value}</span>
    		</li>
    	</if>
    </list>
	// 类型为链接类型的参数这样渲染
	<list data="$data['para_url']" name="$s" num='100'>
	<if value="$s['value']">
	<a href="{$s.value}" class="btn btn-danger linkbtn m-r-20 m-t-10" target="_blank" title="链接关键词">{$s.name}</a>
	</if>
	</list>
首页调用产品参数

<tag action="list" cid="3" para="true">
    	<list data="$v['para']" name="$para">
    		<span class="pricing-currency">{$para.name}:{$para.value}</span>
    	</list>
    </tag>
    
	
产品详情页图片数组的调用

<list data="$data['displayimgs']" name="$s">
    	<img src="{$s.img}"  alt='{$s.title}' />
    </list>
	
#### 下载模块download.php
下载模块列表信息数组
    
    <tag action="download.list" num="$c[met_download_list]" cid="$data['classnow']">
	<a href="{$v.url}" title="{$v.title}" {$g.urlnew}>{$v._title}</a>
	</tag> //调用下载模块列表
	
> **传入参数**

|参数名|是否必填|默认值|说明|
|:----    |:-------    |:---|:---|
|action|是 |null|指定调用的方法(download.list)
|num|是|默认为父级栏目或者系统设置的显示条数，此处应手动传入$c['met_download_list']——可视化导航栏-【当前页设置】里的列表显示条数】|指定列表调用内容的大数量
|cid|否|$data['classnow']|列表调用内容的栏目id|
> **返回$v数组所包含的数据，调用语法：{$v.字段名称}**

| 名称  | 含义  |
| ------------ | ------------ |
|  id | 信息ID  |
| title  | 信息标题  |
| _title  | 带自定义样式的信息标题  |
|class1|所属一级栏目ID|
|class2|所属二级栏目ID|
|class3|所属三级栏目ID|
|downloadurl|下载地址|
|filesize|文件大小，kb|
|para|产品参数，返回一个数组|
|keywords|关键词|
|description|简短描述|
|content|信息内容|
|com_ok|是否为推荐列表，1为推荐0为没有推荐|
|top_ok|是否为置顶列表，1为置顶0为没有置顶|
|updatetime|更新时间|
|addtime|发布时间|
|url|信息内容页链接地址URL|
| sub  |  用于判断数组长度|
| _index  |  当前内容的下标，从0开始|
| _first  |  用于判断是否为第一个|
| _last  |  用户判断是否为后一个|

底下配合 <pager></pager> 就可以实现翻页的效果。

> **列表页调用下载参数**
    
    <tag action='download.list' num="$c[met_download_list]">
    	<list data="$v['para']"  name='$para'>
    		<if value="$para[value]">
    			<p>{$para.name}:{$para.value}</p>
    		</if>
    	</list>
    </tag>
	
> **详情页调用下载参数**
    
    <list data="$data['para']" name="$para">
    	<if value="$para[value]">
    		<li class="p-x-0 p-r-15">
    			<span>{$para.name}：{$para.value}</span>
    		</li>
    	</if>
    </list>
	
> **首页调用下载参数**
    
    <tag action="list" cid="3" para="true">
    	<list data="$v['para']" name="$para">
    		<span class="pricing-currency">{$para.name}:{$para.value}</span>
    	</list>
    </tag>
#### 图片模块img.php
图片模块列表信息数组

<tag action="img.list" num="$c[met_img_list]" cid="$data['classnow']">
	<a href="{$v.url}" title="{$v.title}" {$g.urlnew}>{$v._title}</a>
	</tag> //调用图片模块列表
	
> **传入参数**

|参数名|是否必填|默认值|说明|
|:----    |:-------    |:---|:---|
|action|是 |null|指定调用的方法(img.list)
|num|是|默认为父级栏目或者系统设置的显示条数，此处应手动传入$c['met_img_list']——可视化导航栏-【当前页设置】里的列表显示条数】|指定列表调用内容的大数量
|cid|否|$data['classnow']|列表调用内容的栏目id|

> **返回$v数组所包含的数据，调用语法：{$v.字段名称}**

| 名称  | 含义  |
| ------------ | ------------ |
|  id | 信息ID  |
| title  | 信息标题  |
| _title  | 带自定义样式的信息标题  |
|keywords|关键词|
|description|简短描述|
|content|信息内容|
|class1|所属一级栏目ID|
|class2|所属二级栏目ID|
|class3|所属三级栏目ID|
|imgurl|封面图片路径|
|displayimgs|展示图片路径，返回一个数组|
|para|图片参数，返回一个数组|
|com_ok|是否为推荐列表，1为推荐0为没有推荐|
|top_ok|是否为置顶列表，1为置顶0为没有置顶|
|hits|点击次数|
|updatetime|更新时间|
|addtime|发布时间|
|url|信息内容页链接地址URL|
| sub  |  用于判断数组长度|
| _index  |  当前内容的下标，从0开始|
| _first  |  用于判断是否为第一个|
| _last  |  用户判断是否为后一个|

底下配合 <pager></pager> 就可以实现翻页的效果。

> **图片参数的调用**

列表页调用图片模块参数
    
    <tag action='img.list' num="$c[met_img_list]">
    	<list data="$v['para']"  name='$para'>
    		<if value="$para[value]">
    			<p>{$para.name}:{$para.value}</p>
    		</if>
    	</list>
    </tag>
详情页调用图片模块参数

<list data="$data['para']" name="$para">
    	<if value="$para[value]">
    		<li class="p-x-0 p-r-15">
    			<span>{$para.name}：{$para.value}</span>
    		</li>
    	</if>
    </list>
首页调用图片模块参数

<tag action="list" cid="3" para="true">
    	<list data="$v['para']" name="$para">
    		<span class="pricing-currency">{$para.name}:{$para.value}</span>
    	</list>
    </tag>
    
	
图片模块展示图片数组的调用

#### 招聘job.php
招聘模块列表信息数组

<tag action="job.list" num="$c['met_job_list']" cid="$data['classnow']"></tag>
    <list data="$result" name="$v">
	<div>
		<h4>{$v._position}</h4>
		<p>
			<span>{$v.addtime}</span>
			<span>{$v.place}</span>
			<span>{$v.count}</span>
			<span>{$v.deal}</span>
		</p>
		<div class="met-editor">
			{$v.content}
		</div>
	</div>
	<hr>
	<div class="card-body-footer m-t-0">
		<a class="btn btn-outline btn-squared btn-primary met-job-cvbtn" href="javascript:;" data-toggle="modal" data-target="#met-job-cv{$v._index}" data-jobid="{$v.id}" data-cvurl="cv.php?lang=cn&selected" title="链接关键词">{$ui.cvtitle}</a>
	</div>
	<div class="modal fade modal-primary" id="met-job-cv{$v._index}">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">{$ui.cvtitle}</h4>
                </div>
                <div class="modal-body">
                    <tag action='job.form' cid="$v['id']"></tag>
                </div>
            </div>
        </div>
    </div>
	</list> //调用招聘模块列表
> **传入参数**

|参数名|是否必填|默认值|说明|
|:----    |:-------    |:---|:---|
|action|是 |null|指定调用的方法(job.list:招聘列表，job.form：招聘表单)
|num|是|默认为父级栏目或者系统设置的显示条数，此处应手动传入$c['met_job_list']——可视化导航栏-【当前页设置】里的列表显示条数】|指定列表调用内容的大数量
|cid|否|$data['classnow']|列表调用内容的栏目id|

> **返回$v数组所包含的数据，调用语法：{$v.字段名称}**

| 名称  | 含义  |
| ------------ | ------------ |
|  id | 信息ID  |
| position  | 招聘职位  |
| _position  | 带自定义样式的招聘职位  |
|count|招聘人数|
|place|招聘地点|
|deal|职位薪资|
|content|详情内容|
|addtime|发布时间|
|url|信息内容页链接地址URL|
| sub  |  用于判断数组长度|
| _index  |  当前内容的下标，从0开始|
| _first  |  用于判断是否为第一个|
| _last  |  用户判断是否为后一个|
	
> **调用招聘表单**

<tag action="job.form" cid="$v['id']"></tag> //调用招聘表单，为固定模式

#### 反馈表单feedback.php
    
    <tag action="feedback.form"></tag> //调用反馈表单,固定样式
	
其他页面调用反馈表单

<tag action="feedback.form" cid="8"></tag> //8为反馈表单的栏目ID
	
#### 在线留言message.php
在线留言表单

<tag action="message.form"></tag> //调用留言表单
    
留言信息列表，`$c['met_message_list']`分页条数，可自定义

<tag action="message.list" num="$c['met_message_list']" cid="$data['classnow']"></tag> //调用留言列表
	
其他页面调用留言表单
    
    <tag action="message.form" cid="8"></tag> //8为留言表单的栏目ID
	
#### 站内搜索search.php
    
	// 搜索表单
	<tag action="search.global"></tag>全局搜索，可以放首页和头部
	<tag action="search.column"></tag>当前栏目搜索，不能放首页
	<tag action="search.advanced"></tag>高级搜索，放哪里都可以
	//调用搜索结果的信息列表
    <tag action='search.list'></tag>
	
> **返回$v数组所包含的数据，调用语法：{$v.字段名称}**

|  名称 | 含义  |
| ------------ | ------------ |
|title   |  列表标题 |
| content  |  列表内容 |
| url  |  列表URL |
| updatetime  |  列表更新时间 |
| sub  |  用于判断数组长度|
| _index  |  当前内容的下标，从0开始|
| _first  |  用于判断是否为第一个|
| _last  |  用户判断是否为后一个|

## 参数搜索
适用于产品模块，图片模块，下载模块
参数字段类型必须为下拉，单选或者多选

<tag action='search.option' type="page" order="1"></tag>
    	<list data="$search['para']" name="$type">
    		{$type.name}：//参数名称
    		<ul>
    			<list data="$type['list']" name="$attr" >
    				<li class="{$attr.check}"><a href="{$attr.url}" title="链接关键词">{$attr.name}</a></li>//参数类型
    			</list>
    		</ul>
    	</list>
		
## 列表排序
```
    <tag action='search.option' type="page" order="1"></tag>
    <ul>
    		<list data="$search['order']" name="$res">
    			<li><a href="{$res.url}" title="链接关键词">{$res.name}<i class="icon wb-triangle-up" aria-hidden="true"></i></a></li>
    		</list>
    </ul>
order取值：
1：更新时间
2：发布时间
3：访问量
```
## 特殊变量
**`模板中自定义变量名称不能和这些特殊变量相同，否则会冲突报错`**
### 当前页面参数$data
> 语法{$data.参数名称}
    
    <?php
    	dump($data);/可以打印出来看里面有哪些参数
    ?>
#### 常用的$data参数

| 名称  |  含义 |
| ------------ | ------------ |
| class1  | 当前页面所属的一级栏目ID  |
| class2  | 当前页面所属的二级栏目ID  |
| class3  | 当前页面所属的三级栏目ID  |
|classnow|当前页面所属的栏目ID|
|sub|当前栏目页面的子栏目条数|
|module|当前页面的所属模块|
|bigclass|当前页面所属的上级栏目ID|
|page|当前页面所属分页（一般用于列表页）|
|url|当前页面的URL|
|name|当前页面的栏目名称（只有栏目页才有，详情页没有）|
|title|当前页面的内容名称（只有详情页才有，栏目页没有）|
|contents|详情内容选项卡名称（数组，产品模块的栏目详情页专属）|
|content|详情内容1（只有详情页才有）|
|content1|详情内容2（产品模块的栏目详情页专属）|
|content2|详情内容3（产品模块的栏目详情页专属）|
|content3|详情内容4（产品模块的栏目详情页专属）|
|content4|详情内容5（产品模块的栏目详情页专属）|
|imgurl|封面图片路径（文章、产品、图片模块的栏目详情页专属）|
|displayimgs|展示图片路径，返回一个数组（产品、图片模块的栏目详情页专属）|
|para|产品参数，返回一个数组（产品、图片、下载模块的栏目详情页专属）|
|keywords|关键词|
|description|简短描述|
|index_num|栏目标识，一般用于同一个模块通过栏目标识来判断显示不同的内容和样式|
|icon|栏目页图标|
|tag|tag标签|

### 语言文字参数$word
> 语法{$word.参数名称}

语言参数都是可以修改的。修改的位置：可视化页面导航栏【多语言】-【网站语言】-当前语言站点【编辑参数】

问：哪些是语言参数？
1、一般的提示信息；
2、分页文字及首页文字；

### 系统设置参数$c
> 语法{$c.参数名称}

下面例举一些常用的语言参数

| 名称  |  含义 |
| ------------ | ------------ |
| index_url  | 首页URL  |
| met_weburl  | 网站根地址  |
|  met_webname |  网站名称 |
|  met_logo |  网站logo |
|met_footaddress|可视化界面导航栏【基本信息】中的地址邮编|
|met_footright|可视化界面导航栏【基本信息】中的版权信息|
|met_foottel|可视化界面导航栏【基本信息】中的联系方式|
|met_footother|可视化界面导航栏【基本信息】中的其他信息|
|met_logo_keyword|可视化界面导航栏【SEO】-【参数设置】中的【Logo关键词】，用于设置logo图片img标签上的alt值|
|met_404content|可视化界面导航栏【SEO】-【参数设置】中的【404 页面内容】|
|met_data_null|可视化界面导航栏【SEO】-【参数设置】中的【无内容提示文字】，列表或者详情页等无内容时可调用此参数|
### 模板公共参数$g
> 语法{$g.参数名称}，在可视化界面导航栏【风格】-【风格设置】里设置

常用的模板公共参数

| 名称  |  含义 |
| ------------ | ------------ |
| urlnew  | 内容列表的链接打开方式（当前窗口或新窗口打开）  |
### 系统路径参数$url
> 语法{$url.参数名称}

常用的系统路径参数

| 名称  |  含义 |
| ------------ | ------------ |
| site  | 网站根地址相对路径  |
|web_site|网站根地址绝对路径|
|member|会员中心地址|
|login|会员中心登录地址|
|register|会员中心注册地址|
|login_out|会员中心退出登录地址|

### 标签模板参数$lang
> 语法{$lang.参数名称}

标签模板专用，调用模板所有自定义参数（包括模板公共参数），可在模板制作助手里设置

###模板中其他变量
```
$result：前一个<tag>或<list>标签输出的所有数据
$sub：前一个<tag>或<list>标签输出的所有数据的条数
$column：系统栏目数据
```

### css变量参数
> 语法$变量名称$
标签模板中，变量名称可以调用所有的模板自定义参数，包括模板公共参数
商业模板中，变量名称可以调用当前区块的UI自定义的参数和模板公共参数

p{ color:$titlecolor$;}
	
## 模板标签

### list
- #### 用法

```html
<list data="$array" name="$val"> //传入一个数组，循环
	<li><a href="{$val.url}" title="链接关键词">{$val.title}</a></li>
</list>
```
- #### 传入参数

|参数名|是否必填|默认值|说明|
|:----    |:-------    |:---|:---|
|data|是 |null|要循环的数组
|name|否 |$val|模板中使用的变量名，如传入的是 $a, 模板中使用如 $a.title
|num|否|10|数组循环数量

- #### 返回参数

|参数名|类型|说明|
|:---- |:---|:---|
|数组自身数据|||
|_index|int|索引，从0开始
|_first|boolean|是否为第一条
|_last|boolean|是否为后一条

### if else elseif
- #### 用法

```html
<if value="$data['classnow'] eq 3">
产品模块
<elseif value="$data['classnow'] eq 2" />
新闻模块
<else/>
其他模块
</if>

比较运算符号需要转换成以下字符
'<>' => 'neq',
'=='  => 'eq',
'>'  => 'gt',
'>=' => 'egt',
'<'  => 'lt',
'<=' => 'elt'
```
- #### 传入参数

|参数名|是否必填|默认值|说明|
|:----    |:-------    |:---|:---|
|value|是 |string|表达式
### location 面包屑导航
```html
<location>
	<if value="$v">
	<li><a href="{$v.url}" title="链接关键词">{$v.name}</a></li>
	</if>
</location>
```

### pager 列表页分页标签
```html
<pager/>
产品模块列表页要传参数type="$c['met_product_page']"
<pager type="$c['met_product_page']"/>
图片模块列表页要传参数type="$c['met_img_page']"
<pager type="$c['met_img_page']"/>
```

### pagination 详情页上一页下一页
```html
<pagination/>
```
### lang 调用语言栏
```html
<lang>
	<a href="{$v.met_weburl}" title="{$v.name}" <if value="$v['newwindows']">target="_blank"</if>>
	<if value="$lang['langlist1_icon_ok']">
	<img src="{$v.flag}" alt="{$v.name}" width="20" title="MetInfo帮助教程|MetInfo使用手册|MetInfo模板制作教程|MetInfo应用开发教程">
	</if>
	<span>{$v.name}</span>
	</a>
</lang>
```
`这里只把所有语言列出来，制作时要参考这个规则：只有单个语言站时不显示语言栏，有两个语言站显示另一语言的链接，有超过2个语言站时显示下拉列表，链接要判断是否新窗口打开（$v['newwindows']）`
### banner调用
```html
	// 简单版（包含pc、手机端图片，图片跳转链接，pc、平板、手机端图片高度）
	// 手机端的图片默认值为pc端设置的值
	<tag action='banner.list'>
    <div class="slick-slide">
		<if value="$v['img_link']">
		<a href="{$v.img_link}" title="{$v.img_des}" <if value="$v['target']">target="_blank"</if>></a>
		</if>
        <img class="cover-image" src="{$v.img_path}" srcset='{$v.mobile_img_path|thumb:767} 767w,{$v.img_path}' sizes="(max-width: 767px) 767px" alt="{$v.img_title}" data-height='{$v.height}|{$v.height_t}|{$v.height_m}' >
	</div>
	</tag>
	
	// 完整版（包含pc、手机端图片，图片跳转链接，pc、平板、手机端图片高度，图片标题、描述（pc和手机端两端设置），文字位置（pc和手机端两端设置），banner按钮）
	// 手机端的图片、图片标题、描述、文字位置的默认值为pc端对应设置的值
	// 制作时以完整版为准，要配合css、js才能把功能展示完整，具体请参考metv7模板
   <tag action='banner.list'>
    <div class="slick-slide">
        <img class="cover-image" src="{$v.img_path}" srcset='{$v.mobile_img_path|thumb:767} 767w,{$v.img_path}' sizes="(max-width: 767px) 767px" alt="{$v.img_title}" data-height='{$v.height}|{$v.height_t}|{$v.height_m}' >
        <div class="banner-text w-full h-100p" data-position="p-{$v.img_text_position}|p-{$v.img_text_position_mobile}" met-imgmask>
            <if value="$v['img_link']">
            <a href="{$v.img_link}" title="{$v.img_des}" <if value="$v['target']">target="_blank"</if> class="block w-full h-100p"></a>
            </if>
            <div class='container h-100p'>
                <div class='banner-text-con'>
					//banner文字
                    <div class="text-con">
                        <h4 class="animation-slide-top font-weight-500 m-t-0 <if value="$v['img_title_mobile']">hidden-sm-down</if>" style="color:{$v.img_title_color};font-size:{$v.img_title_fontsize}px;">{$v.img_title}</h4>
                        <if value="$v['img_title_mobile']">
                        <h4 class="animation-slide-top font-weight-500 m-t-0 hidden-md-up" style="color:{$v.img_title_color_mobile};font-size:{$v.img_title_fontsize_mobile}px;">{$v.img_title_mobile}</h4>
                        </if>
                        <p class="animation-slide-bottom m-b-0 <if value="$v['img_des_mobile']">hidden-sm-down</if>" style='color:{$v.img_des_color};font-size:{$v.img_des_fontsize}px;'>{$v.img_des}</p>
                        <if value="$v['img_des_mobile']">
                        <p class="animation-slide-bottom m-b-0 hidden-md-up" style='color:{$v.img_des_color_mobile};font-size:{$v.img_des_fontsize_mobile}px;'>{$v.img_des_mobile}</p>
                        </if>
                    </div>
					//banner按钮
                    <if value="count($v['button'])">
                    <div class="m-t-15 animation-slide-bottom banner-btn">
                        <list data="$v['button']" name="$a">
                        <?php
                        $a['is_mobile']=$a['is_mobile']?($a['is_mobile']>1?'hidden-md-up':'hidden-sm-down'):'';
                        ?>
                        <a href="{$a.but_url}" title="{$a.but_text}" <if value="$a['target']">target="_blank"</if> data-style="{$a.but_color}|{$a.but_text_color}|{$a.but_hover_color}|{$a.but_text_hover_color}" class="btn btn-primary btn-outline m-y-5 m-x-10 p-y-0 {$a.is_mobile}" style="width:{$a.but_x}px;height:{$a.but_y}px;line-height:{$a.but_y}px;background:{$a.but_color};border-color:{$a.but_color};color:{$a.but_text_color};font-size:{$a.but_text_size}px;">{$a.but_text}</a>
                        </list>
                    </div>
                    </if>
                </div>
            </div>
        </div>
    </div>
    </tag>
```
> **返回$v数组所包含的数据，调用语法：{$v.字段名称}**

| 名称  |  含义 |
| ------------ | ------------ |
| img_path  |  banner图片路径 |
| mobile_img_path  |  banner图片路径 |
|height|电脑端banner固定高度，需要模板支持，默认不固定|
|height_t|平板端banner固定高度，需要模板支持，默认不固定|
|height_m|手机端banner固定高度，需要模板支持，默认不固定|
|  img_link | banner自定义链接地址  |
|  img_title | banner标题  |
|  img_title_mobile | banner手机端标题  |
|img_title_color|banner标题颜色，需要配合css使用|
|  img_des | banner描述，需要配合css使用  |
|  img_des_mobile | banner手机端描述，需要配合css使用  |
|img_des_color|banner描述文字颜色|
|img_text_position|文字位置，需要配合css使用|
|img_text_position_mobile|手机端文字位置，需要配合css使用|
|button|banner按钮，可以有多个，是一个数组|

> **$v['button']数组循环输出的单个按钮所包含的数据**

| 名称  |  含义 |
| ------------ | ------------ |
| but_text  |  按钮文字 |
| but_url  |  按钮链接 |
| but_text_size  |  按钮文字大小 |
| but_text_color  |  按钮文字颜色 |
| but_text_hover_color  |  按钮文字鼠标经过颜色 |
| but_color  |  按钮背景颜色 |
| but_hover_color  |  按钮背景鼠标经过颜色 |
| but_x  |  按钮宽度 |
| but_y  |  按钮高度 |
| is_mobile  |  按钮在哪个终端显示，0为都显示，1为只显示在PC端，2为只显示在手机端，默认都显示|
|target|点击按钮是否新窗口打开，1为新窗口打开，0为当前窗口打开，默认当前窗口打开|

###会员中心下拉菜单应用列表
包含商城、流程系统等应用的前台页面链接，不包括个人信息、账号安全、退出登录。
```html
<tag action="app_column" name="$v">
// $v.active：高亮样式
<li class='dropdown-item {$v.active}'>
	<a href="{$v.url}" title="{$v.title}" {$v.target}><i class="icon fa-paper-plane" aria-hidden="true"></i> {$v.title}</a>
</li>
</tag>
```
###手机菜单
```html
<tag action="menu.list">
<div style="background-color: {$v.but_color};">
	<a href="{$v.url}" class="item"  title="链接关键词"<if value="$v['target']">target="_blank"</if> style="color: {$v.text_color};">
		<i class="{$v.icon}"></i>
		<span>{$v.name}</span>
	</a>
</div>
</tag>
```
> **返回$v数组所包含的数据，调用语法：{$v.字段名称}**

| 名称  |  含义 |
| ------------ | ------------ |
|name|按钮文字|
|url|按钮链接|
|target|点击按钮是否新窗口打开，1为新窗口打开，0为当前窗口打开，默认当前窗口打开|
|but_color|按钮背景颜色|
|text_color|按钮文字颜色|
## 书写规范
- 行级标签写法`<include file="head.php" ></include>`必须以`/`结尾
- 块级标签写法`<if value="$sex eq 1">男</if>`
- 在模板中使用变量需要加`{}`,如 `{$lang.webname}`
- 在标签中传参，参数为变量时使用方式：`<tag cid="$data['classnow']"></tag>`

## 辅助功能
### 新窗口打开
#### 栏目新窗口打开，语法{$m.urlnew}

<a href="{$m.url}" {$m.urlnew} title="{$m.name}">{$m.name}</a>
	
#### 内容新窗口打开，语法{$g.urlnew}

<a href="{$v.url}" title="{$v.title}" {$g.urlnew}>{$v.title}</a>
	
### 字符串截取

<p>{$v.description|met_substr:0,100}...</p> //met_substr
    
### 缩略图

<img src="{$v.imgurl|thumb:300,400}" alt="{$v.title}" />//300代表缩略图宽，400代表缩略图高
### 判断参数中的图片地址是否有值
```html
例如：$ui['about_img']是一个值为图片地址的参数，判断其是否有值
<if value="strstr($ui['about_img'],'http')||strstr($ui['about_img'],'upload/')">
	...
</if>
```
### include 文件引入标签
- #### 调用

```html
<include file="head.php" page="index"/>
```
模板或UI中加载其他php文件，有部分路径可用特殊名称开头代替
```
ui_ajax：public/ui/v2/module/ajax/
ui_v2：public/ui/v2/
```
例如：
```html
<include file='ui_ajax/message'/> //调用模板框架中列表页列表的ajax文件
<include file='ui_v2/module/shop/shop_option_ui.php'/> //调用模板框架中的商城模块默认UI
```
- #### 传入参数

|参数名|是否必填|默认值|说明|
|:----    |:-------    |:---|:---|
|file|是 |null|要引入的模板文件,文件必须是相对当前模板文件夹的文件
|page|否 |null|说明当前模板是哪个页面
### ui文件夹的img文件夹里面的文件引用方式
#### 图片以及字体引入
	$ui_url:ui文件夹中的img文件夹地址
    @font-face { font-family: 'bigFont'; src: url('$ui_url/iconfont.woff'); }
	
#### css及js文件的引入
通过在`config.json`引入文件

{
        "css":[
        	"ui/css/img/index.css"
        ],
        "js":[
            "ui/js/img/index.js"
        ]
    }
#### js文件中引入css、js文件
**$.include(url,fun);**
- **url**：文件路径，可以是数组，如`[文件路径1，文件路径2]`
- **fun**：function，回调函数

```js
// M['tem']模板文件夹路径
$.include(M['tem'] + "ui/met_xx_xx/img/js/xx.js",function(){
	...// 回调函数
});
```

##代码规范
- 表单验证
只要表单元素启用了验证，比如不能为空、格式验证，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>
```

模板制作修改教程