BenderIsGreat34
@BenderIsGreat34
junior front-end

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

Работаю с pug и bootstrap4, по тз нужно сделать так, чтобы карточка была сверстана один раз и потом 6 раз вызывалась.
сначала думал, что надо делать на миксинах, но в тз четко указано, что карточка должна быть сверстана один раз.
решил, что стоит сделать отдельную страничку, сделать в ней одну карточку и 6 раз вставить в паг при помощи
include index.html.
Подскажите, кто как бы сделал?
5cea9f8671581648642461.png
  • Вопрос задан
  • 98 просмотров
Решения вопроса 1
BenderIsGreat34
@BenderIsGreat34 Автор вопроса
junior front-end
реализовал таким способом
- 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)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
SkiperX
@SkiperX Куратор тега CSS
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({[],[],[]})
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы