SlideShare ist ein Scribd-Unternehmen logo
Drupal 8:
Twig Template
Engine
Drupal 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 Inhalte
ersetzen. 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 Drupal

Drupal 4.5: erste Template Engine XTemplate
Drupal 4.7: PHPTemplate als beliebteste Engine

Alternative 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 verwendete
Template Engine ausdrücklich im .info File des Themes angegeben werden:
name = Garland
description = Tableless, recolorable, multi-column, fluid width theme (default).
version = VERSION
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[print][] = print.css


Zusätzliche Engines konnten (und können nach wie vor) in das Verzeichnis /themes/engines
installiert werden, für entsprechende Themes die darauf basieren. Das hat sich aber in der Praxis
nicht 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, ganz
zufä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 Designer
Für den Designer / Themer bedeutet die Einführung von TWIG, dass er es jetzt
anstelle von PHP Templates (.tpl.php) mit TWIG Templates (.twig) zu tun hat.
Dem Themer stehen wie bisher Variablen zur Verfügung, die im Template
verwendet 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 verlagern

Warum?
Die Templatesprache ist nicht mehr unbedingt PHP, also haben Templates
möglicherweise keinen Zugriff auf PHP- oder Drupal-Funktionen. Einfache
Kontrollstrukturen können aber vorausgesetzt werden.
Beispiel: TWIG-unfreundliches Modul

Theme-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 Modul

Template 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 den
TWIG Template dazu (permalink.twig):                                 Themer. Programmlogik und
                                                                     Markup sind getrennt.
<span class="permalink">
{{ permalink }}
</span>
Fragen / Diskussion

Zum Weiterlesen:

http://groups.drupal.org/node/219224
http://drupal.org/sandbox/pixelmord/1750250
http://de.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8
http://twig.sensiolabs.org



Diese Folien als PDF:

http://www.slideshare.net/drubb

Weitere ähnliche Inhalte

Andere mochten auch

Drupal 8: Forms
Drupal 8: FormsDrupal 8: Forms
Drupal 8: Forms
drubb
 
Drupal 8: Theming
Drupal 8: ThemingDrupal 8: Theming
Drupal 8: Theming
drubb
 
Making Sense of Twig
Making Sense of TwigMaking Sense of Twig
Making Sense of Twig
Brandon Kelly
 
Drupal 8: Entities
Drupal 8: EntitiesDrupal 8: Entities
Drupal 8: Entities
drubb
 
Drupal 8 templating with twig
Drupal 8 templating with twigDrupal 8 templating with twig
Drupal 8 templating with twig
Taras Omelianenko
 
Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8
Anne Tomasevich
 
Drupal 8: Routing & More
Drupal 8: Routing & MoreDrupal 8: Routing & More
Drupal 8: Routing & More
drubb
 
State of Search, Solr and Facets in Drupal 8 - Drupalcamp Belgium 2015
State of Search, Solr and Facets in Drupal 8 - Drupalcamp Belgium 2015State of Search, Solr and Facets in Drupal 8 - Drupalcamp Belgium 2015
State of Search, Solr and Facets in Drupal 8 - Drupalcamp Belgium 2015
Dropsolid
 
Blocks & layouts szeged
Blocks & layouts szegedBlocks & layouts szeged
Blocks & layouts szeged
dasjo
 
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Rene Bakx
 
Things Made Easy: One Click CMS Integration with Solr & Drupal
Things Made Easy: One Click CMS Integration with Solr & DrupalThings Made Easy: One Click CMS Integration with Solr & Drupal
Things Made Easy: One Click CMS Integration with Solr & Drupal
lucenerevolution
 
Single Page Applications in Drupal
Single Page Applications in DrupalSingle Page Applications in Drupal
Single Page Applications in Drupal
Chris Tankersley
 
Drupal 8 and Pantheon
Drupal 8 and PantheonDrupal 8 and Pantheon
Drupal 8 and Pantheon
Pantheon
 
Continuous Integration Is for Teams: Moving past buzzword driven development
Continuous Integration Is for Teams: Moving past buzzword driven development Continuous Integration Is for Teams: Moving past buzzword driven development
Continuous Integration Is for Teams: Moving past buzzword driven development
Pantheon
 
Why Your Site is Slow: Performance Answers for Your Clients
Why Your Site is Slow: Performance Answers for Your ClientsWhy Your Site is Slow: Performance Answers for Your Clients
Why Your Site is Slow: Performance Answers for Your Clients
Pantheon
 
Preventing Drupal Headaches: Establishing Flexible File Paths From The Start
Preventing Drupal Headaches: Establishing Flexible File Paths From The StartPreventing Drupal Headaches: Establishing Flexible File Paths From The Start
Preventing Drupal Headaches: Establishing Flexible File Paths From The Start
Acquia
 
Intro to Apache Solr for Drupal
Intro to Apache Solr for DrupalIntro to Apache Solr for Drupal
Intro to Apache Solr for Drupal
Chris Caple
 
Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8
Acquia
 
Drupal 7 and SolR
Drupal 7 and SolRDrupal 7 and SolR
Drupal 7 and SolR
Patrick Morin
 
The Flexibility of Drupal 8 | DCNLights 2017
The Flexibility of Drupal 8 | DCNLights 2017The Flexibility of Drupal 8 | DCNLights 2017
The Flexibility of Drupal 8 | DCNLights 2017
Michael Miles
 

Andere mochten auch (20)

Drupal 8: Forms
Drupal 8: FormsDrupal 8: Forms
Drupal 8: Forms
 
Drupal 8: Theming
Drupal 8: ThemingDrupal 8: Theming
Drupal 8: Theming
 
Making Sense of Twig
Making Sense of TwigMaking Sense of Twig
Making Sense of Twig
 
Drupal 8: Entities
Drupal 8: EntitiesDrupal 8: Entities
Drupal 8: Entities
 
Drupal 8 templating with twig
Drupal 8 templating with twigDrupal 8 templating with twig
Drupal 8 templating with twig
 
Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8
 
Drupal 8: Routing & More
Drupal 8: Routing & MoreDrupal 8: Routing & More
Drupal 8: Routing & More
 
State of Search, Solr and Facets in Drupal 8 - Drupalcamp Belgium 2015
State of Search, Solr and Facets in Drupal 8 - Drupalcamp Belgium 2015State of Search, Solr and Facets in Drupal 8 - Drupalcamp Belgium 2015
State of Search, Solr and Facets in Drupal 8 - Drupalcamp Belgium 2015
 
Blocks & layouts szeged
Blocks & layouts szegedBlocks & layouts szeged
Blocks & layouts szeged
 
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
 
Things Made Easy: One Click CMS Integration with Solr & Drupal
Things Made Easy: One Click CMS Integration with Solr & DrupalThings Made Easy: One Click CMS Integration with Solr & Drupal
Things Made Easy: One Click CMS Integration with Solr & Drupal
 
Single Page Applications in Drupal
Single Page Applications in DrupalSingle Page Applications in Drupal
Single Page Applications in Drupal
 
Drupal 8 and Pantheon
Drupal 8 and PantheonDrupal 8 and Pantheon
Drupal 8 and Pantheon
 
Continuous Integration Is for Teams: Moving past buzzword driven development
Continuous Integration Is for Teams: Moving past buzzword driven development Continuous Integration Is for Teams: Moving past buzzword driven development
Continuous Integration Is for Teams: Moving past buzzword driven development
 
Why Your Site is Slow: Performance Answers for Your Clients
Why Your Site is Slow: Performance Answers for Your ClientsWhy Your Site is Slow: Performance Answers for Your Clients
Why Your Site is Slow: Performance Answers for Your Clients
 
Preventing Drupal Headaches: Establishing Flexible File Paths From The Start
Preventing Drupal Headaches: Establishing Flexible File Paths From The StartPreventing Drupal Headaches: Establishing Flexible File Paths From The Start
Preventing Drupal Headaches: Establishing Flexible File Paths From The Start
 
Intro to Apache Solr for Drupal
Intro to Apache Solr for DrupalIntro to Apache Solr for Drupal
Intro to Apache Solr for Drupal
 
Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8
 
Drupal 7 and SolR
Drupal 7 and SolRDrupal 7 and SolR
Drupal 7 and SolR
 
The Flexibility of Drupal 8 | DCNLights 2017
The Flexibility of Drupal 8 | DCNLights 2017The Flexibility of Drupal 8 | DCNLights 2017
The Flexibility of Drupal 8 | DCNLights 2017
 

Ähnlich wie Drupal 8: TWIG Template Engine

Drupal und twig
Drupal und twigDrupal und twig
Drupal und twig
Steffen Rühlmann
 
Jpgraph - eine Einführung
Jpgraph - eine EinführungJpgraph - eine Einführung
Jpgraph - eine Einführung
frankstaude
 
Domain Driven Design in Rails
Domain Driven Design in RailsDomain Driven Design in Rails
Domain Driven Design in Rails
Angelo Maron
 
Drupal 8 templating alles neu mit twig
Drupal 8 templating   alles neu mit twigDrupal 8 templating   alles neu mit twig
Drupal 8 templating alles neu mit twig
Steffen Rühlmann
 
jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?
openForce Information Technology GesmbH
 
Python builds mit ant
Python builds mit antPython builds mit ant
Python builds mit ant
roskakori
 
