Drupal 8:  TWIG Template Engine
Upcoming SlideShare
Loading in...5
×
 

Drupal 8: TWIG Template Engine

on

  • 2,741 views

Einführung in die neue Template Engine TWIG für Drupal 8. Vortrag beim Drupal Meetup Stuttgart am 4.10.2012

Einführung in die neue Template Engine TWIG für Drupal 8. Vortrag beim Drupal Meetup Stuttgart am 4.10.2012

Statistics

Views

Total Views
2,741
Views on SlideShare
2,739
Embed Views
2

Actions

Likes
2
Downloads
6
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Drupal 8:  TWIG Template Engine Drupal 8: TWIG Template Engine Presentation Transcript

    • Drupal 8:Twig TemplateEngineDrupal Meetup Stuttgart 4.10.2012 - drubb
    • Was ist eine Template Engine? ● Eine Template Engine ersetzt in einer statischen Datei (dem Template) bestimmte Platzhalter durch variable Inhalte, ähnlich einer Seriendruckfunktion. ● Dadurch soll eine Trennung von Programmlogik (z.B. PHP) und Markup (z.B. HTML) erreicht werden - zumindest in der Theorie.Beispiel für ein Template, z.B. als Datei kunden.html:<p>Kundenliste</p><ul><f:for each="{kunden}" as="eintrag"><li>{eintrag vorname} {eintrag.nachname}</li></f:for></ul>Die Template Engine muss hier nach Platzhaltern suchen und diese durch die eigentlichen Inhalteersetzen. PHP kann natürlich selbst als Template-Sprache verwendet werden. Beispiel:<h1><?php echo $body_text ; ?></h1><?php foreach($test_array as $key => $value) : ?> <p>Schlüssel: <?php echo $key; ?> - Wert: <?php echo $value; ?></p><?php endforeach ; ?>Bekannte Template Engines für PHP sind z.B. Smarty, Fluid (Typo3), PHPTal oder Contemplate.
    • Template Engines für DrupalDrupal 4.5: erste Template Engine XTemplateDrupal 4.7: PHPTemplate als beliebteste EngineAlternative Engines optional auf d.o. verfügbar, z.B.XTemplate, http://drupal.org/project/xtemplate (bis Drupal 4.7)Smarty, http://drupal.org/project/smarty (bis Drupal 6)PHPTAL, http://drupal.org/project/phptal (auch für Drupal 7)PHPTemplate wurde erst in Drupal 7 endgültig Standard. Vorher musste die verwendeteTemplate Engine ausdrücklich im .info File des Themes angegeben werden:name = Garlanddescription = Tableless, recolorable, multi-column, fluid width theme (default).version = VERSIONcore = 6.xengine = phptemplatestylesheets[all][] = style.cssstylesheets[print][] = print.cssZusätzliche Engines konnten (und können nach wie vor) in das Verzeichnis /themes/enginesinstalliert werden, für entsprechende Themes die darauf basieren. Das hat sich aber in der Praxisnicht durchgesetzt.
    • Schwachstellen der PHPTemplate Engine ● Drupal-spezifisch ● PHP erforderlich ● Unsicher (PHP!) ● Umständlich ● Inkonsistent"We hand themers a loaded gun and tell them to hammer in a nail with it Oh, and be careful" - John Albin Wer will denn so etwas wirklich: <ul class="views-summary"> <?php foreach ($rows as $id => $row): ?> <li><a href="<?php print $row->url; ?>"<?php print !empty($row_classes[$id]) ? class=". $row_classes [$id] ." : ; ?>><?php print $row->link; ?></a> <?php if (!empty($options[count])): ?> (<?php print $row->count?>) <?php endif; ?> </li> <?php endforeach; ?> </ul>
    • Zeit für TWIG!Twig ist eine moderne, schnelle und flexible PHP Template Engine, ganzzufällig von den Machern von Symfony.Twig kennt Variablen, Kontrollstrukturen,Vererbung, Funktionen und Filter,kann gut erweitert werden, bietet Sicherheit und erzeugt schnellen PHP Code.Beispiel für ein Twig Template:<!DOCTYPE html><html><head> <title>My Webpage</title></head><body><ul id="navigation"> {% for item in navigation %} <li><a href="{{ item.href }}">{{ item.caption }}</a></li> {% endfor %}</ul><h1>My Webpage</h1>{{ main_content }}{% include footer.html %}</body></html>
    • TWIG für den Drupal DesignerFür den Designer / Themer bedeutet die Einführung von TWIG, dass er es jetztanstelle von PHP Templates (.tpl.php) mit TWIG Templates (.twig) zu tun hat.Dem Themer stehen wie bisher Variablen zur Verfügung, die im Templateverwendet werden können. Statt PHP benötigt er Syntax und Kontroll-strukturen von TWIG (Anweisungen, Schleifen, Kommentaren, etc.)region.tpl.php: region.twig:<?php {#/** /** * @file * @file... */ */?> #}<?php if ($content): ?> {% if content %} <div <?php print $attributes; ?>> <div {{ attributes }}> <?php print $content; ?> {{ content }} </div> </div><?php endif; ?> {% endif %}
    • Komplexeres Beispiel: comment.twig{#/** * @file... */#}<article class="{{ attributes.class }} clearfix" {{ attributes }}> {{ render(title_prefix) }} {% if new %} <mark class="new">{{ new }}</mark> {% endif %} <h3 {{ title_attributes }}>{{ title }}</h3> {{ render(title_suffix) }} <footer> {{ user_picture }} <p class="submitted">by {{ author }} on {{ created }}</p> {{ permalink }} </footer> <div class="{{ attributes.class }}" {{ attributes }}> {# We hide the links now so that we can render them later. #} {# @TODO uncomment this when http://drupal.org/node/1753676 is resolved {% hide(content.links) %} #} {{ render(content) }} {% if signature %} <div class="user-signature"> {{ signature }} </div> {% endif %} </div> {{ render(content.links) }}</article>
    • TWIG für den Drupal Modulentwickler Ganz einfach eigentlich: Theming Best Practices beachten! ● Templates explizit registrieren ● Theme-Funktionen in Templates verlagern ● PHP- oder Drupal-Logik in Preprocess-Funktionen verlagernWarum?Die Templatesprache ist nicht mehr unbedingt PHP, also haben Templatesmöglicherweise keinen Zugriff auf PHP- oder Drupal-Funktionen. EinfacheKontrollstrukturen können aber vorausgesetzt werden.
    • Beispiel: TWIG-unfreundliches ModulTheme-Funktion registrieren:function mymodule_theme() { Keine Parameter? Also muss return array( die Aufbereitungs- logik im permalink => array() Theme statt finden! );}Themefunktion implementieren:function theme_permalink() { $output = <span class="permalink">; Redundanter Code, da ja ein if ((arg(0)==node) && (is_numeric(arg(1))) && (!arg(2))) { $output .= l(t(Permalink), node/ . arg(1)); Template gleichen Inhalts } mitgeliefert wird! $output .= </span>; return $output;}PHP Template dazu (permalink.tpl.php):<span class="permalink"> Jede Menge PHP- und<?php if ((arg(0)==node) && (is_numeric(arg(1))) && (!arg(2))): ?> Drupal-Funktionen, die <?php print l(t(Permalink), node/ . arg(1)); ?> TWIG normalerweise nicht<?php endif; ?></span> zur Verfügung stehen!
    • Besser: TWIG-freundliches ModulTemplate registrieren:function mymodule_theme() { Hier wird explizit ein return array( Template registriert, dem template => permalink, eine Variable übergeben variables => array(permalink => NULL), ); wird.}Preprocess-Funktion für Programmlogik:function template_preprocess_permalink(&$variables) { Hier die Programmlogik zur if ((arg(0)==node) && (is_numeric(arg(1))) && (!arg(2))) { $variables[permalink] = l(t(Permalink), node/ . arg(1)); Aufbereitung der Variablen! }}PHP Template dazu (permalink.tpl.php):<span class="permalink"> Die Templates sind deutlich<?php print $permalink; ?> einfacher und sehr ähnlich</span> gehalten, das freut denTWIG Template dazu (permalink.twig): Themer. Programmlogik und Markup sind getrennt.<span class="permalink">{{ permalink }}</span>
    • Fragen / DiskussionZum Weiterlesen:http://groups.drupal.org/node/219224http://drupal.org/sandbox/pixelmord/1750250http://de.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8http://twig.sensiolabs.orgDiese Folien als PDF:http://www.slideshare.net/drubb