Pugで条件分岐やループを使ってみる

Pugのテンプレート内でfor文やeach文、if文、switch文などを使ってみます。

for文

まずはfor文を簡単に使ってみます。

Pug

- for (var x = 0; x < 3; x++)
  li item#{x}

コンパイルすると以下のように出力されます。

HTML

<li>item0</li>
<li>item1</li>
<li>item2</li>

ページ毎のタイトルとディレクトリを配列で用意して、for文でナビゲーションを出力させてみます。

Pug

-
  var pages = [
    {
      pageName: 'About',
      pageDir: 'about'
    },
    {
      pageName: 'Product',
      pageDir: 'product'
    },
    {
      pageName: 'Contact',
      pageDir: 'contact'
    }
  ]

ul.gnav
  - for (var x = 0; x < pages.length; x++)
    li: a(href='/'+pages[x]['pageDir']+'/') #{pages[x]['pageName']}

HTML

<ul class="gnav">
  <li><a href="/about/">About</a></li>
  <li><a href="/product/">Product</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

each文

each文を使ってみます。

Pug

- var list = ['フォスフォフィライト', 'ダイヤモンド', 'カーボナード', '辰砂']
  each item in list
    li #{item}

HTML

<li>フォスフォフィライト</li>
<li>ダイヤモンド</li>
<li>カーボナード</li>
<li>辰砂</li>

先ほどのナビゲーションのサンプルをeach文で作成してみます。

Pug

-
  var pages = [
    {
      pageName: 'About',
      pageDir: 'about'
    },
    {
      pageName: 'Product',
      pageDir: 'product'
    },
    {
      pageName: 'Contact',
      pageDir: 'contact'
    }
  ]

ul.gnav
  each page in pages
    li: a(href='/'+page['pageDir']+'/') #{page['pageName']}

HTML

<ul class="gnav">
  <li><a href="/about/">About</a></li>
  <li><a href="/product/">Product</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

if文

if文を使ってみます。

Pug

- var name = '辰砂'
  if name=='フォスフォフィライト'
    p 硬度三半です。
  else if name=='辰砂'
    p 硬度二です。
  else
    p わかりません。

  unless name=='フォスフォフィライト'
    p フォスではありません。
  else
    p フォスです。

「unless 条件」は「if !条件」と同じです。

HTML

<p>硬度二です。</p>
<p>フォスではありません。</p>

先ほどのナビゲーションのサンプルで、現在地にclassを付けるようにしてみます。

Pug

-
  var pages = [
    {
      pageName: 'About',
      pageDir: 'about'
    },
    {
      pageName: 'Product',
      pageDir: 'product'
    },
    {
      pageName: 'Contact',
      pageDir: 'contact'
    }
  ]

- var thisPageDir = 'product'

ul.gnav
  - for (var x = 0; x < pages.length; x++)
    if pages[x]['pageDir']==thisPageDir
      li.is-current: a(href='/'+pages[x]['pageDir']+'/') #{pages[x]['pageName']}
    else
      li: a(href='/'+pages[x]['pageDir']+'/') #{pages[x]['pageName']}

HTML

<ul class="gnav">
  <li><a href="/about/">About</a></li>
  <li class="is-current"><a href="/product/">Product</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

switch文

JavaScriptのSwitch文にあたるcase文を使ってみます。

Pug

- var name = 'フォス'
case name
  when '金剛'
    - break
  when 'フォス'
    p 硬度三半です。
  when 'シンシャ'
    p 硬度二です。
  when 'ダイヤモンド'
  when 'ボルツ'
    p 硬度十です。
  default
    p わかりません。

コンパイルすると以下のように出力されます。

HTML

<p>硬度三半です。</p>

nameに「ダイヤモンド」または「ボルツ」を指定すると、以下のように出力されます。

HTML

<p>硬度十です。</p>

出力内容を省略することで、次の条件と同じ出力になります。

nameに「金剛」を指定すると、何も出力されません。
特に何も出力したくない場合はbreakを追加してください。
　

【参考サイト】

• Code – Pug
• Conditionals – Pug
• Case – Pug