易优CMS:channel的基础用法

用户头像
海口/网页设计师/6年前/104浏览
易优CMS:channel的基础用法
用户头像
优秀欢

介绍channel的基础用法,可以循环嵌套标签。通常用于网站导航以获取站点栏目信息,方便网站会员分类浏览整站信息。

[基础用法]

名称:channel

功能:易优常用标记,可以循环嵌套标签。通常用于网站导航以获取站点栏目信息,方便网站会员分类浏览整站信息

语法:

{eyou:channel type='top' row='8' currentstyle='active'}

<li class="{$field.currentstyle}"><a href='{$field.typeurl}'>{$field.typename}</a> </li>

{/eyou:channel}

参数:

typeid='' 栏目ID,多个请用","分开

row='10' 返回文档列表总数(建议不要与limit属性同时存在,否则row无效)

limit='起始ID,记录数' (起始ID从0开始)表示限定的记录范围(如:limit='1,2' 表示从ID为1的记录开始,取2条记录)

titlelen='30' 栏目名称长度

type='son' 表示下级栏目

  • type='self' 表示同级栏目

  • type='top' 表示顶级栏目

  • type='sonself' 表示当前下级栏目以及同级栏目

  • type='first' 表示当前栏目ID的最顶级栏目下的所有层级栏目集合

currentstyle='' 应用样式class类名

offset=‘0’ 记录的起始ID,默认从0开始,假如指定2,将过滤最前面的2条,从第三条显示

name='' 数组类型的变量名(三级导航时才用到)

empty='' 没有数据时显示的文案

mod='' 每隔N行输出的内容

id='' 可以任意指定循环里的变量名替代field,假设id='field1',模板调用如:{$field.title} 变成 {$field1.title}

底层字段:

请查阅易优Cms官方提供的数据字典,找到表名 ey_arctype

(注:在没有指定typeid的情况下,type标记与模板的环境有关,如:模板生成到栏目一,那么type='son'就表示栏目一的所有子栏目)

 


-------------------------------效果展示--------------------------------
1,调用顶级栏目导航
模板调用代码

{eyou:channel type="top" row="8" id="field" currentstyle="on"}

<li> <a class="{$field.currentstyle}" href="{$field.typeurl}">{$field.typename}</a> </li>

{/eyou:channel}

网站前端显示效果(css样式请自行填充)
 
2.当前栏目下子栏目调用
模板调用代码

{eyou:channel row="6" type ='son' currentstyle="on"}

<li class="{$field.currentstyle}"><a href="{$field.typeurl}" >{$field.typename}</a> </li>

{/eyou:channel}

网站前端显示效果(css样式请自行填充)

【更多示例】

-------------------------------示例1--------------------------------

描述:输出最顶级栏目,不包括子孙栏目,可用于网站简单的顶部导航

{eyou:channel type="top" row="10" currentstyle="active"}

<a href="{$field.typeurl}" title="{$field.typename}" class="{$field.currentstyle}">{$field.typename}</a>

{/eyou:channel}

-------------------------------示例2--------------------------------

描述:输出二个层级栏目(这里用到channel标签层次嵌套,注意属性id | name的用法)

{eyou:channel type='top' row='10' id='field1' currentstyle='active'} // 第一级栏目循环开始

<li>

<a href="{$field1.typeurl}" title="{$field1.typename}" class="{$field1.currentstyle}">

{$field1.typename}

{eyou:notempty name='$field1.children'} // 判断是否有子栏目(该示例指的是第二级栏目)

有子栏目时才显示这里的html代码,比如:箭头、图标等

{/eyou:notempty}

</a>

{eyou:notempty name='$field1.children'} // 判断是否有子栏目(该示例指的是第二级栏目)

<div>

{eyou:channel name='$field1.children' id='field2' row='10'} // 第二级栏目循环开始

<a href="{$field2.typeurl}" class="dropdown-item ">{$field2.typename}</a>

{/eyou:channel} // 第二级栏目循环结束

</div>

{/eyou:notempty}

</li>

{/eyou:channel} // 第一级栏目循环结束

-------------------------------示例3--------------------------------

描述:输出复杂的三个层级栏目(这里用到channel标签层次嵌套,注意属性id | name的用法)

