PUGの書き方

PUGの書き方基礎

https://pughtml.com/ で確認しながら書くと良さそう。
https://pugjs.org/ ←本家サイト

基本的にスペースの有無には敏感な書式なので、例でスペースを入れていないところに入れたりする場合は注意すること。

最初の単語がタグになる

PUG

p

=>HTML

<p></p>

2番目以降の単語はそのタグの中の内容

PUG

p contents

=>HTML

<p>contents</p>

タグの入れ子はインデントで表現

PUG

div
  p test

=>HTML

<div><p>test</p></div>

属性はタグ名の直後の()の中に書く

PUG

a(href="link.html") link

=>HTML

<a href="link.html">link</a>

クラス名はタグ名の後に、「.」をつけて書く。

PUG

p.test

=>HTML

<p class="test"></p>

ID名はタグ名の後に、「#」をつけて書く。

PUG

p#test01

=>HTML

<p id="test01"></p>

タグ名を省略してクラス名やID名から始めた場合はdivタグになる

PUG

.test

=>HTML

<div class="test"></div>

複数行の内容を書きたい場合

タグの直後「.」で終わらせ、次の行にインデントを下げて書く

PUG

script(type='text/javascript').
      let a = "javascript";
      let b = "java";

=>HTML

<script type="text/javascript">
    let a = "javascript";
    let b = "java";
</script>

Node.jsから渡された変数を呼び出すとき

例えば　<p>変数の値</p>　というHTMLを出力したいとき、

変数の値をエスケープ処理する場合

p #{変数名}もしくはp= 変数名

例：let var1 = "test"なら、

PUG

p #{var1}
p= var1

=>HTML

<p>test</p>

とする。 p=の「=」の前にスペースを入れてはダメ。

変数の値をエスケープ処理しない場合

p !{変数名}

例：let var1 = '<a href="link.html">test</a>'なら、
PUG

p !{var1}

=>HTML

<p><a href="link.html">test</a></p>

プロパティで変数を使う

例えばlet classname='aaa'ならば、
PUG

div(class=classname)
div(class=`${classname}`)

=>HTML

<div class="aaa"></div>

普通の装飾なしの文字列を他のタグなどと一緒に一行で出力したい場合

例えば<p>befor <span class="test">spanタグ</span> after</p>と出力したい場合。

1．そのまま書く　HTMLタグを混ぜて良ければ

    p befor <span class="test">spanタグ</span> after

2．#[]を使う　意地でもHTMLを書かないならば

    p befor #[span.test spanタグ] after

3．「|」を使う　変数と組み合わせるならこの方法？

    p befor 
      span.test spanタグ
      | after

参考サイト

Next Step

forやif文など　https://docs.qranoko.jp/static/pug.html#example