幻灯片的输出怎么实现
发布时间:2020年12月11日 访问量:139

我们在《燕子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”就可以了,其他不变。




我要评论
共有0条评论
© 2020 - 2021 燕子CMS
Powered by Yanzi CMS
http://www.yanzicms.com/comment.html
http://www.yanzicms.com/message.html
http://www.yanzicms.com/favorites.html
http://www.yanzicms.com/likes.html