我们在《燕子cms如何添加幻灯片》一文里面介绍了怎么在燕子系统后台添加幻灯片,添加了幻灯片是需要在前端页面输出的,这一篇我们就来介绍一下如何在前端页面输出幻灯片。
输出幻灯片需要用到一个模板标签:slide,使用这个标签就可以输出幻灯片了。
先看下面的例子:
{loop name="slide.slide1" item="item" key="k"}
<div>
<a href="{item.link}">
<img src="{domain}{item.image}">
</a>
<div>
<h5>{item.name}</h5>
<p>{item.description}</p>
</div>
</div>
{endloop}
上面的代码就是输出幻灯片的模板标签语句,我们来详细解释一下。
首先,幻灯片的输出是一个循环输出,我们使用loop来循环输出,loop的属性name表示要循环输出的对象,这里是“slide.slide1”,表示是幻灯片下面幻灯组1。item代表了每个循环项,这个我们在介绍模板语法的时候学习过。这里的key实际上可以省略。
再往下看,在循环体内部,img标签的src属性是一个图片地址,这个图片地址我们用标签“{domain}{item.image}”来表示并输出。a标签的href属性也是一个地址,并且是一个链接地址,我们用标签“{item.link}”来表示并输出。
下面还有幻灯片的标题和描述,我们分别用“{item.name}”和“{item.description}”这两个标签来表示并输出。
上面代码里面的HTML代码只是作个示例,实际的HTML代码请根据实际情况编写,只要把燕子系统的模板标签和语法写对就可以了。
如果您要输出的是第二组幻灯片的内容,那么您只需要把“slide.slide1”改成“slide.slide2”就可以了,其他不变。