tag 文章内容列表

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

## 概述：

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

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

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

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

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

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

## 标签原理：

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

**tag标签：**

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

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

## $v数组：

tag标签是一个数据的集合，当`action="news.list"`调用文章模块内容列表时，tag标签内部循环需指定$v数组为循环变量的别名，从而调用更多的内容数据。
### 调用语法：{$v.字段名称}

例如：

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

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

## 示例：

### 文章模块列表页如何调用内容列表
**场景案例：**文章模块列表页，按栏目调用对应的内容列表，显示内容标题、详情页链接、封面图的缩略图。

**模板代码：**

<ul class="met-pager-ajax">// 信息列表用ul、li标签的格式，可根据自己需求修改;列表的父元素必须加上类名met-pager-ajax，这是与列表分页按钮功能相关的
    <tag action="news.list" num="$c['met_news_list']">// 信息列表标签
    // $v包含了每条信息的所有数据，相当于一个数组，可以通过{$v.字段名}的方式来渲染信息数据
    <li class="{$v.class}">
       <img src="{$v.imgurl|thumb:$c['met_newsimg_x'],$c['met_newsimg_y']}" title="{$v.title}" alt="图片关键词">//$v.imgurl为封面图地址
    //thumb为缩略图功能（请看文档  https://doc.metinfo.cn/mb/mbtag/96.html ）
    //$c['met_newsimg_x']和$c['met_newsimg_y']为文章模块列表页内容列表缩略图的宽和高（请看文档https://doc.metinfo.cn/mb/mbtag/78.html）
      <a href="{$v.url}" title="{$v.title}">{$v._title}</a>
    </li>
    </tag>
    </ul>
    // 列表分页代码：列表下面加上以下固定格式的代码，即可渲染pc端和手机端的分页按钮，实现列表翻页的功能
    // pc端分页按钮
    <div class='m-t-20 text-xs-center hidden-sm-down' m-type="nosysdata">
        <pager/>// 分页标签，参考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>
    
【注意】
- 列表页必须添加分页标签` <pager/>`，电脑端与手机端分页功能实现方式不同；
- 实际编写时请去掉注释文字。

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

<ul class="met-pager-ajax">
    <li>
        <img src="upload/201801/1515574798.jpg" title="Parallels即将亮相2014 Macworld博览会" alt="图片关键词">
    <a href="news/shownews.php?id=3" title="Parallels即将亮相2014 Macworld博览会"><span>Parallels即将亮相2014 Macworld博览会</span></a>
    </li>
    <li>
        <img src="upload/201801/1515574797.jpg" title="传苹果曾与惠普研发企业Siri 终搁浅" alt="图片关键词">
    <a href="news/shownews.php?id=4" title="传苹果曾与惠普研发企业Siri 终搁浅"><span>传苹果曾与惠普研发企业Siri 终搁浅</span></a>
    </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="../news/news.php?class1=3&pageset=1" class="Ahover" title="链接关键词">1</a>
            <a href="../news/index.php?class1=3&page=2&pageset=1" title="链接关键词">2</a>
            <a href="../news/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>