在Pug中迭代多个数组

时间:2017-09-05 16:06:37

标签: arrays node.js express iteration pug

我正在使用Node和Express制作图库应用。我正在使用Pug作为我的模板引擎。我有完整大小的单独文件夹,图像和缩略图。基本上我想要的只是渲染缩略图并使缩略图成为该图像的链接。

我从路径传递了一个带有两个数组的对象,并将其输出到控制台:

    { link:
   [ '/images/20170902_164510.jpg',
     '/images/IMG-20170903-WA0002.jpg',
     '/images/IMG-20170903-WA0003.jpg',
     '/images/IMG-20170903-WA0004.jpg' ],
  thumb:
   [ '/thumbnails/20170902_164510.jpg',
     '/thumbnails/IMG-20170903-WA0002.jpg',
     '/thumbnails/IMG-20170903-WA0003.jpg',
     '/thumbnails/IMG-20170903-WA0004.jpg' ] }

我的Pug模板如下

 each image in images
            a(href=image.link, data-toggle='lightbox')
                img(src=image.thumb)

这不会向页面输出任何内容。

如果我这样做,它会起作用

 each image in images.thumb
            a(href=image, data-toggle='lightbox')
                img(src=image)

但仅适用于缩略图数组。那么如何以适当的方式访问两个数组呢?我可以分离链接和缩略图?

提前谢谢!

1 个答案:

答案 0 :(得分:2)

我实际上设法让它发挥作用。

我的循环如下

each image, i in images.thumb
            a(href=images.link[i], data-toggle='lightbox')
                img(src=image)

这正是我想要的。希望这将有助于将来的某个人!