はじめに

pugでの「ちょっとだけ」便利な記述などを書いているだけなので、
基本的な部分については触れていません。

今回作ったデモ

each

index.pug

    -
     const test = [
      {
        "url": 'https://sample01',
        "text": 'いっこめ',
        "class":'class01'
      },
      {
        "url": 'https://sample02',
        "text": 'にこめ',
        "class":'class02'
      },
      {
        "url": 'https://sample03',
        "text": 'さんこめ',
        "class":'class03'
      },
    ];

    ul
      each item in test
        li
          a(href=`${item.url}`)
            span
              | !{item.text}
            span(class=`${item.class}`)
              | pug

each結果

index.html

    <ul>
      <li>
         <a href="https://sample01">
          <span>いっこめ</span>
          <span class="class01">pug</span>
         </a>
      </li>
      <li>
         <a href="https://sample02">
          <span>にこめ</span>
          <span class="class02">pug</span>
        </a>
      </li>
      <li>
        <a href="https://sample03">
         <span>さんこめ</span>
         <span class="class03">pug</span>
        </a>
      </li>
    </ul>

ul liなどでリストや同じ要素を連続して使うときなどに。
クラス名やurlを変えたりする際は、上記の様に呼び出します。(他にも方法はあると思いますが。)

for

index.pug

   ul
     - for (let i = 0; i < 3; i++)
       li
         h2(class="class" + `${i}`)
           | たいとる
         a(href="#") ぼたん

for結果

index.html

    <ul>
      <li>
        <h2 class="class0">たいとる</h2>
        <a href="#">ぼたん</a>
      </li>
      <li>
        <h2 class="class1">たいとる</h2>
        <a href="#">ぼたん</a>
      </li>
      <li>
        <h2 class="class2">たいとる</h2>
        <a href="#">ぼたん</a>
      </li>
    </ul>

こちらもリストなどを作る時に便利かも。
画像を連続して出す時(picture1.pngとかで管理していたら)

img(src="picture" + `${i}` + ".png")

とかでも使えそう。

変数

index.pug

   - const title = "たいとるだよ";

   h1
     | !{title}

変数結果

index.html

<h1>たいとるだよ</h1>

まとめ

ベストプラクティスではないとは思いますが、今後も改良して使い勉強していこうと思います。
今度はpug(テンプレートエンジン)の醍醐味でもあるテンプレート作成をしよーかなと。

ソースコード

参考