Verwenden eines Feldwerts als Zweigattribut

Ich muss einen Feldwert als CSS-Klasse in einer Seitenvorlage festlegen. Wie kann ich es auf die Twig-Art machen?

{{attributes.addClass('class-name')}} ist die Möglichkeit, die Klasse manuell festzulegen.

Ich habe ein Listenfeld, in dem der Benutzer eine Hintergrundfarbe für einen Teil der Site festlegen kann. In Drupal 7 habe ich diesen Code verwendet.

<div class="<?php print render($content['field_background']); ?>">

In Drupal 8 kann ich das Feld mit drucken {{ content.field_background }}, <div class="{{ content.field_background }}">funktioniert aber nicht.

Dies kann auf verschiedene Arten geschehen, Sie können alles in der Knotenvorlage mit Twig tun oder Sie können eine Vorverarbeitungsfunktion erstellen und eine Variable zur Verwendung in der Knotenvorlage erstellen. Der Schlüssel zum Erlernen des Arrays ist die Verwendung von Devel Kint. Ohne das wissen Sie nicht, was sich im Array befindet.

Installieren Sie zuerst Kint, das mit dem Devel-Modul für Drupal 8 geliefert wird. Wählen Sie anschließend Ihre Knotenvorlage aus (dies kann jedoch in jeder Art von Vorlage erfolgen) und untersuchen Sie die Inhaltsvariable wie folgt (idealerweise am unteren Rand der Vorlage).

{{ kint (content) }}

Daraus werden Debugging-Informationen auf der Seite gedruckt, und wenn Sie das Array erweitern, werden Sie eine ganze Reihe von Informationen sehen. Ich sehe sofort meinen Hintergrundwert und kann einen Pfad erstellen, um diesen auszudrucken

{{ content.field_background[0]['#markup'] }}

Jetzt können Sie dies als Hintergrundstil oder Klasse in einem div drucken

<div style="background-color: {{ '#' }}{{ content.field_background[0]['#markup'] }};" class="color-{{ content.field_background[0]['#markup'] }}">
<h2>Hello</h2>
</div>

Ich habe dies getestet und es funktioniert großartig. Das Div hat die Hintergrundfarbe gerendert, die ich in meiner Feldliste bei der Knotenbearbeitung ausgewählt hatte.

Dies ist nicht ideal, daher möchten wir wahrscheinlich eine Variable dafür in einem preprocess_node in der .theme-Datei unseres Themas erstellen.

function MYTHEME_preprocess_node(&$vars) {
  $vars['bgcolor'] = '#' . $vars['content']['field_background'][0]['#markup'];
}

Nachdem ich eine Var erstellt habe, ist es viel sauberer, diese auszudrucken:

 <div style="background-color: {{ bgcolor }};" >
      <h2>Hello</h2>
    </div>

Ein Hinweis für oben, Sie sollten dies wahrscheinlich mit einer if-Anweisung umschließen, um zu überprüfen, ob sie leer ist oder nicht.

Dies würde funktionieren oder die if-Anweisung strukturieren, wo es Ihnen gefällt

   {% if bgcolor %}
    <div style="background-color: {{ bgcolor }};" >
      <h2>Hello</h2>
    </div>
    {% endif %}

In einer Knotenvorlage befinden sich die Felder in {{ content }}. In einer Seitenvorlage gibt es keine Inhaltsvariable, sondern eine Seitenvariable, die Regionen enthält {{ page.region }}.

Da Sie nach der Seitenvorlage gefragt haben, können wir sie nicht verwenden content.

Sie können jedoch {{node}} in beiden Vorlagen verwenden. Das Knotenobjekt befindet sich immer in einer Knotenvorlage und in der Seitenvorlage, wenn auf der Seite ein Knoten angezeigt wird.

Das sollte also in beiden Vorlagen funktionieren:

<div class="{{ node.field_background.value|clean_class }}">