タグ属性はHTML (オプションのコンマ付き)に似ていますが、その値は通常のJavaScriptにすぎません。
a(href='//google.com') Google
a(class='button' href='//google.com') Google
a(class='button', href='//google.com') Google<a href="//google.com">Google</a>
<a class="button" href="//google.com">Google</a>
<a class="button" href="//google.com">Google</a>通常のJavaScriptも問題なく動作します。
- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')<body class="authed"></body>複数行の属性
多数の属性がある場合は、それらを多数の行に分散することもできます。
input(
type='checkbox'
name='agreement'
checked
)<input type="checkbox" name="agreement" checked="checked" />JavaScriptランタイムがES2015テンプレート文字列(Node.js/io.js 1.0.0以降を含む)をサポートする場合は、その構文を属性に使用できます。これは、非常に長い値を持つ属性に非常に便利です。
input(data-json=`
{
"very-long": "piece of ",
"data": true
}
`)<input data-json="
{
"very-long": "piece of ",
"data": true
}
" />特殊な属性名の指定
属性名にJavaScript構文と干渉する可能性のある文字が含まれている場合は、属性名を引用符（"" または '',[]()
//- この場合、` (click) `は属性名ではなく関数呼び出しとして扱われ、異常なエラーが発生します。
div(class='div-class' (click)='play()')index.pug:4:11
1| //- 関数を呼び出すと指定、異常なエラーが発生します。
> 2| div(class='div-class' (click)='play()')
-----------------^
Syntax Error: Assigning to rvaluediv(class='div-class', (click)='play()')
div(class='div-class' '(click)'='play()')<div class="div-class" (click)="play()"></div>
<div class="div-class" (click)="play()"></div>変数の挿入
注意
以前のバージョンのPug/Jadeは、以下のような補間構文をサポートしていました。
a(href="/#{url}") Linkこの構文はサポートされなくなりました。代替案は以下の通り。(Pug v2と以前のバージョンとの間の非互換性についての詳細は、Migrating to Pug v2を参照してください。)
属性に変数を含めるには、次の方法があります。
1. JavaScriptで属性を記述する
- var url = 'pug-test.html';
a(href='/' + url) Link
- url = 'https://example.com/'
a(href=url) Another link<a href="/pug-test.html">Link</a>
<a href="https://example.com/">Another link</a>2. JavaScriptランタイムがES2015 template strings (Node.js/io.js 1.0.0以降を含む)をサポートしている場合は、その構文を使用して属性を単純化することもできます。
- var btnType = 'info'
- var btnSize = 'lg'
button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize)
button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)<button class="btn btn-info btn-lg" type="button"></button>
<button class="btn btn-info btn-lg" type="button"></button>エスケープされない属性
デフォルトでは、すべての属性がエスケープされます。つまり、攻撃(クロスサイト・スクリプティングなど)を防ぐために、特殊文字がエスケープシーケンスに置き換えられます。特殊文字を使用する必要がある場合は、!= の代わりに = を使用してください。
div(escaped="<code>")
div(unescaped!="<code>")<div escaped="<code>"></div>
<div unescaped="<code>"></div>注意
エスケープされていないバッファされたコードは危険です。クロスサイト・スクリプティングを回避するために、ユーザー入力をすべて消去する必要があります。
boolean属性
boolean属性はパグ (Pug) によってミラーリングされます。ブール値(trueとfalse)を使用できます。値が指定されていない場合は、trueとみなされます。
input(type='checkbox' checked)
input(type='checkbox' checked=true)
input(type='checkbox' checked=false)
input(type='checkbox' checked=true.toString())<input type="checkbox" checked="checked" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="true" />doctypeがhtmlの場合、Pugは属性をてミラーリングしないことを認識し、代わりに簡潔なスタイル(すべてのブラウザで理解される)を使用します。
doctype html
input(type='checkbox' checked)
input(type='checkbox' checked=true)
input(type='checkbox' checked=false)
input(type='checkbox' checked=true && 'checked')<!DOCTYPE html>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked="checked">スタイル属性
通常の属性と同様に、style属性には文字列を指定できます。また、JavaScriptでスタイルを生成する場合に便利なオブジェクトにすることもできます。
a(style={color: 'red', background: 'green'})<a style="color:red;background:green;"></a>クラス属性
class属性は、通常の属性と同様に文字列にすることができます。クラス名の配列を指定することもでき、JavaScriptから生成する場合に便利です。
- var classes = ['foo', 'bar', 'baz']
a(class=classes)
//- the class attribute may also be repeated to merge arrays
a.bang(class=classes class=['bing'])<a class="foo bar baz"></a>
<a class="bang foo bar baz bing"></a>クラス名をtrueまたはfalseの値にマップするオブジェクトにすることもできます。これは、条件付きクラスを適用する場合に便利です。
- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About<a href="/">Home</a>
<a class="active" href="/about">About</a>classリテラル
クラスは、.classname構文を使用して定義できます。
a.button<a class="button"></a>divはよく使用されるタグなので、タグ名を省略するとデフォルトになります。
.content<div class="content"></div>IDリテラル
IDは、#idname構文を使用して定義できます。
#content<div id="content"></div>divはよく使用されるタグなので、タグ名を省略するとデフォルトになります。
.content<div class="content"></div>&attributes
「アンドアトリビュート」と呼ばれるこの&attributes構文を使うと、オブジェクトを要素の属性に分解することができます。
div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})<div id="foo" data-bar="foo" data-foo="bar"></div>上の例では、オブジェクトリテラルを使用しています。ただし、値がオブジェクトである変数も使用できます。(参照:Mixin Attributes).
- var attributes = {};
- attributes.class = 'baz';
div#foo(data-bar="foo")&attributes(attributes)<div class="baz" id="foo" data-bar="foo"></div>注意
&attributesを使用して適用された属性は、自動的にエスケープされません。クロスサイト・スクリプティング (XSS) を回避するために、ユーザー入力をすべて消去する必要があります。mixin呼び出しから属性を渡す場合、これは自動的に行われます。
コメント