Помощь начинающим веб
разработчикам

Основы синтаксиса Twig в Drupal 8

31.05.2016

Думаю, многие из вас уже успели познакомиться с Drupal 8 и его многочисленными изменениями и наверняка уже знаете, что в основу новой ветки пришел и новый шаблонизатор, взамен PHPTemplate – Twig. Сегодня мы рассмотрим основы данного шаблонизатора, дабы в следующих уроках по созданию темы для Drupal 8, вы понимали его специфичный синтаксис.

Итак, начнем с базовых вещей:

Вставка комментария:

  1. #PHPTemplate
  2. <?php
  3. /**
  4.   * @file
  5.   * File description
  6.   */
  7. ?>
  8.  
  9. #Twig
  10. {#
  11. /**
  12. * @file
  13. * File description
  14. */
  15. #}

Имена файлов и функций:

  1. #PHPTemplate
  2. node--article.tpl.php
  3. theme_node_links()
  4.  
  5. #Twig
  6. node--article.html.twig
  7. node-links.html.twig

Хочу заменить, что в Drupal 7 для темизации, используются как функции темизации, например как theme_links(), так и шаблоны шаблонизатора PHPTemplate, например node.tpl.php. В Drupal 8 постарались полностью отказаться от функций темизаций и возложить всё на шаблоны Twig. Системные файлы шаблонов можно найти по пути

  1. core/modules/system/templates

Так же некоторые системные модули, например node, так же имеют свои шаблонные файлы.

  1. core/modules/node/templates

Так же, вам необходимо знать, что все файлы шаблонизатора Twig компилируются один раз и скомпилированная копия файла сохраняется по пути

  1. sites/default/files/php/twig

и при каждой последующей загрузке страницы забирается его копия. Обновление файлов происходит после очистки кеша, так что не забывайте включать режим отладки, при разработке вашей темы.

Вывод переменных:

  1. #PHPTemplate:
  2. <?php print $content; ?>
  3.  
  4. #Twig:
  5. {{ content }}

Вывод полей:

  1. // Пропущенный через файл темизации
  2. #Twig:
  3. {{ content.field_name }}
  4.  
  5. // Сырое значение первого поля
  6. #Twig:
  7. {{ content.field_name.0 }}

Создание кастомных переменных:

  1. #PHPTemplate:
  2. <?php $custom_var = $content->comments; ?>
  3.  
  4. #Twig:
  5. {% set custom_var = content.comments %}

Присвоение массива:

  1. #PHPTemplate:
  2. <?php $args = array('!author' => $author, '!date' => $created); ?>
  3.  
  4. #Twig:
  5. {% set args = {'!author': author, '!date': created} %}

Вывод атрибутов:

  1. #PHPTemplate:
  2. <?php print $item['#item']['alt']; ?>
  3.  
  4. #Twig:
  5. {{ item['#item'].alt }}

Добавление/удаление атрибута:

  1. #Добавление атрибута
  2. #Twig: {{ attributes.setAttribute('id', 'my-id') }}
  3. #Twig: {{ attributes.setAttribute('data-example', 'newvalue') }}
  4.  
  5. #Удаление атрибута
  6. #Twig:
  7. {{ attributes.removeAttribute('id', 'my-id') }}

Проверка на наличие атрибута:

  1. #Twig:
  2. {% if attributes.hasClass('myClass') %} {% endif %}

Добавление/удаление класса CSS:

  1. #Добавление класса
  2. #Twig:
  3. {{ attributes.addClass('my-class') }}
  4.  
  5. #Удаление класса
  6. #Twig:
  7. {{ attributes.removeClass('my-class') }}
  8.  
  9. #Групповая обработка
  10. #Twig: {{ attributes.addClass('my-class').removeClass('my-class-active') }}

Управляющая конструкция if else:

  1. #PHPTemplate:
  2. <?php if ($content->comments): endif; ?>
  3. #Twig:
  4. {% if content.comments %} {% endif %}
  5.  
  6. #PHPTemplate:
  7. <?php if (!empty($content->comments)): endif; ?>
  8. #Twig:
  9. {% if content.comments is not empty %} {% endif %}
  10.  
  11. #PHPTemplate:
  12. <?php if (isset($content->comments)): endif; ?>
  13. #Twig:
  14. {% if content.comments is defined %} {% endif %}
  15.  
  16. #PHPTemplate:
  17. <?php if ($count > 0): endif; ?>
  18. #Twig:
  19. {% if count > 0 %} {% endif %}

Управляющая конструкция foreach:

  1. #PHPTemplate:
  2. <?php foreach ($users as $user) {} ?>
  3. #Twig:
  4. {% for user in users %} {% endfor %}

Фильтры:

  1. #Пропустить строку через фильтр Check_plain:
  2. #PHPTemplate:
  3. <?php print check_plain($title); ?>
  4. #Twig:
  5. {{ title|striptags }}
  6.  
  7. Перевод строки:
  8. #PHPTemplate:
  9. <?php print t('Home'); ?>
  10. #Twig:
  11. {{ 'Home'|t }}
  12.  
  13. Перевод строки с заменой:
  14. #PHPTemplate:
  15. <?php print t('Welcome, @username', array('@username' => $user->name)); ?>
  16. #Twig:
  17. {{ 'Welcome, @username'|t({ '@username': user.name }) }}
  18.  
  19. Получить список элементов из массива
  20. #PHPTemplate:
  21. <?php echo implode(', ', $usernames); ?>
  22. #Twig:
  23. {{ usernames | join(', ') }}

Использование функций:

  1. #Twig:
  2. {% set createdDate = node.getCreatedTime|date('M d, Y') %}
  3. <time class="published" datetime="{{ createdDate }}">{{ createdDate }}</time>

Здесь естественно не весь список, а лишь основы, которые вы будете использовать в 90% случаях при создании вашей кастомной темы. Я же, в свою очередь будут стараться обновлять данный список. Если вы считаете, что в данном списке что-то не хватает, то пишем в комментариях.

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Добавить комментарий

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии