剑鱼论坛的主题里面如何实现多图输出

 剑鱼论坛 发表于 2021年05月16日 剑鱼主题教程  176
剑鱼论坛
LV 7 大学
最后在线:5天前
加入时间:2年前
主帖:136  跟帖:86

我们前面在主题教程的《剑鱼论坛的主题制作首图标签的使用》一文里面介绍了怎么在列表页输出图片,使得界面内容更丰满些,但是文中介绍的只是一张图片的输出,如果我们需要输出多张图片,又该怎么办呢?

这篇我们就来介绍怎么在列表页的每一项里面输出多张图片,我们先看下面的示例代码:

{volist name="jianyu.tie" id="vo"}
其他html代码和标签
{volist name="$vo.tupianzu" id="tu"}
<img src="{$tu}">
{/volist}
其他html代码和标签
{/volist}

上面的标签就可以输出多图的输出,为了说明清晰,这里省略了其他HTML代码以及循环内部的其他标签。

我们来详细解释一下上面的代码。

这个代码里面有两个“volist”,表示有两个循环,我们称对于“jianyu.tie”标签的循环为外循环,对于“$vo.tupianzu”标签的循环为内循环。

外循环我们在之前的教程里面接触过,应该比较熟悉了,这里主要解释一下内循环,也就是下面的代码:

{volist name="$vo.tupianzu" id="tu"}
<img src="{$tu}">
{/volist}

上面的代码就是前面代码里面的内循环代码,这里提取出来,主要是为了您看起来更清楚些。

这个循环是对于“$vo.tupianzu”标签来作的循环,“$vo.tupianzu”标签实际是外循环内的一个标签,所以我们用“$vo”开头。

再看中间的代码“<img src="{$tu}">”,这行代码实际就是HTML输出图片的代码,img标签的“src”属性我们使用了剑鱼的标签“{$tu}”,“{$tu}”表示图片的地址。

上面的代码输出的是所有图片,如果您只需要输出部分图片,那么又该怎么办呢?

看下面的代码:

{volist name="$vo.tupianzu" id="tu" offset="0" length="5"}
<img src="{$tu}">
{/volist}

上面的代码增加了“offset="0" length="5"”,解释一下什么意思。

“offset”表示从哪个图片开始输出,一般我们从第一张图开始输出,那么这里就是“0”,如果您需要从第二张图开始输出,那么就要填“1”。“length”是指输出的长度,在这里也就是输出多少张图片,我们这里假设是5张,如果您需要输出3张,那么在这里填“3”就可以了。

现在您可以修改一下主题,把上面的代码加进去,看一下是否可以输出多张图片了,当然,前提是您的帖子里面有图片。

至于图片显示的样式和大小,这里不再赘述,因为都是属于HTML的范畴,您可以通过HTML代码和css样式来进行调整。

论坛主帖
261
论坛跟帖
284
在线访客
1
今日主帖
0
今日跟帖
0
今日注册
0
309
http://jianyuluntan.com/gentie.html
http://jianyuluntan.com/postzan.html
http://jianyuluntan.com/postcai.html
http://jianyuluntan.com/postshoucang.html
http://jianyuluntan.com/gentiezan.html
http://jianyuluntan.com/gentiecai.html
http://jianyuluntan.com/huifu.html
http://jianyuluntan.com/xiugai.html
http://jianyuluntan.com/shanchugentie.html
1
XzA=
1
© 2019 - 2021 剑鱼论坛 版权所有
Powered by JianYuLunTan
剑鱼论坛 976666861
http://jianyuluntan.com/feedback.html
http://jianyuluntan.com/qiandao.html
http://jianyuluntan.com/denglu.html
0
http://jianyuluntan.com/adenglu.html
0
剑鱼论坛