tag banner信息

更新时间：2020-07-16 13:44:23 作者：米拓建站

## 概述：
当tag标签的action参数值为`banner.list`时，可循环调用系统banner列表和banner按钮列表在页面显示。
【说明】
- 可参考“[banner管理](https://doc.metinfo.cn/metinfo/banner/banner_198_1.html） "banner管理")”自定义设置网站banner；
- 可参考“[banner按钮管理](https://doc.metinfo.cn/metinfo/banner/banner_199_1.html "banner按钮管理")”自定义设置banner上的按钮。

## 使用范围：
所有模板文件都可调用，常用于`head.php`中。
## 类型：
数据标签，用于调用系统banner列表和banner按钮列表。
## 语法：

<tag action='banner.list'>
    <img src="{$v.img_path}"  alt="图片关键词" title="图片关键词">//调用banner
    <list data="$v['button']" name="$a">//调用banner上的按钮列表
      <a href="{$a.but_url}" title="{$a.but_text}">{$a.but_text}</a>
    </list>
    </tag>

【说明】
tag标签中的数据内容，可通过$v数组及对应的字段获取，具体可参考下方的`$v数组`。
banner按钮数据内容，可通过list标签循环渲染`$v['button']`数组得到每个按钮的数据`$a`，再通过$a对应的字段获取，具体可参考下方的`$a数组`。

## 标签原理：
 tag标签是数据的集合，数据类型类似js的数组，获取到的数据就是banner列表和banner按钮列表数据。
tag标签的语法和js中的for函数类似，在tag标签的内部书写待渲染的html标签，$v为每个循环变量的别名，包含了每条banner的数据。
list标签的语法和js中的for函数类似，在tag标签的内部书写待渲染的html标签，$a为每个循环变量的别名，包含了每条banner按钮的数据。
**tag、list标签：**

<tag action='banner.list'>
    <img src="{$v.img_path}"  alt="图片关键词" title="图片关键词">
    <list data="$v['button']" name="$a">//循环渲染$v['button']数据，list标签用法参考文档https://doc.metinfo.cn/mb/mbtag/84.html
      <a href="{$a.but_url}" title="{$a.but_text}">{$a.but_text}</a>
    </list>
    </tag>

**for函数：**

for(i=0;i<list.length;i++){
    document.write(
    '<img src="'+list[i][img_path]+'" alt="图片关键词" title="图片关键词">'
    );
    for(a=0;a<list[i][button].length;a++){
    document.write(
    '<a href="'+list[i][button][a][but_url]+'" title="'+list[i][button][a][but_text]+'">'+list[i][button][a][but_text]+'</a>'
    );
    }
    }

总结：tag标签是后台返回数据的集合，类似于数组，在传入指定参数后会返回内容数据，在内部编写html代码，并使用$v变量来获取每个按钮的数据，这样我们就可以得到一段动态的包含banner信息的html代码了；
`$v['button']`是banner按钮数据的集合，通过list标签可循环渲染按钮数据，在list标签内部编写html代码，并使用自定义$a变量来获取每个按钮的数据，这样我们就可以得到一段动态的包含按钮信息的html代码了。

## $v数组：
   tag标签是一个数据的集合，调用banner列表时，tag标签内部循环默认指定$v数组为循环变量的别名，从而调用更多的内容数据。
【说明】所有手机端的数据当没有自定义设置时，会默认继承PC端设置的数据。
### 调用语法：{$v.字段名称}
**例如：**

<tag>
        <img src="{$v.img_path}"  alt="图片关键词" title="图片关键词">//{$v.img_path}：banner图片路径
    </tag>

### $v数组中包含的字段：

| 字段名称  |  含义 |
| ------------ | ------------ |
| img_path  |  banner图片路径 |
|mobile_img_path |手机端banner图片路径 |
|height | 电脑端banner固定高度，需要模板支持，默认不固定|
|height_t | 平板端banner固定高度，需要模板支持，默认不固定|
| height_m| 手机端banner固定高度，需要模板支持，默认不固定|
|img_link | banner自定义链接地址|
| target  | banner链接是否新窗口打开，1为新窗口打开，0为当前窗口打开，默认当前窗口打开  |
|img_title | banner标题|
|img_title_fontsize |banner标题文字大小，需要配合css使用，默认为空 |
|img_title_color |banner标题颜色，需要配合css使用，默认为空 |
|img_des |banner描述，需要配合css使用 |
|img_des_color | banner描述文字颜色，需要配合css使用，默认为空|
|img_des_fontsize |Banner描述文字大小，需要配合css使用，默认为空 |
| img_text_position|文字位置，需要配合css使用，默认为0（即位置居中） |
| img_title_mobile|手机端banner标题 |
|img_title_fontsize_mobile |手机端Banner标题文字大小，需要配合css使用 |
|img_title_color_mobile | 手机端banner标题颜色，需要配合css使用|
|img_des_mobile |手机端banner描述，需要配合css使用 |
|img_des_color_mobile |手机端banner描述文字颜色，需要配合css使用 |
|img_des_fontsize_mobile | 手机端banner描述文字大小，需要配合css使用|
|img_text_position_mobile |手机端文字位置，需要配合css使用 |
|button | banner按钮，可以有多个，是一个数组|

## $a数组：
    $v['button']是一个数据的集合，list标签调用按钮列表时，list标签内部循环需指定$a数组为循环变量的别名，从而调用更多的内容数据。
【说明】`$a`是list标签name参数的值，可自定义成其他名称，但不能跟该tag标签的$v、$m或者嵌套使用的list标签的name参数值相同 。
### 调用语法：{$a.字段名称}
**例如：**

### $a数组中包含的字段：

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

## 示例：
### 如何调用banner列表和banner按钮列表
网站banner区块制作，可实现不同栏目显示不同的banner图片，且对应banner上的按钮列表。
#### 模板代码：
在头部模板文件head.php中编写以下代码，两种实现方式：

**①简单版（包含pc、手机端图片，图片跳转链接，pc、平板、手机端图片高度）**

// 要配合css、js才能把功能展示完整，具体请参考metv7模板
    // 手机端的图片默认值为pc端设置的值
    <div class="met-banner carousel" m-id='banner' m-type='banner'>//banner区块特殊区块，所以区块外层的元素上需要加上固定的属性m-id='banner' m-type='banner'（用于可视化设置）
        <div class="carousel-inner">
    		<tag action='banner.list'>//tag标签获取banner列表数据
    // $v包含了每条banner内容的所有数据，相当于一个数组，可以通过{$v.字段名}的方式来渲染内容数据
    		<div class="carousel-item">
    		    <if value="$v['img_link']">//判断是否有banner链接，if标签用法请参考文档https://doc.metinfo.cn/mb/mbtag/85.html
    		    <a href="{$v.img_link}" title="{$v.img_des}" <if value="$v['target']">target="_blank"</if>>//通过判断$v['target']是否为1来判断banner链接是否新窗口打开
    		    </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}' >//{$v.img_path}：bannerPC端图片；{$v.mobile_img_path|thumb:767}，banner手机端图片的缩略图，具体语法请参考文档https://doc.metinfo.cn/mb/mbtag/96.html；
    //{$v.height}、{$v.height_t}、{$v.height_m}：banner图片在不同浏览器宽度显示的高度
               <if value="$v['img_link']">
               </a>
               </if>
    		</div>
    		</tag>
    	</div>
    </div>

**②完整版（包含pc、手机端图片，图片跳转链接，pc、平板、手机端图片高度，图片标题、描述（pc和手机端两端设置），文字位置（pc和手机端两端设置），banner按钮）**

// 完整版（包含pc、手机端图片，图片跳转链接，pc、平板、手机端图片高度，图片标题、描述（pc和手机端两端设置），文字位置（pc和手机端两端设置），banner按钮）
    // 手机端的图片、图片标题、描述、文字位置的默认值为pc端对应设置的值
    // 制作时以完整版为准，要配合css、js才能把功能展示完整，具体请参考metv7模板
    <div class="met-banner carousel" m-id='banner' m-type='banner'>//banner区块特殊区块，所以区块外层的元素上需要加上固定的属性m-id='banner' m-type='banner'（用于可视化设置）
    <div class="carousel-inner">
    		<tag action='banner.list'>//tag标签获取banner列表数据
    // $v包含了每条banner内容的所有数据，相当于一个数组，可以通过{$v.字段名}的方式来渲染内容数据
    		<div class="carousel-item">
    		    <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}' >//{$v.img_path}：bannerPC端图片；{$v.mobile_img_path|thumb:767}，banner手机端图片的缩略图，具体语法请参考文档https://doc.metinfo.cn/mb/mbtag/96.html；
    		    //{$v.height}、{$v.height_t}、{$v.height_m}：banner图片在不同浏览器宽度显示的高度
    		    <div class="banner-text w-full h-100p" data-position="p-{$v.img_text_position}|p-{$v.img_text_position_mobile}" met-imgmask>//{$v.img_text_position}、{$v.img_text_position_mobile}：banner文字和按钮在PC端和手机端的位置；
    //met-imgmask：.banner-text覆盖了图片，所以需要加上该属性，用于可视化设置，具体用法请参考文档https://doc.metinfo.cn/mb/mbtag/100.html
    		        <if value="$v['img_link']">//判断是否有banner链接，if标签用法请参考文档https://doc.metinfo.cn/mb/mbtag/85.html
    		        <a href="{$v.img_link}" title="{$v.img_des}" <if value="$v['target']">target="_blank"</if> class="block w-full h-100p" met-imgmask></a>//通过if标签判断$v['target']是否为1来判断banner链接是否新窗口打开
    //met-imgmask：banner链接覆盖了住了banner文字，所以需要加上该属性，用于可视化设置，具体用法请参考文档https://doc.metinfo.cn/mb/mbtag/100.html
    		        </if>
    		        <div class='container h-100p'>
    		            <div class='banner-text-con'>
    		                //banner文字
    		                <div class="text-con">
    		                    <h4 class="animation-item-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>//{$v.img_title}：banner标题；{$v.img_title_fontsize}：banner标题文字大小；{$v.img_title_color}：banner标题颜色；
    		                    <if value="$v['img_title_mobile']">//通过if标签判断$v['img_title_mobile']（banner手机端标题）是否有值来判断是否渲染$v['img_title_mobile']
    		                    <h4 class="animation-item-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>//{$v.img_title_mobile}：banner手机端标题；{$v.img_title_fontsize_mobile}：banner手机端标题文字大小；{$v.img_title_color_mobile}：banner手机端标题颜色；
    		                    </if>
    		                    <p class="animation-item-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>//{$v.img_des}：banner描述；{$v.img_des_fontsize}：banner描述文字大小；{$v.img_des_color}：banner描述颜色；
    		                    <if value="$v['img_des_mobile']">//通过if标签判断$v['img_des_mobile']（banner手机端描述）是否有值来判断是否渲染$v['img_des_mobile']
    
    		                    <p class="animation-item-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>//{$v.img_des_mobile}：banner手机端描述；{$v.img_des_fontsize_mobile}：banner手机端描述文字大小；{$v.img_des_color_mobile}：banner手机端描述颜色；
    		                    </if>
    		                </div>
    		                //banner按钮
    		                <if value="$v['button']">//通过if标签判断$v['button']（banner按钮）是否有值来判断是否渲染按钮数据
    		                <div class="m-t-15 animation-item-bottom banner-btn">
    		                    <list data="$v['button']" name="$a">>//通过list标签来渲染banner按钮的所有数据
    // $a包含了每条banner按钮的所有数据，相当于一个数组，可以通过{$a.字段名}的方式来渲染内容数据
    		                    <a href="{$a.but_url}" title="{$a.but_text}" <if value="$a['target']">target="_blank"</if> class="btn btn-primary btn-outline m-y-5 m-x-10 p-y-0 <if value="$a['is_mobile'] eq 1”>hidden-sm-down</if> <if value="$a['is_mobile'] eq 2”>hidden-md-up</if>" data-style="{$a.but_color}|{$a.but_text_color}|{$a.but_hover_color}|{$a.but_text_hover_color}" 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>//通过if标签判断$a['target']是否为1来判断banner按钮链接是否新窗口打开;//通过if标签判断$a['is_mobile']为不同值来加载不同的样式类名；
    {$a.but_url}:banner按钮链接；{$a.but_text}:banner按钮文字；
    其他{$a.字段名}类型的数据是用于控制banner按钮的样式，需要结合css和js使用，具体含义请参考本文档的【$a数组】
                               </list>
    		                </div>
    		                </if>
    		            </div>
    		        </div>
    		    </div>
    		</div>
    		</tag>
    	</div>
    </div>

