Pugのコード内で変数を使う方法をメモ。
サンプルコード
変数の宣言はvarで行います。
varの前に「-」が必要なので注意してください。
Pug
1 2 3 4 5 6 7 8 9 | - var pageName = 'ページ名'doctype htmlhtml(lang="ja") head meta(charset="utf-8") title #{pageName} body .contents h1.ttl #{pageName} |
変数を出力する場合、#{変数名}の形で出力できます。
HTMLにコンパイルすると、以下のようになりました。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8"> <title>ページ名</title> </head> <body> <div class="contents"> <h1 class="ttl">ページ名</h1> </div> </body></html> |
注意点として、属性値で使用する場合は#{変数名}だとコンパイルエラーになります。
属性値で変数を使用する場合、変数名を直接指定してください。
Pug
1 2 3 4 5 6 7 8 9 10 11 12 | - var pageName = 'ページ名'- var pageDescription = 'ページの説明文です。'doctype htmlhtml(lang="ja") head meta(charset="utf-8") title #{pageName} meta(name="description" content=pageDescription) body .contents h1.ttl #{pageName} p.lead #{pageDescription} |
これで以下のようにコンパイルできました。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8"> <title>ページ名</title> <meta name="description" content="ページの説明文です。"> </head> <body> <div class="contents"> <h1 class="ttl">ページ名</h1> <p class="lead">ページの説明文です。</p> </div> </body></html> |
【参考サイト】
コメントが承認されるまで時間がかかります。