列表页完整列表展示

头部底部 公共部分可以参考首页制作步骤
名称默认为`list_article.html`
1.导入静态资源文件到`template`文件夹下

2.启用这个项目 点击完整管理-》对应网站点击使用，

3.修改js css 图片调用路径 `{$temp_css}`
格式
`  <link rel="stylesheet" href="{$temp_css}/font/iconfont.css">`
`<script type="text/javascript" src="{$temp_css}/js/wow.min.js"></script>`

**4.修改 title、keywords、desc**
首页设置  其他页面设置 [链接地址](http://help.hbsjsd.cn/art/list/3.html "链接地址")
```html
   <title>{$cates.cate_name}-{$confs.sitename}</title>
    <meta name="keywords" content="{$cates.keywords?$cates.keywords:$confs.keywords}"/>
    <meta name="description" content="{$cates.desc?$cates.desc:$confs.desc}"/>
```

**5.分割公共部分**
一般为头部：我这命名为`head.html` 可之定义

底部：我这命名为`footer.html` 可之定义

**使用方式**

`{include file="xuexiao/head"}`

`{include file="xuexiao/footer"}`

`xuexiao`前端页面目录名称

`head`前端切开页面 注意不需要带后缀，否则无效

6.头部导航替换显示 [详情》》](http://help.hbsjsd.cn/art/list/39.html "详情》》")
导航LOGO修改 联系方式修改 可参考 [详情》》](http://help.hbsjsd.cn/art/list/57.html "详情》》")

LOGO 需要图片 调用方式 `__LOGO__/{$confs.logo}`

其他字段调用方式例如电话 `{$confs.dianhua}`

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

#### **列表页大图设置**
```html
 <img src="{if condition="$topCates['img'] eq ''"}https://www.hbsjsd.cn/public/static/index/uploads/img\20191210\79bc1e206058ba90fc889eaf586e95e6.jpg{else/}/{$topCates.img}{/if} " style="width: 100%; height:100%" alt="{$cates.cate_name}">
```
图片调用`{if condition="$topCates['img'] eq ''"}https://www.hbsjsd.cn/public/static/index/uploads/img\20191210\79bc1e206058ba90fc889eaf586e95e6.jpg{else/}/{$topCates.img}{/if}`
`{if condition="$topCates['img'] eq ''"}`if判断图片是否为空，如何为空显示默认图片，否则显示上传的图片

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

#### 当前位置：****
```html
{volist name="pos" id="cate"}
                        <a href='{if condition="$cate['cate_attr'] eq 1"}{:url('cate/index',array('cid'=>$cate['id']))}{/if}
                        {if condition="$cate['cate_attr'] eq 2"}{:url('page/index',array('cid'=>$cate['id']))}{/if}
                        {if condition="$cate['cate_attr'] eq 3"}{$cate.link}{/if}'>{$cate.cate_name}</a> {if condition="$i neq count($pos)"}>{/if}
                        {/volist}
```
当前所在栏目`{$cates.cate_name}`

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

#### 列表循环****
```html
            {volist name="artRes" id="vo"}
            <div class="col col-md-4 col-sm-6 col-12">
                <div class="content">
                    <img {if condition="$vo['pic'] eq ''" }src='{$temp_css}/images/blog2.jpg' {else/}src='{$vo.pic}'{/if}
                    alt="" 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/d",###}</span>
                        <p class="mb-0">{$vo.content|delhtml=###|cut_str="50"}</p>
                    </div>
                </div>
            </div>
            {/volist}
```
分页调用` {$artRes->render()}`
注意：分页放置在`volist`循环区域外

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

循环区域` {volist name="artRes" id="vo"}{/volist}`

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

`{if ondition="$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分  -可以替换其他`

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

#### **栏目导航制作：**
当前所在栏目上级栏目，父级栏目名称`<h3 class style>{$topCates.cate_name}</h3>`
循环显示当前栏目上级栏目下的字栏目，兄弟栏目
```html
{volist name="sonCateRes" id="vo"}
    <li {if condition="$vo['id'] eq $cid"}class="current"{/if}><a href="{$vo.cate_attr|makeurl=###,$vo.id}">{$vo.cate_name}</a><i></i></li>
{/volist}
```

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

#### **推荐文章**
使用方式
```html
 {volist name="pros" id="vo"  offset="0" length='4'}
     <li class><a href="{:url('Article/index',array('aid'=>$vo['id']))}"  date-src="{:url('Article/index',array('aid'=>$vo['id']))}" target>{$vo.title}</a><i></i></li>
 {/volist}
```
A链接`{:url('Article/index',array('aid'=>$vo['id']))}`

循环区域` {volist name="artRes" id="vo"}{/volist}`

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

`{if ondition="$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分  -可以替换其他`

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

速建时代TPCMS管理系统

列表页完整列表展示