Как выполнить выдачу карточек через Pug?

Question

[Иван]

Работаю с pug и bootstrap4, по тз нужно сделать так, чтобы карточка была сверстана один раз и потом 6 раз вызывалась.
сначала думал, что надо делать на миксинах, но в тз четко указано, что карточка должна быть сверстана один раз.
решил, что стоит сделать отдельную страничку, сделать в ней одну карточку и 6 раз вставить в паг при помощи
include index.html.
Подскажите, кто как бы сделал?

Answer 1

[Иван]

реализовал таким способом

- var gmi = "../img/team-image.png"
            mixin teams(worker)
              div.myCard
                img(class="workers" width="220px", src=gmi, alt="teams")
                h3(class="h3-teams")= worker.h3
                p(class="p-teams")= worker.p
            each item in [{h3: "SEMF UCUK", p:"CEO & FOUNDER"}, {h3: "DIK ADALIN", p:"ENGINEERING"}, {h3: "JENG KOL", p:"DESIGNER"}, {h3: "PET ROMAK", p: "MARKETING"}] 
              +teams(item)

Comments

[Froggyweb]

Решение Алекса лучше и читабельнее.

[Алекс Глебов]

норм решение, человек разобрался и сделал свое)

Answer 2

[Алекс Глебов]

https://pugjs.org/language/iteration.html
через each

- 
  var items = [{
img: '',
title: 'semf ucuk',
description: ""
},
{
img: '',
title: 'semf ucuk',
description: ""
},
{
img: '',
title: 'dik',
description: ""
},
{
img: '',
title: 'jeng',
description: ""
},
{
img: '',
title: 'pet',
description: ""
}]

each item in items
  div.card
    .title!=item.title
    .desc!=item.description

так же карточку можно сделать миксином и передавать items через параметры, по одному или все сразу
+card({[],[],[]})

Comments

[Иван]

Алекс Глебов а для чего

.title!=item.title
    .desc!=item.description

это нужно? я на сайте не встречал знака неравенства

[Алекс Глебов]

BenderIsGreat34, если работает то не нужны, видимо в старой версии были

[Алекс Глебов]

сейчас в доках просто знак =

[Иван]

Алекс Глебов, посидел-посидел, так и не понял, что надо делать) попробовал через миксины, сделал вот что:

mixin card(img, h3, p)
              .card
                img=img
                h3= SEMF UCUK
                p= CEO & FOUNDER
            +card("../img/team-image.png", SEMF UCUK, CEO & FOUNDER)

но не работает