Pugのコード内で変数を使う方法をメモ。
サンプルコード
変数の宣言はvarで行います。
varの前に「-」が必要なので注意してください。
Pug
- var pageName = 'ページ名'
doctype html
html(lang="ja")
head
meta(charset="utf-8")
title #{pageName}
body
.contents
h1.ttl #{pageName}
変数を出力する場合、#{変数名}の形で出力できます。
HTMLにコンパイルすると、以下のようになりました。
HTML
<!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
- var pageName = 'ページ名'
- var pageDescription = 'ページの説明文です。'
doctype html
html(lang="ja")
head
meta(charset="utf-8")
title #{pageName}
meta(name="description" content=pageDescription)
body
.contents
h1.ttl #{pageName}
p.lead #{pageDescription}
これで以下のようにコンパイルできました。
HTML
<!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>
【参考サイト】
コメントが承認されるまで時間がかかります。