Twig in drupal 8

of 28 /28
twig

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