pug忘備録

基本

インデントで入れ子を表現するスタイルのテンプレートエンジン

// コメント 「//」
// ここはコメントです
// クラス指定 「.」
p.hoge
// ID指定 「#」
p#huga

変数宣言、展開/jsの実行

- var 変数名 で変数の宣言ができる
#{} で囲まれた箇所で変数展開が行われる。また、jsの実行もできる

// 宣言
- var hoge = 'にゃあああ'

// 展開
p #{hoge}

// jsも使用可能
p #{hoge.split('あ')[0]}

// タグの中で変数展開した際に、変数にタグとして認識できる文字が入っていてもタグとして認識されない
- var huga = '一行目<br>二行目'
div #{huga}

for/each

- var piyo = [1, 2, 3]
// for は頭に - が必要
- for (var i = 0; i < piyo.length; i++)
  p #{piyo[i]}
// each は頭に - が不要
each element in piyo
  p #{element}

if/switch(case)

//if (unlessも使える)
if 条件
  p aaaaaa
else if 条件
  p bbbbb
else
  p ccccc

// switch(case)
case 比較対象
  when 条件
    p aaaaaaa
  when 条件
    p bbbbbbb
  when 条件
    p ccccccc
  default
    p ddddddd

テンプレート継承

ページ共通で使う共通テンプレートをページ別のテンプレートが継承することができる

継承される側

// 継承される側は block キーワードを使う
// content block を継承された際に置換する
body
  block content

継承する側

// 継承する側は、extends キーワードでどのテンプレートを継承するのか宣言する
extends layout
// そしてどのブロックなのかを、継承される側同様 block キーワードを使って宣言する
block content
  h1 以下コンテンツ