Best Practices für Twig – Preprocess-Funktionen und Templates

Um Drupal 8 thematisch so performant wie möglich zu gestalten und mehr Anpassungsmöglichkeiten in Twig-Templates zu bieten, folgen Sie den folgenden Empfehlungen:

• Render-Arrays aus Preprocess-Funktionen zurückgeben
• Filteraufrufe und Utility-Funktionen in Templates

Diese Anleitung wurde verfasst, um Drupal-Entwicklern zu helfen, die Erfahrung mit Drupal 7 haben und Funktionen wie theme() oder drupal_render() entfernen möchten, die in Drupal 8+ nicht mehr verwendet werden sollten. Beispiele „vorher“ sind in der Regel im Drupal 7-Stil geschrieben.

Render-Arrays aus Preprocess-Funktionen zurückgeben

Geben Sie immer Render-Arrays zurück, anstatt theme() oder drupal_render() in Preprocess-Funktionen aufzurufen.

Twig rendert alles automatisch, daher ist es nicht nötig, drupal_render() oder theme() innerhalb einer Preprocess-Funktion aufzurufen. Stattdessen sollten Render-Arrays an das Template übergeben werden, da dies viel mehr Flexibilität bietet als ein bereits gerenderter HTML-String.

Entfernen von theme() aus der Preprocess-Funktion:

// Vorher – Übergabe eines gerenderten HTML-Strings ans Template.
$variables['table'] = theme('table', ['header' => $header, 'rows' => $rows]);

// Nachher – Übergabe eines Render-Arrays ans Template.
$variables['table'] = [
  '#theme' => 'table',
  '#header' => $header,
  '#rows' => $rows,
];

Entfernen von drupal_render() aus der Preprocess-Funktion bedeutet einfach, den Aufruf zu löschen:

// Vorher, unnötiger drupal_render()-Aufruf.
$variables['teaser'] = drupal_render($node_teaser);

// Nachher, ohne drupal_render().
$variables['teaser'] = $node_teaser;

Typischerweise wurde drupal_render() beim Hinzufügen zu Tabellen-Daten aufgerufen.

// Vorher, unnötiger drupal_render()-Aufruf.
$row[] = drupal_render($display['title']);

// Nachher, ohne drupal_render().
$row[]['data'] = $display['title'];

Filteraufrufe und Utility-Funktionen in Templates

Während Render-Arrays eine adressierbare, veränderbare Struktur für Daten auf dem Weg zum Template bieten, benötigen nicht alle Variablen Render-Arrays. Um rohe Daten so lange wie möglich in Templates zu behalten, sollten Theme-Entwickler Filter wie t() und Utility-Funktionen wie url() direkt in Twig-Templates aufrufen. Dies kann Funktionsaufrufe reduzieren, da Variablen, die an das Template übergeben werden, möglicherweise gar nicht ausgegeben werden.

Vorher:

In der Preprocess-Funktion:

$variables['no_content_text'] = t('You have not created any content types yet. Go to the <a href="@create-content">content type creation page</a> to add a new content type.', array('@create-content' => url('admin/structure/types/add')));

Im Template:

<p>{{ no_content_text }}</p>

Nachher:

Im Template:

<p>{{ 'You have not created any content types yet. Go to the <a href="@create-content">content type creation page</a> to add a new content type.'|t({'@create-content': url('admin/structure/types/add')}) }}</p>

Verstecken, Anzeigen und Entfernen von drupal_render_children und element_children

Wenn hide() im ursprünglichen Template aufgerufen wurde und drupal_render_children zum Rendern des „Restes“ der Daten verwendet wurde, müssen wir das in Preprocess aufteilen und einzelne Variablen anlegen.

Vorher (PHPTemplate-Datei):

<?php
hide($form['advanced']);
hide($form['actions']);
?>
<div class="layout-node-form clearfix">
<div class="layout-region layout-region-node-main">
<?php print drupal_render_children($form); ?>
</div>
<div class="layout-region layout-region-node-secondary">
<?php print render($form['advanced']); ?>
</div>
<div class="layout-region layout-region-node-footer">
<?php print render($form['actions']); ?>
</div>
</div>

Benutzen Sie den Twig-Filter „without“, um bestimmte Elemente auszublenden. Sie können das wie gewohnt dort machen, wo es nötig ist.

Nachher: (Twig-Template)

<div class="layout-node-form clearfix">
  <div class="layout-region layout-region-node-main">
    {{ form|without('advanced', 'actions') }}
  </div>
  <div class="layout-region layout-region-node-secondary">
    {{ form.advanced }}
  </div>
  <div class="layout-region layout-region-node-footer">
    {{ form.actions }}
  </div>
</div>

Alternativ (nicht mehr erforderlich):

Preprocess alles in einzelne Variablen aufteilen und an das Template übergeben. Möglicherweise müssen Sie Inhalte aus dem gesamten Element (hier das Formular) in Variablen verschieben, bevor Sie den Rest rendern. Geben Sie den Inhalt genau so aus, wie im Template vorgesehen.

Vorher: (Preprocess)

function template_preprocess_node_edit_form(&$variables) {
  $form = $variables['form'];
  
  // @todo Update this once drupal.org/node/1920886 is resolved.
  $variables['advanced'] = $form['advanced'];
  $variables['actions'] = $form['actions'];
  unset($form['advanced'], $form['actions']);
  $variables['form'] = drupal_render_children($form);
}

Nachher: (Twig-Template)

<div class="layout-node-form clearfix">
  <div class="layout-region layout-region-node-main">
    {{ form }}
  </div>
  <div class="layout-region layout-region-node-secondary">
    {{ advanced }}
  </div>
  <div class="layout-region layout-region-node-footer">
    {{ actions }}
  </div>
</div>