【注意】实际编写时请去掉注释文字。

#### JS代码：
在模板文件metinfo.js文件中编写以下代码

【注意】实际编写时请去掉注释文字。

#### 前台页面输出HTML：
**①简单版**

// 简单版
    <div class="met-banner carousel" m-id='banner' m-type='banner'>
        <div class="carousel-inner">
    		<div class="carousel-item">
    		    <a href="https://www.mituo.cn" title="banner标题" target="_blank">
    		        <img class="cover-image" src="upload/201807/1532137793.jpg" srcset='upload/201807/1532137793.jpg 767w,upload/201807/1532137793.jpg' sizes="(max-width: 767px) 767px" alt="banner标题" data-height='0|0|0' title="图片关键词">
               </a>
    		</div>
           //可能有多个banner，示例只列举一个
    	</div>
    </div>

②完整版

// 完整版
    <div class="met-banner carousel" m-id='banner' m-type='banner'>
        <div class="carousel-inner">
    		<div class="carousel-item">
    		    <img class="cover-image" src="upload/201807/1532137793.jpg" srcset='upload/201807/1532137793.jpg 767w,upload/201807/1532137793.jpg' sizes="(max-width: 767px) 767px" alt="banner标题" data-height='{$v.height}|{$v.height_t}|{$v.height_m}' title="图片关键词">
    		    <div class="banner-text w-full h-100p" data-position="p-0|p-1" met-imgmask>
    		        <a href="https://www.mituo.cn" title="banner描述" target="_blank" class="block w-full h-100p" met-imgmask></a>
    		        <div class='container h-100p'>
    		            <div class='banner-text-con'>
    		                <div class="text-con">
    		                    <h4 class="animation-item-top font-weight-500 m-t-0 hidden-sm-down" style="color:#000000;font-size:16px;">banner标题</h4>
    		                    <h4 class="animation-item-top font-weight-500 m-t-0 hidden-md-up" style="color:#000000;font-size:16px;">banner手机端标题</h4>
    		                    <p class="animation-item-bottom m-b-0 hidden-sm-down" style='color:#777777;font-size:14px;'>banner描述</p>
    		                    <p class="animation-item-bottom m-b-0 hidden-md-up" style='color:#777777;font-size:14px;'>banner手机端描述</p>
    		                </div>
    		                <div class="m-t-15 animation-item-bottom banner-btn">
    		                    <a href="https://www.metinfo.cn" title="在线咨询" target="_blank" class="btn btn-primary btn-outline m-y-5 m-x-10 p-y-0 hidden-md-up" data-style="#ffff000|#ffffff|#000000|#ffffff" style="width:100px;height:40px;line-height:40px;background:#ffff000;border-color:#ffff000;color:#ffffff;font-size:16px;">在线咨询</a>
                               //可能有多个banner按钮，示例只列举一个
    		                </div>
    		            </div>
    		        </div>
    		    </div>
    		</div>
           //可能有多个banner，示例只列举一个
    	</div>
    </div>