テンプレートでの属性の使用

05/05/2020, by maria

多くのTwigテンプレートには、変数として渡される1つ以上のAttributeオブジェクトがあります。Attributeオブジェクトの役割は、HTML属性のセットを保存し、開発者にこのデータを操作するための便利なメソッドを提供し、属性を簡単に出力できるようにすることです。たとえば、attributes.addClass('myclass')を使用すると、文字列の正確な連結を心配することなく単一のクラスを追加できます。

通常、テンプレートの属性は次のようになります：

<div{{ attributes }}></div>

タグ名とTwig構文の間にスペースを入れてはいけません。Drupal 8コアに含まれる「stable」テーマには、学習できる属性の例が多数あります。

デフォルトでは、すべてのテンプレートで次の属性オブジェクト変数が利用可能です：attributes、title_attributes、content_attributes。

デバッグヘルパー（kint()、dump()、dpm()など）を使用して、何が利用可能かを確認できます。node.html.twigファイルで{{kint(attributes)}}を使用した例を以下に示します。

kint-attributes-object

属性メソッド

Attributeオブジェクトで使用できる便利なメソッドをいくつか示します：

attributes.addClass()

既存のCSSクラスの配列にクラスを追加またはマージします。

単一のクラス：

<div{{ attributes.addClass('my-class') }}></div>

複数のクラス：

{%
  set classes = [
    'red',
    'green',
  ]
%}
<div{{ attributes.addClass(classes) }}></div>

次のように出力されます：<div class="red green"></div>。

attributes.removeClass()

Attributeオブジェクトからクラスを削除します。addClassと同様に使用されます。前処理関数など、別の場所からクラス変数を取得するとします。

{% set classes = [ 'red', 'green', 'blue' ] %}

<div{{ attributes.addClass(classes).removeClass('green') }}></div>

次のように出力されます：<div class="red blue"></div>。

attributes.setAttribute($attribute, $value)

属性キーの値を設定します。

<div{{ attributes.setAttribute('id', 'myID') }}></div>

次のように出力されます：<div id="myID"></div>

attributes.removeAttribute($attribute)

Attributeオブジェクトから属性を削除します。

<div{{ attributes.removeAttribute('id') }}></div>

attributes.hasClass($class)

クラス配列が指定されたCSSクラスを持っているかどうかを確認します。

{% if attributes.hasClass('myClass') %}
  {# do stuff #}
{% endif %}

Twigで属性を作成する

Drupal 8.3.x以降、新しいTwig関数create_attribute()が導入されました。変更記録を参照してください：https://www.drupal.org/node/2818293。

これは、属性を作成するために使用できる新しい空のAttributeオブジェクトを提供します。

{% set my_attribute = create_attribute() %}
{%
  set my_classes = [
    'kittens',
    'llamas',
    'puppies',
  ]
%}
<div{{ my_attribute.addClass(my_classes).setAttribute('id', 'myUniqueId') }}>
  {{ content }}
</div>

<div{{ create_attribute({'class': ['region', 'region--header']}) }}>
  {{ content }}
</div>

その他の役立つスニペット

ドット表記はチェーン化できます

{% set classes = ['red', 'green', 'blue'] %}
{% set my_id = 'specific-id' %}
{% set image_src = 'https://www.drupal.org/files/powered-blue-135x42.png' %}

<img{{ attributes.addClass(classes).removeClass('green').setAttribute('id', my_id).setAttribute('src', image_src) }}>

次のように出力されます：<img id="specific-id" class="red blue" src="https://www.drupal.org/files/powered-blue-135x42.png">

withoutフィルターの使用

twigフィルターwithoutで属性の一部を除外します：

<div class="myclass {{ attributes.class }}"{{ attributes|without('class') }}></div>

注：ほとんどの場合、上記のようなコードは避け、addClass()の使用を優先する必要があります。

twigテンプレートで属性を手動で割り当てる場合は細心の注意を払ってください。属性文字列は必ず二重引用符で囲んでください。そうしないと、サイトがXSS攻撃に対して脆弱なままになる可能性があります。Twigは二重引用符で囲まれたコンテンツを自動的にエスケープし、XSS攻撃から保護します。

このtwigテンプレート：

<b class={{ attributes.class }}>Hello<b>

ユーザー入力：

foo onclick=alert(bar)

結果は次の出力になります：

<b class=foo onclick=alert(bar)>Hello</b>

これは二重引用符付きのTwigテンプレートです：

<b class="{{ attributes.class }}">Hello<b>

同じ入力で二重引用符を使用すると、次の出力になります：

<b class="foo &quot; onclick=&quot;alert(bar)">Hello</b>

without属性の変更

{% set attributes = attributes.addClass('my-class') %}
<div{{ attributes }}></div>

パレット - カラフルに🎨