Twig in drupal 8

Post on 23-Jan-2018

376 views 3 download

Transcript of Twig in drupal 8

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