Theming in Drupal 8 - Umbau eines Themes auf Twig

undpaul icon
Luca Stockmann

Ich schließe mich mit diesem Blog Beitrag der erfolgreichen und beliebten "Theming in Drupal 8 - alles neu mit Twig?" - Reihe von Steffen an.

Befassen werde ich mich mit dem Umbau eines Themes auf Twig als Template Engine. So wie es erst letztens bei unserem Busy Theme vorgenommen wurde.

Zu aller erst sei gesagt, Drupal 8 hat als Standard Template Engine Twig. Das heißt wenn keine weitere Einstellung in der THEME_NAME.info.yml getroffen wurde, wird Twig als Template Engine verwendet.

Wenn das Theme bisher auf phptemplate basierte, muss also in der THEME_NAME.info.yml die Zeile "engine: phptemplate" einfach gelöscht werden. In folgendem Beispiel Zeile #5: 

busy.info.yml Rohdaten
  1. name: Busy
  2. type: theme
  3. description: 'The ultimate Drupal business theme.'
  4. core: 8.x
  5. engine: phptemplate

Danach kann es an das eigentliche Umbauen gehen, hierzu sollte man die Syntax und Grundfunktionen von Twig kennen.

Hierzu kopiert man sich die Template-Datei und bennent sie von TEMPLATE_NAME.tpl.php nach TEMPLATE_NAME.html.twig um. Jetzt geht man jede Zeile der Datei durch und ersetzt die PHP-Befehle durch Twig-Befehle.

Folgendes Beispiel zeigt eine solche Umwandung an einfachen Ausgaben, If-Anweisungen und einer Übersetzungsfunktion.

comment-wrapper.tpl.php Rohdaten
  1. <div id="comments" <?php print $attributes; ?>>
  2.   <?php print render($content['comments']); ?>
  3.   <?php if ($content['comment_form']): ?>
  4.   <h2 class="title"><?php print t('Post new comment'); ?></h2>
  5.   <div>
  6.     <?php print render($content['comment_form']); ?>
  7.   </div>
  8.   <?php endif; ?>
  9. </div>

comment-wrapper.html.twig Rohdaten
  1. <div id="comments"{{ attributes }}>
  2.   {{ comments }}
  3.   {% if form %}
  4.     <h2 class="title">{{ 'Post new comment'|t }}</h2>
  5.     <div>
  6.       {{ form }}
  7.     </div>
  8.   {% endif %}
  9. </div>

Ähnlich sieht es auch bei Arrays und For-Schleifen aus.

gistfile1.twig Rohdaten
  1.   {% set users = ['Paul', 'Guenther', 'Max'] %}
  2.   {% for user in users %}
  3.     {{ user }}  
  4.   {% endfor %}

gistfile1.php Rohdaten
  1. $users = array('Paul', 'Guenther', 'Max');
  2. foreach ($users as $user) {
  3.   echo $user;
  4. }

Und wer sich noch ein wenig Arbeit sparen möchte, der kann auch zu dem Drupal-7-Modul Twigify (Sandbox-Projekt) greifen. Das Modul versucht so weit es geht das vorhandene Theme auf Twig umzubauen. Wobei komplexere Codestellen nicht automatisch gelöst werden, sondern immer noch händisch nachbearbeitet werden müssen.

Also scheut euch nicht davor eure Themes auf Twig umzubauen, denn es ist garnicht so schwer wie es zu aller erst aussieht!

undpaul icon
Luca Stockmann
  • Drupal-Entwickler

Luca bereichert unser Team vom Auszubildenden zum Drupal-Entwickler seit 2012. In seiner Freizeit fährt er gerne Rennrad, auch mal in Südafrika, wo er für sechs Monate eine undpaul-Außenstelle gründete. Seit 2014 ist er Acquia Certified Developer.