くまだどうも、くまだです。
Pugでループ処理を使って要素ごとに情報を出しわけるときのメモ。
過去にPugの記事も一つ書いています。
Pugのループ処理で要素ごとに情報を出しわける
Pugでカード型アイテムの配置で、アイテムごとに内容を出しわけたい場合は、下記のようになります。(CSSは省略）
.p-cards
-
const cards = [
{
cardTitle: "タイトル1",
text: 'テキスト1の文章',
img: "dummy.png"
},
{
cardTitle: "タイトル2",
text: 'テキスト2の文章',
img: "dummy2.jpg"
},
{
cardTitle: "タイトル3",
text: 'テキスト3の文章',
img: "dummy3.jpg"
},
]
each card in cards
.p-card
.p-card__img
img(src=`images/${card.img}`, alt="")
p.p-card__title #{card.cardTitle}
p.p-card__text #{card.text}上記のPugの記述が下記のHTMLとして出力されます。
<div class="p-cards">
<div class="p-card">
<div class="p-card__img"><img src="images/dummy.png" alt=""></div>
<p class="p-card__title">タイトル1</p>
<p class="p-card__text">テキスト1の文章</p>
</div>
<div class="p-card">
<div class="p-card__img"><img src="images/dummy2.jpg" alt=""></div>
<p class="p-card__title">タイトル1</p>
<p class="p-card__text">テキスト1の文章</p>
</div>
<div class="p-card">
<div class="p-card__img"><img src="images/dummy3.jpg" alt=""></div>
<p class="p-card__title">タイトル1</p>
<p class="p-card__text">テキスト1の文章</p>
</div>
</div>
要素ごとに情報を出しわけたい部分（テキストやタイトル、画像など）を変数でcard.textのような感じで記述します。
なお、閉じタグがないのは、Pugの記法です。
前回、EJSのfor文で情報出しわけ書きましたが、そちらに比べるとPugの閉じタグがない書き方は違和感覚えるかもです。
出しわけたい情報は、配列にして格納します。
-
const cards = [
{
cardTitle: "タイトル1",
text: 'テキスト1の文章',
img: "dummy.png"
},
{
cardTitle: "タイトル2",
text: 'テキスト2の文章',
img: "dummy2.jpg"
},
{
cardTitle: "タイトル3",
text: 'テキスト3の文章',
img: "dummy3.jpg"
},
]カード部分をeach文で回します。
each card in cards
.p-card
.p-card__img
img(src=`images/${card.img}`, alt="")
p.p-card__title #{card.cardTitle}
p.p-card__text #{card.text}配列の中の変数がそれぞれ、cardの中に設定されている一致する変数の値に格納されて表示されるイメージです。
他のページで同じコンテンツを使いまわしたい場合でカードの中身だけ変えたい場合は、配列中の変数の値を書き換えればそちらでも異なる情報を表示することができます。
-
const cards = [
{
cardTitle: "タイトル4", // 変数の値を書き換える
text: 'テキスト4の文章',// 変数の値を書き換える
img: "dummy.png"
},
{
cardTitle: "タイトル5",
text: 'テキスト5の文章',
img: "dummy2.jpg"
},
{
cardTitle: "タイトル6",
text: 'テキスト6の文章',
img: "dummy3.jpg"
},
]Pug久々に書きました笑
ここまで読んでくださりありがとうございました。