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.

Mastering Drupal 8’s Twig

718 views

Published on

Drupal 8 rewrote all of its HTML templates using Twig. But Drupal only uses 30% of Twig's full power. In this session, we'll start with the basics and work our way through Twig's powerful feature set.

Published in: Software
  • How we discovered the real reason nice guys don't get laid, and a simple "fix" that allows you to gain the upper hand with a girl... without changing your personality or pretending to be someone you're not. learn more... ➤➤ http://t.cn/AiurDrZp
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Mastering Drupal 8’s Twig

  1. 1. Mastering
 Drupal 8’s Twig John Albin Wilkins
 November 24, 2017
  2. 2. Twig http://twig.sensiolabs.org/ Twig for Template Designers
 https://twig.symfony.com/doc/1.x/templates.html
  3. 3. DRUPAL 8 TWIG Built-in Drupal templates use ~30% of the available Twig features. Drupal 8.4.2 has Twig 1.32.0
  4. 4. Why Twig?
  5. 5. Modern Syntax <?php print variable; ?> {{ variable }} Drupal 7: Twig:
  6. 6. Where's the
 performance hit? <?php if ($is_true): ?> <b>TRUE!</b> <?php endif; ?> PHP parser/compiler has to context switch
  7. 7. Twig
 compiles templates into PHP classes
  8. 8. Twig syntax {{ variable }} {# comment #} {% command %}
  9. 9. Variable drilling {{ variable.thing }} {{ page.primary_menu }} {{ comment.owner.anonymous }}
  10. 10. This is how Twig resolves complex variables <nav>{{ content.links }}</nav> ! $content['links'] $content->links $content->links() $content->getLinks() $content->isLinks() null Twig tries all these alternatives and uses the first one that exists.
  11. 11. Some Drupal variables names are special ! $variables['site_slogan']['#markup'] = ... ! {{ site_slogan.#markup }} core/themes/bartik/bartik.theme This doesn't work because of the # character {{ site_slogan['#markup'] }} {{ attribute(site_slogan, '#markup') }}
  12. 12. Improving Twig performance • Twig provides a PHP extension. • This extension only implements the variable resolving logic. • See twig.sensiolabs.org/doc/ installation.html#installing-the- c-extension EXPECTED
 PERFORMANCE INCREASE 15%
  13. 13. Twig filters
 (added by Twig) {{ variable|escape('html') }} {{ variable|e('html') }} Also accepts: 'js', 'css', 'url', 'html_attr' {{ variable|raw }} collections: |keys |first |last |length {{ variable|date('Y-m-d') }}
 {{ 'now'|date(timezone=user.timezone) }} http://twig.sensiolabs.org/doc/filters/index.html Drupal
 auto-escapes
 by default!
  14. 14. Twig filters
 (added by Drupal) {{ variable|safe_join(', ') }} {{ variable|without('something') }} {{ variable|clean_class }}
 {{ variable|clean_id }} {{ variable|format_date('medium') }} {{ 'Some string'|t }} https://www.drupal.org/node/2357633
  15. 15. Translation {{ 'a string'|t }}
 {{ 'a string'|trans }} {% trans %}
 Submitted by {{ author_name }}
 on {{ date }}
 {% endtrans %}
  16. 16. Attribute object {{ attributes.addClass('foo') }} {{ attributes.removeClass('bar') }} {% if attributes.hasClass('thing') %} {{ attributes.setAttribute('id', 'thing') }} {{ attributes.removeAttribute('id') }} https://api.drupal.org/api/drupal/core!lib!Drupal!Core! Template!Attribute.php/class/Attribute/8
  17. 17. Control directives {% if thing %}
 
 {% endif %} {% for user in users %}
 ...
 {% else %}
 There is no spoon.
 {% endfor %} {% for item in collection if item.published %}
  18. 18. Control directives {% for row in images|batch(3) %}
 <div class="row">
 {% for image in row %}
 <div class="image">
 <img src="" alt="" >
 </div>
 {% endfor %}
 </div>
 {% endfor %}
  19. 19. Extends {% extends "region.html.twig" %} {% set attributes = attributes.addClass('clearfix') %} bartik/templates/region--header.html.twig: classy/templates/layout/region.html.twig: {% set classes = [ 'region', 'region-' ~ region|clean_class, ] %} <div{{ attributes.addClass(classes) }}> {{ content }} </div>
  20. 20. Extends {% extends "block.html.twig" %} {% block content %} <a href="{{ path('<front>') }}" rel="home"> <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" /> </a> {% endblock %} classy/templates/block/block--system-branding-block.html.twig: classy/templates/block/block.html.twig: <div{{ attributes.addClass(classes) }}> <h2{{ title_attributes }}>{{ label }}</h2> {% block content %} {{ content }} {% endblock %} </div>
  21. 21. Include {% include '@my_theme/grid_3.twig' %} {% include '@my_theme/grid_3.twig' with {
 var1: "a new value",
 var2: anotherVar,
 } only
 %}
  22. 22. Embed {% embed '@my_theme/grid_3.twig' %}
 {% block column1 %}
 …block contents…
 {% endblock %}
 {% endembed %}
  23. 23. Debugging In sites/default, copy default.services.yml
 to services.yml. Look for these lines and change "false" to "true".
 twig.config:
 debug: false https://www.drupal.org/node/1906392
  24. 24. Libraries (adding CSS & JS) my_theme.libraries.yml:
 
 breadcrumb:
 css:
 component:
 components/breadcrumb/breadcrumb.css: {}
 dependencies:
 - my_theme/visually-hidden https://www.drupal.org/node/2216195
  25. 25. What else? Drupal 8 Theme Guide:
 www.drupal.org/theme-guide/8

×