Pug - にほんご。

Attributes

更新日: 2018-09-10

属性

タグの属性は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" />

もしES2015のテンプレート文字列(Node.js/io.js 1.0.0以上)が使えるならば、その構文を使うことができます。 長い属性値を持つ場合はとても便利です。

input(data-json=`
  {
    "very-long": "piece of ",
    "data": true
  }
`)
<input data-json="
  {
    &quot;very-long&quot;: &quot;piece of &quot;,
    &quot;data&quot;: true
  }
">

特殊な属性名の指定

属性名にJavaScriptで指定出来ない名称を指定する場合、 ""(ダブルクォート)または''(シングルクォート)で囲むか、 属性を,(カンマ)で区切ってください。 JavaScriptで指定できない名称は、例えば[]や、()で囲まれた名称が考えられます。 (Angular 2でよく使われます。)

//- この例では属性名に"(click)"を
//- 関数呼び出しとして指定しています。
//- このままではエラーが発生します。
div(class='div-class' (click)='play()')
index.pug:4:11
    2| //- 関数呼び出しとして指定しています。
    3| //- このままではエラーが発生します。
  > 4| div(class='div-class' (click)='play()')
-----------------^

Syntax Error: Assigning to rvalue
div(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

この構文は廃止されました。代わりに以下のように指定します。
(以前のバージョンとの違いや互換性、移行方法についてはMigrating to Pug v2を参照して下さい。)

属性に変数を指定する方法はいくつかあります。

  • 単に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>

  • もしES2015のテンプレート文字列(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>

属性値のエスケープ

デフォルトではXSS等の攻撃を防ぐために、属性値は全てエスケープされます。 もしエスケープさせたくない場合は=の代わりに!=を使います。

div(escaped="<code>")
div(unescaped!="<code>")
<div escaped="&lt;code&gt;"></div>
<div unescaped="<code>"></div>

注意

エスケープされていないコードは危険です。XSSを防ぐには、ユーザーの入力情報を全て適切にサニタイズする必要があります。


boolean属性

Pugはboolean属性をミラーリングします。 値は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)
|
|
//- 繰り返し処理したクラス属性にマージすることもできます。
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は一番使うタグなので、divを省略することもできます。

.content
<div class="content"></div>

idリテラル

idは#idname構文を使って指定することができます。

a#main-link
<a id="main-link"></a>

divは一番使うタグなので、divを省略することもできます。

#content
<div id="content"></div>

&attributes

"アンド アトリビュート"と読みます。 &attributesは、要素に対してオブジェクトを分割して挿入することができます。

div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})
<div id="foo" data-bar="foo" data-foo="bar"></div>

上記ではオブジェクトを指定していますが、オブジェクト変数でも可能です。 属性ミックスインを参照してください。

- var attributes = {};
- attributes.class = 'baz';
div#foo(data-bar="foo")&attributes(attributes)
<div class="baz" id="foo" data-bar="foo"></div>

注意

&attributesで適用された属性は自動エスケープされません。XSSを防ぐには、ユーザーの入力情報を全て適切にサニタイズする必要があります。 mixinからattributesが呼び出された場合は自動エスケープします。



© 2017 pugjs.org Released under the MIT license

このコンテンツはpugドキュメントを翻訳/改変したものです。