react-de.pdf
react-de.pdfreact-de.pdf
react-de.pdf
ssuser65180a
 
TYPO3 coding guidelines
TYPO3 coding guidelinesTYPO3 coding guidelines
TYPO3 coding guidelines
Alex Kellner
 
Object-orientied way of using mysqli interface - Workshop
Object-orientied way of using mysqli interface - WorkshopObject-orientied way of using mysqli interface - Workshop
Object-orientied way of using mysqli interface - Workshop
Waldemar Dell
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
Stefan Fröhlich
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
Thomas Kratz
 
Abläufe mit PHP und Phing automatisieren
Abläufe mit PHP und Phing automatisierenAbläufe mit PHP und Phing automatisieren
Abläufe mit PHP und Phing automatisieren
Christian Münch
 
Web Entwicklung mit PHP - Teil 3 Beta
Web Entwicklung mit PHP - Teil 3 BetaWeb Entwicklung mit PHP - Teil 3 Beta
Web Entwicklung mit PHP - Teil 3 Beta
Hans-Joachim Piepereit
 
High performance mit PHP
High performance mit PHPHigh performance mit PHP
High performance mit PHP
Thomas Burgard
 
Shortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPressShortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPress
Torsten Landsiedel
 
Entwickeln mit Wordpress
Entwickeln mit WordpressEntwickeln mit Wordpress
Entwickeln mit Wordpress
Blogwerk AG
 
Drupal 7 Einblick und Ausblick
Drupal 7 Einblick und AusblickDrupal 7 Einblick und Ausblick
Drupal 7 Einblick und Ausblick
Amazee Labs
 

Ähnlich wie Drupal 8: TWIG Template Engine (20)

Drupal und twig
Drupal und twigDrupal und twig
Drupal und twig
 
Jpgraph - eine Einführung
Jpgraph - eine EinführungJpgraph - eine Einführung
Jpgraph - eine Einführung
 
Domain Driven Design in Rails
Domain Driven Design in RailsDomain Driven Design in Rails
Domain Driven Design in Rails
 
Web Entwicklung mit PHP - Teil 1
Web Entwicklung mit PHP - Teil 1Web Entwicklung mit PHP - Teil 1
Web Entwicklung mit PHP - Teil 1
 
Drupal 8 templating alles neu mit twig
Drupal 8 templating   alles neu mit twigDrupal 8 templating   alles neu mit twig
Drupal 8 templating alles neu mit twig
 
jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?
 
Python builds mit ant
Python builds mit antPython builds mit ant
Python builds mit ant
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
react-de.pdf
react-de.pdfreact-de.pdf
react-de.pdf
 
TYPO3 coding guidelines
TYPO3 coding guidelinesTYPO3 coding guidelines
TYPO3 coding guidelines
 
Object-orientied way of using mysqli interface - Workshop
Object-orientied way of using mysqli interface - WorkshopObject-orientied way of using mysqli interface - Workshop
Object-orientied way of using mysqli interface - Workshop
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
 
Abläufe mit PHP und Phing automatisieren
Abläufe mit PHP und Phing automatisierenAbläufe mit PHP und Phing automatisieren
Abläufe mit PHP und Phing automatisieren
 
Web Entwicklung mit PHP - Teil 3 Beta
Web Entwicklung mit PHP - Teil 3 BetaWeb Entwicklung mit PHP - Teil 3 Beta
Web Entwicklung mit PHP - Teil 3 Beta
 
High performance mit PHP
High performance mit PHPHigh performance mit PHP
High performance mit PHP
 
Shortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPressShortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPress
 
Drupal inside out
Drupal inside outDrupal inside out
Drupal inside out
 
Entwickeln mit Wordpress
Entwickeln mit WordpressEntwickeln mit Wordpress
Entwickeln mit Wordpress
 
Drupal 7 Einblick und Ausblick
Drupal 7 Einblick und AusblickDrupal 7 Einblick und Ausblick
Drupal 7 Einblick und Ausblick
 

Mehr von drubb

Barrierefreie Webseiten
Barrierefreie WebseitenBarrierefreie Webseiten
Barrierefreie Webseiten
drubb
 
Drupal 9 Entity Bundle Classes
Drupal 9 Entity Bundle ClassesDrupal 9 Entity Bundle Classes
Drupal 9 Entity Bundle Classes
drubb
 
Drupal 8 Dependency Injection Using Traits
Drupal 8 Dependency Injection Using TraitsDrupal 8 Dependency Injection Using Traits
Drupal 8 Dependency Injection Using Traits
drubb
 
Closing the Drupal Hosting Gap - A Review of Wodby
Closing the Drupal Hosting Gap - A Review of WodbyClosing the Drupal Hosting Gap - A Review of Wodby
Closing the Drupal Hosting Gap - A Review of Wodby
drubb
 
