Twig in drupal 8
Embed Size (px)
Transcript of Twig in drupal 8
-
twig
-
Wat is twig?
een template framework dat PHPTemplate vervangtontwikkeld door de mensen achter Symfonywordt gebruikt door de grotere PHP communityOOP in het achterhoofd gehouden
-
Waarom twig?
PHPTemplate is verouderd twig is snellerduidelijk en netter/korter.gemakkelijker om te lerengedocumenteerd veiliguitbreidbaar
-
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
{{ content }}
{{ 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
http://twig.sensiolabs.org/doc/filters/abs.htmlhttp://twig.sensiolabs.org/doc/filters/batch.htmlhttp://twig.sensiolabs.org/doc/filters/capitalize.htmlhttp://twig.sensiolabs.org/doc/filters/convert_encoding.htmlhttp://twig.sensiolabs.org/doc/filters/date.htmlhttp://twig.sensiolabs.org/doc/filters/date_modify.htmlhttp://twig.sensiolabs.org/doc/filters/default.htmlhttp://twig.sensiolabs.org/doc/filters/escape.htmlhttp://twig.sensiolabs.org/doc/filters/first.htmlhttp://twig.sensiolabs.org/doc/filters/format.htmlhttp://twig.sensiolabs.org/doc/filters/join.htmlhttp://twig.sensiolabs.org/doc/filters/json_encode.htmlhttp://twig.sensiolabs.org/doc/filters/keys.htmlhttp://twig.sensiolabs.org/doc/filters/last.htmlhttp://twig.sensiolabs.org/doc/filters/length.htmlhttp://twig.sensiolabs.org/doc/filters/lower.htmlhttp://twig.sensiolabs.org/doc/filters/merge.htmlhttp://twig.sensiolabs.org/doc/filters/nl2br.htmlhttp://twig.sensiolabs.org/doc/filters/number_format.htmlhttp://twig.sensiolabs.org/doc/filters/raw.htmlhttp://twig.sensiolabs.org/doc/filters/replace.htmlhttp://twig.sensiolabs.org/doc/filters/reverse.htmlhttp://twig.sensiolabs.org/doc/filters/round.htmlhttp://twig.sensiolabs.org/doc/filters/slice.htmlhttp://twig.sensiolabs.org/doc/filters/sort.htmlhttp://twig.sensiolabs.org/doc/filters/split.htmlhttp://twig.sensiolabs.org/doc/filters/striptags.htmlhttp://twig.sensiolabs.org/doc/filters/title.htmlhttp://twig.sensiolabs.org/doc/filters/trim.htmlhttp://twig.sensiolabs.org/doc/filters/upper.htmlhttp://twig.sensiolabs.org/doc/filters/url_encode.html
-
Filters
Filters staan bij de variabele die geprint wordt en worden gedentificeerd 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 genterpreteerd 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
http://twig.sensiolabs.orghttp://www.drupal.org/theme-guide/8