PugでHTMLタグ部分に変数を使用する

Pugを使用する際、HTMLタグ部分で変数を使って出し分けたいことがあったので、変数を使用する方法を試してみました。

サンプルコード

今回やりたかったことは、トップと下層ページでヘッダーのロゴを囲うタグを出し分けたいという内容になります。
単純に出し分けをするだけであれば、以下のようにif文でロゴ周りのパーツを出し分けすることで実装は可能です。

トップページのPugファイル

- var pagename = 'top';

ヘッダーの共通パーツ

if pagename=='top'
  h1.l-header-logo
    a(href="/")
      img(src="/img/common/logo.png" alt="サイト名")
else
  p.l-header-logo
    a(href="/")
      img(src="/img/common/logo.png" alt="サイト名")

これでトップと下層でタグの出し分けができました。

トップページ

<h1 class="l-header-logo"><a href="/"><img src="/img/common/logo.png" alt="サイト名"></a></h1>

下層ページ

<p class="l-header-logo"><a href="/"><img src="/img/common/logo.png" alt="サイト名"></a></p>

これでも実装は問題ないのですが、ロゴ周りで変更があった場合などに2箇所変更する必要が出てきます。
今回やりたいことはh1とpの出し分けのみなので、もう少し変更箇所を少なくなるようにしてみます。

if pagename=='top'
  - var logo = 'h1';
else
  - var logo = 'p';

#{logo}.l-header-logo
  a(href="/")
    img(src="/img/common/logo.png" alt="サイト名")

if文で変数にタグの種類を格納して、その変数を使ってロゴ周りの実装を行なっています。
これで先ほどと同様に、トップと下層でタグの出し分けができました。

トップページ

<h1 class="l-header-logo"><a href="/"><img src="/img/common/logo.png" alt="サイト名"></a></h1>

下層ページ

<p class="l-header-logo"><a href="/"><img src="/img/common/logo.png" alt="サイト名"></a></p>