twig in drupal 8

28
twig

Upload: dropsolid

Post on 23-Jan-2018

376 views

Category:

Software


3 download

TRANSCRIPT

Page 1: Twig in drupal 8

twig

Page 2: Twig in drupal 8

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

Page 3: Twig in drupal 8

Waarom twig?

●PHPTemplate is verouderd● twig is sneller●duidelijk en netter/korter.●gemakkelijker om te leren●gedocumenteerd● veilig●uitbreidbaar

Page 4: Twig in drupal 8

Hoe ziet het er uit?

Page 5: Twig in drupal 8

File en functie namen

theme_node() node.html.twig

Functie namen

page.tpl.php page.html.twig

File namen

Page 6: Twig in drupal 8

Tags (block delimiters)

1. {{ deze }}2. {% deze %}3. {# deze #}

zeggen ietsdoen ietszijn voor comments

Page 7: Twig in drupal 8

Tags (block delimiters)

{{ deze }} printen variabelen

Page 8: Twig in drupal 8

Tags (block delimiters)

{% deze %} behandelen logica

Page 9: Twig in drupal 8

Tags (block delimiters)

{# deze #} maken comments

Page 10: Twig in drupal 8

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’ ] %}

Page 11: Twig in drupal 8

Variabelen

item toevoegen aan bestaande array:

{% set arr = arr|merge({'element': 'value'}) %}

Page 12: Twig in drupal 8

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 %}

Page 13: Twig in drupal 8

Control structures

foreach ($users as $user) {}

in twig is dit

{% for user in users %} {% endfor %}

Page 14: Twig in drupal 8

Filters

absbatchcapitalizeconvert_encodingdatedate_modifydefaultescape

firstformatjoinjson_encodekeyslastlengthlower

mergenl2brnumber_formatrawreplacereverseroundslice

sortsplitstriptagstitletrimupperurl_encode

Page 15: Twig in drupal 8

Filters

Filters staan bij de variabele die geprint wordt en worden geïdentificeerd door een “|” (pipe)

Page 16: Twig in drupal 8

Filters

Page 17: Twig in drupal 8

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’] }}

Page 18: Twig in drupal 8

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’) }}

Page 19: Twig in drupal 8

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.

Page 20: Twig in drupal 8

Overerving

Voorbeeld uit core themes Classy en Bartik:Classy definieert een blok in /templates/block/block--search-form-block.html.twig

Page 21: Twig in drupal 8

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

Page 22: Twig in drupal 8

Assets toevoegen

Page 23: Twig in drupal 8

Debugging

locatie: sites/default/services.yml

Zet debug: true

Page 24: Twig in drupal 8

Debugging

● templates automatisch opnieuw gecompileerd● toont handige comments in html● laat toe de dump() functie te gebruiken

Doe dit NIET in productie!

Page 25: Twig in drupal 8

DebuggingDebug output:

Page 26: Twig in drupal 8

Debugging

Debug() kan vastlopen wanneer er veel variabelen zijn.

Alternatief: kint()

drush dl develdrush en kint

Page 27: Twig in drupal 8

Debugging

Gebruik {{ kint() }}ipv {{ dump() }}

Page 28: Twig in drupal 8

Documentatie

http://twig.sensiolabs.orghttp://www.drupal.org/theme-guide/8