tag 图片内容列表

更新时间：2020-05-26 14:53:20 作者：米拓建站

## 概述：

当tag标签的action参数值为`img.list`时，可循环调用图片模块内容在当前栏目（图片模块）列表页展示。

【注意】
- 图片模块内容可参考“[内容管理](https://doc.metinfo.cn/metinfo/content/content_166_1.html "内容管理")”进行设置。
- 其他页面可通过[“指定栏目的内容列表list标签”](https://doc.metinfo.cn/mb/mbtag/65.html "“指定栏目的内容列表list标签”")调用图片模块的内容列表。

## 使用范围：
仅在模板文件`img.php`中调用，调取当前图片栏目的数据。

## 类型：
数据标签，用于调用数据的标签。

## 语法：

<tag action="img.list" cid=""num="">
        <a href="{$v.url}" title="{$v.title}">{$v._title}</a>
    </tag>

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

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

**tag标签：**

<tag action="img.list" cid="" num="">
        <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标签，可通过传入不同的参数值，来调用对应的内容，以下为图片模块内容列表（img.list）标签对应的参数选项值：

|参数名|是否必填|默认值|说明|
|:----    |:-------    |:---|:---|
|action|是 |null|指定调用的方法(img.list)
|num|是|默认为父级栏目或者系统设置的显示条数，此处应手动传入$c['met_img_list']——该变量的值可在可视化网站后台【[当前页设置](https://doc.metinfo.cn/metinfo/style/style575.html "当前页设置")】中自定义设置【列表显示条数】|列表页每页显示大条数
|cid|否|$data['classnow']（当前列表页栏目id）|列表页栏目id|

## $v数组：

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

### 调用语法：

**{$v.字段名称}**

例如：

<tag action="img.list" num="$c['met_img_list']">
    <a href="{$v.url}" title="{$v.title}">{$v._title}</a> //调用内容名称及对应的内容详情页链接。
    </tag>

### $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|自定义详情页的链接地址（链接至）|
| sub  |  用于判断数组长度|
| _index  |  当前内容的下标，从0开始|
| _first  |  用于判断是否为第一个|
| _last  |  用于判断是否为后一个|

列表下面加上分页标签 `<pager type="$c['met_img_page]"/>` 就可以出现分页按钮，实现列表翻页的效果。

## 示例：
### 如何调用当前栏目（图片模块）的内容列表：
**场景案例：**图片模块列表页，按栏目调用对应的内容列表，显示内容标题、详情页链接、封面图片的缩略图、图片参数、所有展示图片。

**模板代码：**

<ul class="met-pager-ajax">// 内容列表用ul、li标签的格式，可根据自己需求修改;列表的父元素必须加上类名met-pager-ajax，这是与列表分页按钮功能相关的
    <tag action="img.list" num="$c['met_img_list']">// 内容列表标签
    // $v包含了每条内容的所有数据，相当于一个数组，可以通过{$v.字段名}的方式来渲染内容数据
    <li>
         <img src="{$v.imgurl|thumb:$c['met_imgs_x'],$c['met_imgs_y']}" title="{$v.title}" alt="图片关键词">//$v.imgurl为封面图地址
    //thumb为缩略图功能（请看文档https://doc.metinfo.cn/mb/mbtag/96.html ）
    //$c['met_imgs_x']和$c['met_imgs_y']为图片模块列表页内容列表缩略图的宽和高（请看文档https://doc.metinfo.cn/mb/mbtag/78.html）
        <div>
           <list data="$v['displayimgs ']"  name='$img'>// $v['displayimgs ']为该条内容的所有展示图片，相当于一个数组，可通过<list></list>标签渲染（如果不需要调用可不写），具体参考list标签文档
          <img src="{$img.img}" alt="{$v.title}">//{$img.img}为每张展示图片的路径
          </list>
        </div>
            <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标签文档
                <p>{$para.name}:{$para.value}</p>// $para.name为参数名称，$para.value为参数值
            </if>
           </list>
    </li>
    </tag>
    </ul>
    // 列表分页代码：列表下面加上以下固定格式的代码，即可渲染pc端和手机端的分页按钮，实现列表翻页的功能
    // pc端分页按钮
    <div class='m-t-20 text-xs-center hidden-sm-down' m-type="nosysdata">
        <pager type="$c['met_img_page']"/>// 分页标签，参考pager 列表页分页标签文档
    </div>
    // 手机端分页按钮
    <div class="met-pager-ajax-link hidden-md-up" data-plugin="appear" data-animate="slide-bottom" data-repeat="false" m-type="nosysdata">
         <button type="button" class="btn btn-primary btn-block btn-squared ladda-button" id="met-pager-btn" data-plugin="ladda" data-style="slide-left" data-url="" data-page="1">
              <i class="icon wb-chevron-down m-r-5" aria-hidden="true"></i>
          </button>
    </div>

【注意】
- 列表页必须添加分页，电脑端与手机端分页功能实现方式不同；
- 实际编写时请去掉注释文字。

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

<ul class="met-pager-ajax">
    <li>
    <img src="../upload/201801/1515574798.jpg" alt="品牌案例展示" title="图片关键词">
    <div>
        <img src="../upload/201801/1515574797.jpg" alt="品牌案例展示" title="图片关键词">
    <img src="../upload/201801/1515574798.jpg" alt="品牌案例展示" title="图片关键词">
        // 实际可能有多张，此处示例只列出两张图片
    </div>
    <a href="../img/showimg.php?id=3" title="品牌案例展示"><span>品牌案例展示</span></a>
    <p>台式机类型 : 游戏影音</p>
    <p>屏幕尺寸 : 23英寸</p>// 实际可能有多条参数，此处示例只列出两条参数
    </li>
    <li>
    <img src="../upload/201801/1515574797.jpg" title="品牌案例展示2" alt="图片关键词">
    <div>
        <img src="../upload/201801/1515574897.jpg" title=品牌案例展示2" alt="图片关键词">
    <img src="../upload/201801/1515574898.jpg" title="品牌案例展示2" alt="图片关键词">
        // 实际可能有多张，此处示例只列出两张图片
    </div>
    <a href="../img/showimg.php?id=4" title="品牌案例展示2"><span>品牌案例展示2</span></a>
    <p>屏幕类型 : IPS屏</p>
    <p>屏幕尺寸 : 8.4英寸</p>// 实际可能有多条参数，此处示例只列出两条参数
    </li>
    // 实际可能有多条，此处示例只列出两条内容
    </ul>
    <div class="m-t-20 text-xs-center hidden-sm-down" m-type="nosysdata">
        <div class="met_pager">
            <span class="PreSpan editable-click" met-id="17" met-table="language" met-field="value">上一页</span>
            <a href="../img/img.php?class1=3&pageset=1" class="Ahover" title="链接关键词">1</a>
            <a href="../img/index.php?class1=3&page=2&pageset=1" title="链接关键词">2</a>
            <a href="../img/index.php?class1=3&page=2&pageset=1" class="NextA" title="链接关键词">下一页</a>
            <span class="PageTextk">转至第</span>
            <input type="text" id="metPageT" data-pageurl="index.php?lang=cn&class1=3&page=|&pageset=1|2" value="1">
            <input type="button" id="metPageB" value="页">
        </div>
    </div>
    <div class="met-pager-ajax-link hidden-md-up" data-plugin="appear" data-animate="slide-bottom" data-repeat="false" m-type="nosysdata">
        <button type="button" class="btn btn-primary btn-block btn-squared ladda-button" id="met-pager-btn" data-plugin="ladda" data-style="slide-left" data-url="" data-page="1"> <i class="icon wb-chevron-down m-r-5" aria-hidden="true"></i>
        </button>
    </div>
	
### 图片模块列表页如何调用子栏目列表：
**场景案例：**图片模块列表页，调用子栏目列表，显示子栏目名称、栏目图片的缩略图、栏目页链接，注意：如果没有子栏目则显示当前栏目内容列表。
需设置列表页展示方式为“显示当前栏目下级栏目列表”，具体可参考“[图片列表页当前页设置](https://doc.metinfo.cn/metinfo/style/style573.html "图片列表页当前页设置")”

**模板代码：**

<if value="$c['met_img_page'] && $data['sub'] && !$_M['form']['search']">// 判断当前页设置【显示当前栏目下级栏目列表】（$c['met_img_page']）且当前页有子栏目（$data['sub']），且当前页的搜索参数$_M['form']['search']为空，满足这些条件才执行以下代码
    <ul class="met-pager-ajax">// 栏目列表用ul、li标签的格式，可根据自己需求修改;列表的父元素必须加上类名met-pager-ajax，这是与列表分页按钮功能相关的
    <tag action='category' cid="$data['classnow']" type="son">
          <li>
       <img src="{$v.columnimg|thumb:$c['met_imgs_x'],$c['met_imgs_y']}" title="{$v.name}" alt="图片关键词">//$v.columnimg为栏目图片地址
    //thumb为缩略图功能（请看文档https://doc.metinfo.cn/mb/mbtag/96.html ）
    //$c['met_imgs_x']和$c['met_imgs_y']为图片模块列表页内容列表缩略图的宽和高（请看文档https://doc.metinfo.cn/mb/mbtag/78.html）
            <a href="{$m.url}" title="{$m.name}">{$v.name}</a>
          </li>
    </tag>//调用当前页栏目的子栏目列表，具体请参考栏目信息文档
    </ul>
    <else/>
        <ul class="met-pager-ajax">
    <tag action='img.list' num="$c['met_img_list']">
        // 此处渲染内容列表的html请参考上一个场景案例的代码
    </tag>// 调用当前页栏目的内容列表
    </ul>
    </if>
    // 列表分页代码：列表下面加上以下固定格式的代码，即可渲染pc端和手机端的分页按钮，实现列表翻页的功能
    // pc端分页按钮
    <div class='m-t-20 text-xs-center hidden-sm-down' m-type="nosysdata">
        <pager type="$c['met_img_page']" />// 分页标签，参考pager 列表页分页标签文档
    </div>
    // 手机端分页按钮
    <div class="met-pager-ajax-link hidden-md-up" m-type="nosysdata" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
        <button type="button" class="btn btn-primary btn-block btn-squared ladda-button" id="met-pager-btn" data-plugin="ladda" data-style="slide-left" data-url="" data-page="1">
            <i class="icon wb-chevron-down m-r-5" aria-hidden="true"></i>    </button>
    </div>

【注意】
- 列表页必须添加分页，电脑端与手机端分页功能实现方式不同；
- 实际编写时请去掉注释文字。

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

//如果当前有子栏目且页面搜索参数为空的，则html如下，如果不满足这些条件，则输出的html与当前页内容列表的HTML一致，请参考上一个场景案例的前台输出的html。
    // 子栏目列表html
    <ul class="met-pager-ajax">
    <li>
    <img src="../upload/201801/1515574798.jpg" alt="客户案例1" title="图片关键词">
    <a href="../img/img.php?class2=4" title="客户案例1">客户案例1</a>
    </li>	
    <li>
    <img src="../upload/201801/1515574797.jpg" title="客户案例2" alt="图片关键词">
    <div>
    <a href="../img/img.php?class2=5" title="客户案例2">客户案例2</a>
    </li>
    // 实际可能有多个子栏目，此处示例只列出两个子栏目
    </ul>
    // 以下为页面显示子栏目列表时，分页按钮的html
    <div class="m-t-20 text-xs-center hidden-sm-down" m-type="nosysdata">
        //（显示子栏目列表时，分页按钮列表为空）
    </div>
    <div class="met-pager-ajax-link hidden-md-up" data-plugin="appear" data-animate="slide-bottom" data-repeat="false" m-type="nosysdata">
        <button type="button" class="btn btn-primary btn-block btn-squared ladda-button" id="met-pager-btn" data-plugin="ladda" data-style="slide-left" data-url="" data-page="1"> <i class="icon wb-chevron-down m-r-5" aria-hidden="true"></i>
        </button>
    </div>

### 图片模块详情页如何调用图片参数、展示图片：
**场景案例：**在图片模块详情页展示图片参数、展示图片的缩略图。
图片模块详情页图片参数变量为`$data['para']`、展示图片变量为`$data['displayimgs']`，请参考文档【当前页面参数$data】https://doc.metinfo.cn/mb/mbtag/76.html

**模板代码：**

<ul>// 图片参数列表用ul、li标签的格式，可根据自己需求修改
    <list data="$data['para']" name="$para">// $data['para']为当前页图片的参数，相当于一个数组，可通过<list></list>标签渲染，具体参考list标签文档
    <if value="$para[value]">// 通过<if></if>标签判断参数有值的情况才显示参数信息，if用法具体参考if标签文档
        <li>
        <span>{$para.name}：{$para.value}</span>// $para.name为参数名称，$para.value为参数值
         </li>
        </if>
        </list>
    </ul>
    <div>
    <list data="$data['displayimgs ']"  name='$img'>// $data['displayimgs ']为当前页内容的所有展示图片，相当于一个数组，可通过<list></list>标签渲染，具体参考list标签文档
      <img src="{$img.img|thumb:$c['met_imgdetail_x'],$c['met_imgdetail_y']}" alt="{$data.title}">//{$img.img}为每张展示图片的路径
    //thumb为缩略图功能（请看文档https://doc.metinfo.cn/mb/mbtag/96.html ）
    //$c['met_imgdetail_x']和$c['met_imgdetail_y']为图片模块详情页展示图片缩略图的宽和高（请看文档https://doc.metinfo.cn/mb/mbtag/78.html）
     </list>
    </div>

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

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

<ul>
    <li>
            <span>台式机类型 ：</span><span>游戏影音</span>
    </li>
    // 实际可能有多个参数，此处示例只列出一个参数，所以只有一个li标签
    </ul>
    <div>
    <img src="../upload/201801/1515574797.jpg" alt="品牌案例展示" title="图片关键词">
    <img src="../upload/201801/1515574798.jpg" alt="品牌案例展示" title="图片关键词">
    // 实际可能有多张，此处示例只列出两张图片
    </div>
	
### 首页如何调用图片参数：
**场景案例：**首页调用指定栏目（图片模块）的内容列表，显示内容标题、图片参数。
调用指定栏目的内容列表，需先获取栏目id：可参考教程“[如何获取栏目ID？](https://doc.metinfo.cn/mb/faq/102.html "如何获取栏目ID？")”

**模板代码：**

<ul>// 信息列表用ul、li标签的格式，可根据自己需求修改
    <tag action="list" cid="4" para="true" >// 调用指定栏目的内容列表，para参数设置为true可调用内容列表的详情参数
    // 将获取到栏目id填入到cid参数中，cid参数的值可以是模板中自定义的变量（https://doc.metinfo.cn/mb/mb/28.html ），例如$lang[‘index_img_id’]
    // $v包含了每条信息的所有数据，相当于一个数组，可以通过{$v.字段名}的方式来渲染信息数据
    <li>
            <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标签文档
            <p>{$para.name}:{$para.value}</p>// $para.name为参数名称，$para.value为参数值
            </if>
        </list>
    </li>
    </tag>
    </ul>

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

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

<ul>
    <li>
    <a href="img/showimg.php?id=3" 品牌案例展示2" title="链接关键词"><span>"品牌案例展示2</span></a>
            <p>台式机类型 ：游戏影音</p>// 实际可能有多条，此处示例只列出一条参数
    </li>
    // 实际可能有多条，此处示例只列出一条信息，所以只有一个li标签
    </ul>