Pugでタグの外にテキストを出力する

2017.11.27

Pugでチェックボックスとテキストを並べて出力しようとしたときに少し迷ったのでメモ。

サンプルコード

最初は特に考えず、以下のような記述にしていました。

label
  input(type='checkbox') チェックボックス1
label
  input(type='checkbox') チェックボックス2

これでコンパイルすると、「input is a self closing element: <input/> but contains nested content.」と表示され、コンパイルがうまくいきませんでした。
inputには閉じタグが無いので、テキストを追加できないことが原因のようです。

バーティカルバーを使って記述することで、想定した出力ができました。

label
  input(type='checkbox')
  | チェックボックス1
label
  input(type='checkbox')
  | チェックボックス2

<label>
  <input type="checkbox"/>チェックボックス1
</label>
<label>
  <input type="checkbox"/>チェックボックス2
</label>

土