tag 指定栏目内容列表

更新时间：2020-07-17 16:47:05 作者：米拓建站

## 概述：

当tag标签的action参数值为`list`时，可调用米拓企业建站系统【内容管理】中产品、文章、图片、下载、招聘、留言模块下的内容列表，且可通过套用tag标签，循环输出对应栏目及子栏目的内容列表。

【注意】网站内容列表可参考“[内容管理](https://doc.metinfo.cn/metinfo/content/content_166_1.html "内容管理")"进行设置。
## 使用范围：
可在所有页面中使用，调用方法一致
## 类型：
数据标签，用于调用数据的标签
## 语法：
 <tag action="list" cid="" num="" type="" para="">
 <a href="{$v.url}" title="{$v.title}">{$v._title}</a>
 </tag>

【说明】
- tag标签中对应的参数及选项值可参考下面的“参数说明"；
- tag标签中的数据内容，可通过$v数组及对应的字段获取，具体可参考下方的`$v数组`。

## 标签原理：

tag标签是数据的集合，数据类型类似js的数组，通过action参数传入值不同来获取不同的数据，当action传参为list时，便可获得内容列表数据。
tag标签的语法和js中的for函数类似，在tag标签的内部书写待渲染的html标签，$v为每个循环变量的别名，包含了每条内容的数据。

**tag标签：**

<tag action="list" type="" class="" hide="">
 <a href="{$v.url}" title="{$v.title}">{$v._title}
		</a>//通过$v数组调用内容数据
 </tag>

**for函数：**

for(i=0;i<list.length;i++){
 document.write(
 '<a href="'+list[i]['url]+'" title="'+list[i]['title]+'">'+list[i]['_title]+'</a>'
 );
 }
	
总结：tag标签是后台返回数据的集合，类似于数组，在传入指定参数后会返回内容列表，在内部编写html代码，并使用$v变量来获取每个内容的数据，这样我们就可以得到一个动态的包含内容列表的html页面了。

## 参数说明：
tag标签，可通过传入不同的参数值，来调用对应的信息，以下为内容列表对应的参数选项值：

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

## $v数组：
tag标签是一个数据的集合，当`action="list"`调用内容列表时，tag标签内部循环需指定$v数组为循环变量的别名，从而调用更多的内容数据。

### 调用语法： `{$v.字段名称}`

例如：

<tag action="list" type="" class="" hide="">
 <a href="{$v.url}" title="{$v.title}">{$v._title}</a> //调用内容标题及页面链接。
 </tag>

### $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|展示图片列表（产品、图片模块专属，数据类型为数组）|
|video|产品展示视频（产品模块专属，video的html）|
|price|商品价格（产品模块专属，开启了商城模式时才有数据）|
|stock|商品库存（产品模块专属，开启了商城模式时才有数据）|
|sales|商品销量（产品模块专属，开启了商城模式时才有数据）|
|addtime|发布时间 作用于[产品、文章、图片、下载模块]|
|para|内容详情参数（产品、图片、下载模块专属）|
|tag|tag标签（产品、文章、图片模块专属）|
|hits|点击量|
|top_ok|判断内容是否置顶，值为1时置顶，为0时不置顶|
|com_ok|判断内容是否推荐，值为1时推荐，为0时不推荐|
|ctitle|自定义页面title|
|other_info|其他信息|
|custom_info|自定义信息|
| sub  |  用于判断数组长度|
| _index  |  当前内容的下标，从0开始|
| _first  |  用于判断是否为第一个|
| _last  |  用户判断是否为后一个|

【注意】栏目标签可嵌套内容列表标签使用，则$v的取值为所在内容列表标签调用的栏目内容列表的内容。

## 示例：
### 如何调用指定栏目的内容列表
**场景案例：**首页产品区块，调用推荐产品的标题、参数、链接及第一张展示图。
调用指定栏目的内容列表，需先获取栏目id：可参考教程“[如何获取栏目ID？](https://doc.metinfo.cn/mb/faq/102.html "如何获取栏目ID？")"

**模板代码：**

<ul>// 内容列表用ul、li标签的格式，可根据自己需求修改
 <tag action="list" cid="4" num="20" type="com" para="true">
	// 内容列表标签，type参数值为com：调用推荐类型的内容；num为20：即多调用20条信息；para为true：即调用产品内容详情里的参数信息，如不需要调用可不设置
 // 将获取到栏目id填入到cid参数中，cid参数的值可以是模板中自定义的变量（https://doc.metinfo.cn/mb/mb/28.html ），例如$lang[‘index_product_id’]
 // $v包含了每条信息的所有数据，相当于一个数组，可以通过{$v.字段名}的方式来渲染信息数据
 <li>
 <img src="{$v.imgurl}" title="{$v.title}" alt="图片关键词">
 <a href="{$v.url}" title="{$v.title}">{$v._title}</a>
 <list data="$v['para']" name='$para'>
			// $v['para']为该条信息的参数，相当于一个数组，可通过<list></list>标签渲染（如果不需要调用可不写），具体参考list标签文档
 			<if value="$para['value']">
				// 通过<if></if>标签判断参数有值的情况才显示参数信息，if用法具体参考if标签文档
 	{$para.name} : {$para.value}
				// $para.name为参数名称，$para.value为参数值
 </if>
 </list>
 </li>
 </tag>
 </ul>

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

**前台页面输出HTML：**

<ul>
 <li>
 <img src="upload/201801/1515574798.jpg" title="Lenovo/联想一体机电脑I5-6400T" alt="图片关键词">
 <a href="product/showproduct.php?id=3" title="Lenovo/联想一体机电脑I5-6400T">Lenovo/联想一体机电脑I5-6400T</a>
 台式机类型 : 游戏影音
 屏幕尺寸 : 23英寸// 实际可能有多条参数，此处示例只列出两条参数
 </li>
 <li>
 <img src="upload/201801/1515574797.jpg" title="华为HUAWEI平板 M3" alt="图片关键词">
 <a href="product/showproduct.php?id=4" title="华为HUAWEI平板 M3">华为HUAWEI平板 M3</a>
 屏幕类型 : IPS屏
 屏幕尺寸 : 8.4英寸// 实际可能有多条参数，此处示例只列出两条参数
 </li>
 // 实际可能有多条，此处示例只列出两条信息
 </ul>

**场景案例2：**首页产品区块，调用全部产品的标题、链接及多张展示图片。
调用指定栏目的内容列表，需先获取栏目id：可参考教程“[如何获取栏目ID？](https://doc.metinfo.cn/mb/faq/102.html "如何获取栏目ID？")"

**模板代码：**

<ul>// 内容列表用ul、li标签的格式，可根据自己需求修改
 <tag action="list" cid="4" num="20">// 内容列表标签，type参数值不设置即可调用推荐类型的内容；num为20：即多调用20条信息；
 // 将获取到的栏目id填入到cid参数中，cid参数的值可以是模板中自定义的变量（https://doc.metinfo.cn/mb/mb/28.html ），例如$lang[‘index_product_id’]
 // $v包含了每条信息的所有数据，相当于一个数组，可以通过{$v.字段名}的方式来渲染信息数据
 <li>
 <a href="{$v.url}" title="{$v.title}">{$v._title}</a>
 <list data="$v['displayimgs ']" name='$img'>// $v['displayimgs ']为该条信息的所有展示图片，相当于一个数组，可通过<list></list>标签渲染（如果不需要调用可不写），具体参考list标签文档
 <img src="{$img.img}" title="{$v.title}" alt="图片关键词">//{$img.img}为每张展示图片的路径
 </list>
 </li>
 </tag>
 </ul>

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

**前台页面输出HTML：**

<ul>
 <li>
 <a href="product/showproduct.php?id=3" title="Lenovo/联想一体机电脑I5-6400T">Lenovo/联想一体机电脑I5-6400T</a>
 <img src="upload/201801/1515574797.jpg" title="Lenovo/联想一体机电脑I5-6400T" alt="图片关键词">
 <img src="upload/201801/1515574798.jpg" title="Lenovo/联想一体机电脑I5-6400T" alt="图片关键词">
 // 实际可能有多张，此处示例只列出两张图片
 </li>
 <li>
 <a href="product/showproduct.php?id=4" title="华为HUAWEI平板 M3">华为HUAWEI平板 M3</a>
 <img src="upload/201801/1515574367.jpg" title="华为HUAWEI平板 M3" alt="图片关键词">
 <img src="upload/201801/1515574368.jpg" title="华为HUAWEI平板 M3" alt="图片关键词">
 // 实际可能有多张，此处示例只列出两张图片
 </li>
 // 实际可能有多条，此处示例只列出两条信息
 </ul>

### 如何调用二级栏目的内容列表
需搭配[栏目标签](https://doc.metinfo.cn/mb/mbtag/64.html "栏目标签")使用，先获取二级栏目再调用二级栏目下的内容列表。

**场景案例：**首页产品区块，调用二级栏目（产品展示栏目）的内容列表：内容标题、详情页链接。
产品展示栏目id为4，可参考教程“[如何获取栏目ID？](https://doc.metinfo.cn/mb/faq/102.html "如何获取栏目ID？")"获取；

**模板代码：**

<tag action="category" type="son" cid="4">//调用栏目id为4的子栏目列表
 // $m包含了每个二级栏目的所有数据，相当于一个数组，可以通过{$m.字段名}的方式来渲染栏目数据
 <ul>// 内容列表用ul、li标签的格式，可自行修改
 <tag action="list" cid="$m[‘id’]">// 调用子栏目的内容列表，cid参数的值可以是变量，此处$m[‘id’]为二级栏目id
 // $v包含了每个二级栏目的所有内容列表，相当于一个数组，可以通过{$v.字段名}的方式来渲染信息数据
 <li>
 <a href="{$v.url}" title="{$v.title}">{$v._title}</a>
 </li>
 </tag>
 </ul>
 </tag>
	
【注意】实际编写时请去掉注释文字。

**前台页面输出HTML：**

<ul>
 <li>
 <a href="product/showproduct.php?id=2" title="Lenovo/联想一体机电脑I5-6400T">Lenovo/联想一体机电脑I5-6400T</a>
 </li>
 <li>
 <a href="product/showproduct.php?id=3" title="华为HUAWEI平板 M3">华为HUAWEI平板 M3</a>
 </li>
 // 实际可能有多条，此处示例只列出两条信息
 </ul>
 <ul>
 <li>
 <a href="product/showproduct.php?id=4" title="小米笔记本Air 13.3">小米笔记本Air 13.3</a>
 </li>
 <li>
 <a href="product/showproduct.php?id=5" title="华为HUAWEI AKG H300耳机">华为HUAWEI AKG H300耳机</a>
 </li>
 // 实际可能有多条，此处示例只列出两条信息
 </ul>
 // 实际可能有多个二级栏目信息列表，此处示例只列出两个二级栏目

### 如何调用三级栏目的内容列表
需搭配[栏目标签](https://doc.metinfo.cn/mb/mbtag/64.html "栏目标签")使用，先获取三级栏目再调用三级栏目下的内容列表。
**场景案例：**首页产品区块，调用三级栏目（产品展示栏目）的内容列表：内容标题、详情页链接。
产品展示栏目id为4，可参考教程“[如何获取栏目ID？](https://doc.metinfo.cn/mb/faq/102.html "如何获取栏目ID？")"获取。

**模板代码：**

<tag action="category" type="son" cid="4">// 调用栏目标签（具体参考栏目标签文档），cid参数的值可以是模板中自定义的变量，例如$lang['index_product_id'],
 // $m包含了每个二级栏目的所有数据，相当于一个数组，可以通过{$m.字段名}的方式来渲染栏目数据
 <tag action="category" type="son" cid="$m['id']">// 调用三级栏目标签，cid参数的值可以是一个模板变量，此处$m['id']为二级栏目的id
 // 栏目标签中间渲染了每个三级栏目的数据变量$m，$m相当于一个数组，包含了这个栏目的所有数据，可以通过{$m.字段名}的方式来渲染栏目数据
 <ul>// 信息列表用ul、li标签的格式，可根据自己需求修改
 <tag action="list" cid="$m['id']">// 调用三级栏目内容列表标签，cid参数的值可以是一个模板变量，此处$m['id']为三级栏目的id
 // $v包含了每条信息的所有数据，相当于一个数组，可以通过{$v.字段名}的方式来渲染信息数据
 	 <li>
 	<a href="{$v.url}" title="{$v.title}">{$v._title}</a>
 </li>
 </tag>
 </ul>
 </tag>
 </tag>
	
【注意】实际编写时请去掉注释文字。

**前台页面输出HTML：**

<ul>
 <li>
 <a href="product/showproduct.php?id=2" title="Lenovo/联想一体机电脑I5-6400T">Lenovo/联想一体机电脑I5-6400T</a>
 </li>
 <li>
 <a href="product/showproduct.php?id=3" title="华为HUAWEI平板 M3">华为HUAWEI平板 M3</a>
 </li>
 // 实际可能有多条，此处示例只列出两条信息
 </ul>
 <ul>
 <li>
 <a href="product/showproduct.php?id=4" title="小米笔记本Air 13.3">小米笔记本Air 13.3</a>
 </li>
 <li>
 <a href="product/showproduct.php?id=5" title="华为HUAWEI AKG H300耳机">华为HUAWEI AKG H300耳机</a>
 </li>
 // 实际可能有多条，此处示例只列出两条信息
 </ul>
 // 实际可能有多个三级栏目的信息列表，此处示例只列出两个三级栏目