Pug初学者の備忘録：ループ編

5375 ワード
HTML pug HTML5 初心者 HTML テキストリンク

Pug初学者の備忘録です。どんどん追記していきます。

forループ+クラス名を変数展開

完成イメージ
<ul class="items">
  <li class="item i1"></li>
  <li class="item i2"></li>
  <li class="item i3"></li>
</ul>

↑のようにループでli.itemを生成しつつ、それぞれにi1、i2、i3…と番号付のクラス名を振り当てたいときに。

index.pug
ul.items
  - for (var i = 1; i < 4; i++)
    li(class="item i" + i)

もっとスマートな書き方がありそうな気がする…

each+連想配列

完成イメージ
<ul>
  <li><a href="./">Top</a></li>
  <li><a href="./about">About</a></li>
  <li><a href="./works">Works</a></li>
  <li><a href="./contact">Contact</a></li>
</ul>

よくあるメニューリストを作るときに。

index.pug
ul
  -
    var menus = [
      { text: "TOP", url: "./" },
      { text: "About", url: "./about" },
      { text: "Works", url: "./works" },
      { text: "Contact", url: "./contact" }
    ]

  each menu in menus
    li: a(href=menu.url)=menu.text

使いこなせたら楽しそう！引続き勉強していきます。