Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
twig
Wat is twig?
●een template framework dat PHPTemplate vervangt
●ontwikkeld door de mensen achter Symfony
●wordt gebruikt do...
Waarom twig?
●PHPTemplate is verouderd
●twig is sneller
●duidelijk en netter/korter.
●gemakkelijker om te leren
●gedocumen...
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 iets
doen iets
zijn 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’] }...
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()
{% ...
Control structures
foreach ($users as $user) {}
in twig is dit
{% for user in users %} {% endfor %}
Filters
abs
batch
capitalize
convert_encoding
date
date_modify
default
escape
first
format
join
json_encode
keys
last
leng...
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...
Wanneer een attribuut een speciaal karakter heeft (zoals
een liggend streepje dat als een min-operator
geïnterpreteerd wor...
Overerving
Templates kunnen erven van elkaar.
De originele template definieert een block dat overschreven
kan worden.
De e...
Overerving
Voorbeeld uit core themes Classy en Bartik:
Classy definieert een blok in /templates/block/block--
search-form-...
en gebruikt {{ parent() }} om de originele content te printen.
Bartik roept de Classy template aan en voegt code toe aan h...
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 gebru...
Debugging
Debug output:
Debugging
Debug() kan vastlopen wanneer er veel variabelen zijn.
Alternatief: kint()
drush dl devel
drush en kint
Debugging
Gebruik {{ kint() }}
ipv {{ dump() }}
Documentatie
http://twig.sensiolabs.org
http://www.drupal.org/theme-guide/8
Upcoming SlideShare
Loading in …5
×

Twig in drupal 8

417 views

Published on

De presentatie over de template engine Twig.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Twig in drupal 8

  1. 1. twig
  2. 2. 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
  3. 3. Waarom twig? ●PHPTemplate is verouderd ●twig is sneller ●duidelijk en netter/korter. ●gemakkelijker om te leren ●gedocumenteerd ●veilig ●uitbreidbaar
  4. 4. Hoe ziet het er uit?
  5. 5. File en functie namen theme_node() node.html.twig Functie namen page.tpl.php page.html.twig File namen
  6. 6. Tags (block delimiters) 1. {{ deze }} 2. {% deze %} 3. {# deze #} zeggen iets doen iets zijn voor comments
  7. 7. Tags (block delimiters) {{ deze }} printen variabelen
  8. 8. Tags (block delimiters) {% deze %} behandelen logica
  9. 9. Tags (block delimiters) {# deze #} maken comments
  10. 10. 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’ ] %}
  11. 11. Variabelen item toevoegen aan bestaande array: {% set arr = arr|merge({'element': 'value'}) %}
  12. 12. 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 %}
  13. 13. Control structures foreach ($users as $user) {} in twig is dit {% for user in users %} {% endfor %}
  14. 14. Filters abs batch capitalize convert_encoding date date_modify default escape first format join json_encode keys last length lower merge nl2br number_format raw replace reverse round slice sort split striptags title trim upper url_encode
  15. 15. Filters Filters staan bij de variabele die geprint wordt en worden geïdentificeerd door een “|” (pipe)
  16. 16. Filters
  17. 17. 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’] }}
  18. 18. 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’) }}
  19. 19. 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.
  20. 20. Overerving Voorbeeld uit core themes Classy en Bartik: Classy definieert een blok in /templates/block/block-- search-form-block.html.twig
  21. 21. 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
  22. 22. Assets toevoegen
  23. 23. Debugging locatie: sites/default/services.yml Zet debug: true
  24. 24. Debugging ●templates automatisch opnieuw gecompileerd ●toont handige comments in html ●laat toe de dump() functie te gebruiken Doe dit NIET in productie!
  25. 25. Debugging Debug output:
  26. 26. Debugging Debug() kan vastlopen wanneer er veel variabelen zijn. Alternatief: kint() drush dl devel drush en kint
  27. 27. Debugging Gebruik {{ kint() }} ipv {{ dump() }}
  28. 28. Documentatie http://twig.sensiolabs.org http://www.drupal.org/theme-guide/8

×