twig in drupal 8
TRANSCRIPT
twig
Wat is twig?
●een template framework dat PHPTemplate vervangt●ontwikkeld door de mensen achter Symfony●wordt gebruikt door de grotere PHP community●OOP in het achterhoofd gehouden
Waarom twig?
●PHPTemplate is verouderd● twig is sneller●duidelijk en netter/korter.●gemakkelijker om te leren●gedocumenteerd● veilig●uitbreidbaar
Hoe ziet het er uit?
File en functie namen
theme_node() node.html.twig
Functie namen
page.tpl.php page.html.twig
File namen
Tags (block delimiters)
1. {{ deze }}2. {% deze %}3. {# deze #}
zeggen ietsdoen ietszijn voor comments
Tags (block delimiters)
{{ deze }} printen variabelen
Tags (block delimiters)
{% deze %} behandelen logica
Tags (block delimiters)
{# deze #} maken comments
Variabelen
variabele printen
hash key item printen
variabele maken
array maken
<div>{{ content }}</div>
{{ item[‘#item’] }}
{% set var = content.title %}
{% set var = [ ‘foo’: ‘foo’, ‘bar’: ‘bar’ ] %}
Variabelen
item toevoegen aan bestaande array:
{% set arr = arr|merge({'element': 'value'}) %}
Conditionals (if)
{% if content.comments %} {% endif %}
{% if content.comments is not empty %} {% endif %} // !empty()
{% if content.comments is defined %} {% endif %} // isset()
{% if var > 0 %} {% endif %}
Control structures
foreach ($users as $user) {}
in twig is dit
{% for user in users %} {% endfor %}
Filters
absbatchcapitalizeconvert_encodingdatedate_modifydefaultescape
firstformatjoinjson_encodekeyslastlengthlower
mergenl2brnumber_formatrawreplacereverseroundslice
sortsplitstriptagstitletrimupperurl_encode
Filters
Filters staan bij de variabele die geprint wordt en worden geïdentificeerd door een “|” (pipe)
Filters
Punt notatie
Twig gebruikt punt notatie (.) om attributen van variabelen aan te spreken. Dit geldt ook voor properties van objecten en voor items van arrays.Naast de punt notatie is er ook de subscript syntax, handig voor properties met een hash (#).
{{ foo.bar }} {{ foo[‘#bar’] }}
Wanneer een attribuut een speciaal karakter heeft (zoals een liggend streepje dat als een min-operator geïnterpreteerd wordt), gebruiken we de attribute functie:
{# equivalent van {{ foo.bar-data }} #}{{ attribute(foo, ‘bar-data’) }}
Overerving
Templates kunnen erven van elkaar.De originele template definieert een block dat overschreven kan worden.De ervende template roept het origineel aan en overschrijft het blok.
Overerving
Voorbeeld uit core themes Classy en Bartik:Classy definieert een blok in /templates/block/block--search-form-block.html.twig
en gebruikt {{ parent() }} om de originele content te printen.
Bartik roept de Classy template aan en voegt code toe aan het block in /templates/block/block--
search-form-block.html.twig
Assets toevoegen
Debugging
locatie: sites/default/services.yml
Zet debug: true
Debugging
● templates automatisch opnieuw gecompileerd● toont handige comments in html● laat toe de dump() functie te gebruiken
Doe dit NIET in productie!
DebuggingDebug output:
Debugging
Debug() kan vastlopen wanneer er veel variabelen zijn.
Alternatief: kint()
drush dl develdrush en kint
Debugging
Gebruik {{ kint() }}ipv {{ dump() }}
Documentatie
http://twig.sensiolabs.orghttp://www.drupal.org/theme-guide/8