{eyou:channel type='top' row='10' id='field1' currentstyle='active'} // 第一级栏目循环开始

<li>

<a href="{$field1.typeurl}" title="{$field1.typename}" class="{$field1.currentstyle}">

{$field1.typename}

{eyou:notempty name='$field1.children'}

有子栏目时才显示这里的html代码,比如:箭头、图标等

{/eyou:notempty}

</a>

{eyou:notempty name='$field1.children'} // 判断是否有子栏目(第二级栏目)start

<div>

{eyou:channel name='$field1.children' id='field2' row='10'} //第二级栏目循环开始

<div>

<a href="{$field2.typeurl}" class="dropdown-item ">{$field2.typename}</a>

{eyou:notempty name='$field2.children'} // 判断是否有子栏目(第三级栏目)start

<div class="dropdown-menu animate">

{eyou:channel name='$field2.children' id='field3' row='10'} //第三级栏目循环开始

<a href="{$field3.typeurl}" class="dropdown-item ">{$field3.typename}</a>

{/eyou:channel} //第三级栏目循环结束

</div>

{/eyou:notempty} // 判断是否有子栏目(第三级栏目)end

</div>

{/eyou:channel} // 第二级栏目循环结束

</div>

{/eyou:notempty} // 判断是否有子栏目(第二级栏目)end

</li>

{/eyou:channel} //第一级栏目循环结束

-------------------------------示例4--------------------------------

描述:每隔3条输出文档记录

{eyou:channel typeid='文档ID' row='10' mod='3'}

{eyou:eq name='mod' value='0'}

<a href='{$field.typeurl}'>{$field.typename}</a>

{/eyou:eq}

{/eyou:channel}

-------------------------------示例5--------------------------------

描述:mod属性还用于控制一定记录的换行,每3条记录换行一次

{eyou:channel typeid='文档ID' row='10' mod='3'}

<a href='{$field.typeurl}'>{$field.typename}</a>

{eyou:eq name='mod' value='0'}

<br/>

{/eyou:eq}

{/eyou:channel}

-------------------------------示例6--------------------------------

描述:输出指定起始ID的记录,过滤最前面2条,从第三条开始输出

{eyou:channel typeid='栏目ID' type='son' offset='2'}

<a href='{$field.typeurl}'>{$field.typename}</a>

{/eyou:channel}

-------------------------------示例7--------------------------------

描述:内置变量输出数据索引与记录顺序,key 表示索引,默认从0开始;i 表示顺序,默认从1开始。

{eyou:channel type='top'}

{$key} - {$i}

{/eyou:channel}

效果:

0 - 1

1 - 2

2 - 3

3 - 4

4 - 5

-------------------------------示例8--------------------------------

描述:自定义变量名

{eyou:channel type='top' id='field2'}

<a href='{$field2.typeurl}'>{$field2.typename}</a>

{/eyou:channel}

文章来源:https://www.eyoucms.com/doc/label/

0
阅读原文
|
举报
|
收藏
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
卡通风格网页页面3D渲染
卡通女孩与网页表格3D渲染
商务网页
互联网,互联网插画,商务,数据,项目,合作,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,沟通,渐变,蓝色插画,商铺,覆盖,管理,项目管理,效率,提升,高效,关系,拓展,
卡通风格网页页面3D渲染
 网页背景
三位美女围着网页看信息矢量插画
男生坐在网页面前办公矢量插画
B19【星空诗意&网页幽灵按钮】公司产品服务简介汇报
户外旅行飞机情侣假日出行
网页页面矢量插画
卡通风格网页页面3D渲染
网页背景
互联网,互联网插画,商务,数据,项目,合作,精准,投放,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,交流,沟通,渐变
男生和女生站在网页面前矢量扁平插画
3D风格时尚电子商务设计元素
新年快乐送福网页矢量图banner
三个青年正在装修网页矢量插画
网页电商背景矢量插画
卡通女孩与网页表格3D渲染
一个人拿着优惠券准备支付购物电商矢量插画
四个人物分别在上网贴纸合集
卡通风格网页页面3D渲染
卡通风格网页页面3D渲染
三个青年站在网页周边矢量插画
你可能喜欢
相关收藏夹
大家都在看
登录注册