Verwendung von Attributen in Templates

Viele Twig-Templates enthalten ein oder mehrere Attribute-Objekte, die als Variablen übergeben werden. Die Aufgabe eines Attribute-Objekts besteht darin, eine Sammlung von HTML-Attributen zu speichern, dem Entwickler nützliche Methoden für die Interaktion mit diesen Daten bereitzustellen und das einfache Ausgeben der Attribute zu ermöglichen. Zum Beispiel erleichtert attribute.addClass('myclass') das Hinzufügen einer Klasse, ohne sich um das genaue Verkettungsformat kümmern zu müssen.

Attribute werden im Template üblicherweise folgendermaßen verwendet:

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

Zwischen dem Tag-Namen und dem Twig-Syntax darf kein Leerzeichen stehen. Das in Drupal 8 Kern enthaltene Theme „stable“ bietet viele Beispiele für die Verwendung von Attributen.

Standardmäßig sind für alle Templates folgende Attribut-Objekt-Variablen verfügbar: attribute, title_attributes und content_attributes.

Sie können Ihre Debugging-Hilfsmittel (kint(), dump(), dpm() etc.) verwenden, um zu prüfen, was verfügbar ist. Unten sehen Sie ein Beispiel für {{ kint(attribute) }} in der Datei node.html.twig.

Methoden für Attribute

Hier einige nützliche Methoden, die Sie mit einem Attribute-Objekt verwenden können:

attributes.addClass()

Fügt Klassen hinzu oder fügt sie einem Array bestehender CSS-Klassen hinzu.

Einzelne Klasse:

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

Mehrere Klassen:

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

ergibt <div class="red green"></div>.

attributes.removeClass()

Entfernt eine Klasse vom Attribute-Objekt. Wird ähnlich wie addClass verwendet. Angenommen, Sie erhalten Klassen aus einer anderen Quelle, z. B. einer Preprocess-Funktion.

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

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

ergibt <div class="red blue"></div>.

attributes.setAttribute($attribute, $value)

Setzt den Wert eines Attributs mit dem angegebenen Schlüssel.

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

ergibt <div id="myID"></div>

attributes.removeAttribute($attribute)

Entfernt ein Attribut vom Attribute-Objekt.

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

attributes.hasClass($class)

Prüft, ob das Klassenarray die angegebene CSS-Klasse enthält.

{% if attributes.hasClass('myClass') %}
  {# mache etwas #}
{% endif %}

Attribute in Twig erzeugen

Ab Drupal 8.3.x gibt es die neue Twig-Funktion create_attribute(). Siehe Change Record: https://www.drupal.org/node/2818293.

Diese Funktion liefert ein neues leeres Attribute-Objekt zum Erstellen von Attributen.

{% 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>

Weitere nützliche Beispiele

Punktnotationen können verknüpft werden:

{% 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) }}>

ergibt <img id="specific-id" class="red blue" src="https://www.drupal.org/files/powered-blue-135x42.png">

Verwendung des Filters without

Der Twig-Filter without extrahiert Teile der Attribute:

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

Hinweis: In den meisten Fällen sollten Sie solche Konstrukte vermeiden und stattdessen addClass() verwenden.

Seien Sie äußerst vorsichtig beim manuellen Setzen von Attributen in Twig-Templates. Achten Sie stets darauf, Attributwerte in doppelte Anführungszeichen zu setzen, da ansonsten Ihre Seite für XSS-Angriffe anfällig wird. Twig escaped den Inhalt innerhalb der doppelten Anführungszeichen automatisch und schützt so vor XSS.

Dieses Twig-Template:

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

Mit Benutzereingabe:

foo onclick=alert(bar)

führt zu folgender Ausgabe:

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

Das Twig-Template mit doppelten Anführungszeichen:

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

führt mit derselben Eingabe zu:

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

Ändern von Attributen mit without

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