Composer & Drupal
Composer & DrupalComposer & Drupal
Composer & Drupal
drubb
 
Drupal 8 Sample Module
Drupal 8 Sample ModuleDrupal 8 Sample Module
Drupal 8 Sample Module
drubb
 
Headless Drupal
Headless DrupalHeadless Drupal
Headless Drupal
drubb
 
Spamschutzverfahren für Drupal
Spamschutzverfahren für DrupalSpamschutzverfahren für Drupal
Spamschutzverfahren für Drupal
drubb
 
Drupal 8: Neuerungen im Überblick
Drupal 8:  Neuerungen im ÜberblickDrupal 8:  Neuerungen im Überblick
Drupal 8: Neuerungen im Überblick
drubb
 
Drupal Entities
Drupal EntitiesDrupal Entities
Drupal Entities
drubb
 

Mehr von drubb (10)

Barrierefreie Webseiten
Barrierefreie WebseitenBarrierefreie Webseiten
Barrierefreie Webseiten
 
Drupal 9 Entity Bundle Classes
Drupal 9 Entity Bundle ClassesDrupal 9 Entity Bundle Classes
Drupal 9 Entity Bundle Classes
 
Drupal 8 Dependency Injection Using Traits
Drupal 8 Dependency Injection Using TraitsDrupal 8 Dependency Injection Using Traits
Drupal 8 Dependency Injection Using Traits
 
Closing the Drupal Hosting Gap - A Review of Wodby
Closing the Drupal Hosting Gap - A Review of WodbyClosing the Drupal Hosting Gap - A Review of Wodby
Closing the Drupal Hosting Gap - A Review of Wodby
 
Composer & Drupal
Composer & DrupalComposer & Drupal
Composer & Drupal
 
Drupal 8 Sample Module
Drupal 8 Sample ModuleDrupal 8 Sample Module
Drupal 8 Sample Module
 
Headless Drupal
Headless DrupalHeadless Drupal
Headless Drupal
 
Spamschutzverfahren für Drupal
Spamschutzverfahren für DrupalSpamschutzverfahren für Drupal
Spamschutzverfahren für Drupal
 
Drupal 8: Neuerungen im Überblick
Drupal 8:  Neuerungen im ÜberblickDrupal 8:  Neuerungen im Überblick
Drupal 8: Neuerungen im Überblick
 
Drupal Entities
Drupal EntitiesDrupal Entities
Drupal Entities
 

Drupal 8: TWIG Template Engine

  • 1. Drupal 8: Twig Template Engine Drupal Meetup Stuttgart 4.10.2012 - drubb
  • 2. 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 Inhalte ersetzen. 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.
  • 3. Template Engines für Drupal Drupal 4.5: erste Template Engine XTemplate Drupal 4.7: PHPTemplate als beliebteste Engine Alternative 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 verwendete Template Engine ausdrücklich im .info File des Themes angegeben werden: name = Garland description = Tableless, recolorable, multi-column, fluid width theme (default). version = VERSION core = 6.x engine = phptemplate stylesheets[all][] = style.css stylesheets[print][] = print.css Zusätzliche Engines konnten (und können nach wie vor) in das Verzeichnis /themes/engines installiert werden, für entsprechende Themes die darauf basieren. Das hat sich aber in der Praxis nicht durchgesetzt.
  • 4. 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>
  • 5. Zeit für TWIG! Twig ist eine moderne, schnelle und flexible PHP Template Engine, ganz zufä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>
  • 6. TWIG für den Drupal Designer Für den Designer / Themer bedeutet die Einführung von TWIG, dass er es jetzt anstelle von PHP Templates (.tpl.php) mit TWIG Templates (.twig) zu tun hat. Dem Themer stehen wie bisher Variablen zur Verfügung, die im Template verwendet 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 %}
  • 7. 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>
  • 8. 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 verlagern Warum? Die Templatesprache ist nicht mehr unbedingt PHP, also haben Templates möglicherweise keinen Zugriff auf PHP- oder Drupal-Funktionen. Einfache Kontrollstrukturen können aber vorausgesetzt werden.
  • 9. Beispiel: TWIG-unfreundliches Modul Theme-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!
  • 10. Besser: TWIG-freundliches Modul Template 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 den TWIG Template dazu (permalink.twig): Themer. Programmlogik und Markup sind getrennt. <span class="permalink"> {{ permalink }} </span>
  • 11. Fragen / Diskussion Zum Weiterlesen: http://groups.drupal.org/node/219224 http://drupal.org/sandbox/pixelmord/1750250 http://de.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8 http://twig.sensiolabs.org Diese Folien als PDF: http://www.slideshare.net/drubb