图文列表调用方式-免费PHP开源建站系统管家官方网站

图文列表调用方式

发布日期：2022-07-31

#### 设置标尺
>注意：1.标尺不能重复 2.页面属性只能位列表否者无法发文操作 4.同类标尺不能大于10个

![](http://sjsdxg.oss-cn-hongkong.aliyuncs.com/img/2022-08-01/%E7%BD%91%E9%A1%B5%E6%8D%95%E8%8E%B7_1-8-2022_163549_wxadmin.hbsjsd.cn.jpeg)

第一步：设置栏目标识`news1，news2，news3，news4，news5、`可选中，一般设置了10个标尺
第二步：前端调用我这选用的是`news1`使用方式如下
```html
        {volist name="news1" id="vo" offset="0" length='6'}
        <div class="col-md-6 col-sm-4 col-12">
            <div class="content imghvr-fade">
                <img {if condition="$vo['pic'] eq ''" }src="{$temp_css}/images/work1.jpg" {else/}src='{$vo.pic}'{/if}
                alt="">
                <a href="{:url('Article/index',array('aid'=>$vo['id']))}">
                    <div class="caption">
                        <h6>{$vo.title}</h6>
                        <p>{$vo.description|delhtml=###|cut_str="100"}</p>
                    </div>
                </a>
            </div>
        </div>
        {/volist}
```
显示条数 `length`

A链接`{:url('Article/index',array('aid'=>$vo['id']))}`

循环区域` {volist name="news1" id="vo" offset="0" length='6'}{/volist}`

图片调用`{if condition="$vo['pic'] eq ''" }src="{$temp_css}/images/work1.jpg" {else/}src='{$vo.pic}'{/if}`

`{if condition="$vo['pic'] eq ''" }`if判断图片是否为空，如何为空显示默认图片，否则显示上传的图片

`{:url('Article/index',array('aid'=>$vo['id']))}`A标签链接Article/index跳转方法模型 $vo['id']为文章ID

`{$vo.content|delhtml=###|cut_str="100"}` `description`对应数据表内容，可以替换其他字段，`delhtml`为去除内容中HTML标签 ，`cut_str`为显示字数 [其他字段详情》》](http://help.hbsjsd.cn/art/list/14.html "其他字段详情》》")

特殊字段日期调用方式`{$vo.time|date="Y-m-d H:s",###}
Y年 m月 d日 H时 s分  -可以替换其他`

------------

案例普通列表显示
```html
            {volist name="news1" id="vo" offset="0" length='6'}
            <div class="col col-sm-12 col-12 col-md-4">
                <div class="content">
                    <img {if condition="$vo['pic'] eq ''" }src="{$temp_css}/images/blog3.jpg" {else/}src='{$vo.pic}'{/if} alt="{$vo.title}" class="w-100">
                    <div class="content-text">
                        <h5><a href="{:url('Article/index',array('aid'=>$vo['id']))}">{$vo.title}</a></h5>
                        <span>{$vo.time|date="Y-m",###}</span>
                        <p class="mb-0">{$vo.content|delhtml=###|cut_str="50"}</p>
                    </div>
                </div>
            </div>
            {/volist}
```
显示条数 `length`

A链接`{:url('Article/index',array('aid'=>$vo['id']))}`

循环区域` {volist name="news1" id="vo" offset="0" length='6'}{/volist}`

图片调用`{if condition="$vo['pic'] eq ''" }src="{$temp_css}/images/work1.jpg" {else/}src='{$vo.pic}'{/if}`

`{if condition="$vo['pic'] eq ''" }`if判断图片是否为空，如何为空显示默认图片，否则显示上传的图片

`{:url('Article/index',array('aid'=>$vo['id']))}`A标签链接Article/index跳转方法模型 $vo['id']为文章ID

特殊字段日期调用方式`{$vo.time|date="Y-m-d H:s",###}
Y年 m月 d日 H时 s分  -可以替换其他`

#### 返回值

```json
数组模式返回需要使用上门循环语句显示
 0 => array:21 [
      "id" => 9
  "cate_name" => "帮助中心"
  "title" => "" //栏目名称
  "keywords" => ""//关键词
  "desc" => ""//描述
  "content" => ""//内容
  "status" => 1//审核状态
  "jump_id" => 0//是否跳转
  "img" => ""//封面图
  "cate_attr" => 1 //栏目类型 1列表页 2单页 3跳转 使用类型2【/index_tmp】类型  【list_tmp】【article_tmp】无效 ，使用类型3【/article_tmp】者【index_tmp】【index_tmp】无效
  "list_tmp" => "list_article.html" //跳转列表页
  "index_tmp" => "index_article.html" //单页地址
  "article_tmp" => "article_article.html" //内容页
  "link" => ""//类型3跳转页
  "sort" => 50//栏目排序
  "model_id" => 1
  "bottom_nav" => 0//是否底部显示0显示1不显示
  "pid" => 0//顶级栏目标识 0为顶级
  "mark" => ""
  "thumb" => 1
  "uid" => 1
    ]
```