Темизация и Twigв Drupal 8

Николай ШаповаловDrupal Meetup #7

21 ноября, Санкт-Петербург

Темизация в Drupal 7

2

Новые возможности в Drupal 8 из коробки

Разметка HTML 5 (теги header, nav, article).

Поддержка людей с физическими ограничениями (WAI-ARIA).

Отказ от поддержки старых браузеров (IE 8 и младше, Android 2.3).

Адаптивность, Поддержка мобильных устройств.

3

Адаптивные возможности

Breakpoints (контрольные точки)

Темы

Панель управления (toolbar)

Картинки

Таблицы

4

Изменения в CSS

SMACSS

БЕМ

CSS3 псевдо селекторы

Media query

меньшее кол-во ID

5

Изменения в JS

jQuery 2.x

Modernizr

Underscore.js

Backbone.js

6

Новые возможности темизации

Механизм наследование тем.

Тема может переопределять все шаблоны, CSS и JS.

7

Изменения в темизации

8

Удален hook_page_alter()

Удалены все функции process_*

Удалены все функции theme_*

… и заменены шаблонами *.html.twig

Ядерные темы лежат в /core/themes/

Кастомные темы лежат /themes/

Рендер массивы вместо theme()

Drupal 7

9

Drupal 8

Темизация в Drupal 8

10

11

Преимущества

• Никакого PHP в шаблонах!

• Верстальщику не надо знать PHP.

• Можно использовать один шаблон многократно (include).

• Простой в изучении синтаксис Twig.

• Автоматическое экранирование.

Недостатки

• Новый язык для изучения.

• Обновления Twig после заморозки кода.

Twig

Как работать с Twig?

12

Операторы в Twig

13

{{ ... }} - вывод на экран

{% ... %} - логические выражения

{# ... #} - комментарии

Комментарии

14

Вывод простых переменных

core/themes/bartik/templates/comment.html.twig

15

Вывод сложных переменных

core/themes/bartik/templates/comment.html.twig

Twig

PHP

16

Фильтры в Twig

/core/themes/bartik/templates/comment.html.twig

17

{{ value|t }}

{{ value|trans }}

{{ value|passthrough }}

{{ value|placeholder }}

{{ value|drupal_escape }}

{{ value|safe_join }}

{{ value|without }}

{{ value|clean_class }}

{{ value|clean_id }}

{{ value|render }}

Фильтр drupal_escape

18

Hello my name is <strong>Nikolay</strong>!

Фильтр raw

19

Hello my name is Nikolay!

Переводы

20

Формат plural (Перевод в зависимости от числа)

21

Вывод переменных со знаком #

PHP

Twig

22

Присваивание переменных

23

Перебор пустых массивов

24

Вывести все доступные переменные

1. Включаем отладку Twig.

25

Стандартные темы

ЯДРО DRUPAL 8

CLASSY

SEVEN BARTIK

STABLE STARK

26

Classy

Базовая тема для Bartik и Stark.

Новый дом для стандартных Drupal CSS классов.

Stable

Тема с минимальным набором стилей и разметки, которая необходима для функционирования стандартного Drupal интерфейса.

27

Classy

Stable

28

Изменения в CSS классах

D7

1. .menu li.expanded2. .menu li.collapsed3. .menu li.active-trail4. .menu li.first5. .menu li.last

D8

1. .menu-item--expanded2. .menu-item--collapsed3. .menu-item--active-trail4. .menu-item:first-child5. .menu-item:last-child

29

Bartik

Стандартная тема

Полностью адаптивная

base theme: classy

Стандартная административная тема

base theme: classy

Seven

30

Создание темы

У разработчиков и дизайнеров теперь есть выбор:Наследовать Classy, чтобы получить стандартные классы.Наследовать Stable, чтобы иметь только базовую разметку.Начать с чистого листа.

Достаточно указать в файле ТЕМА.info.ymlbase theme: classybase theme: stablebase theme: false

31

Stark

Тестовая тема.

В теме нет своих CSS стилей и JS скриптов.

Тема, демонстрирует html разметку и css стили ядра Drupal 8.

32

Как внести изменения в существующие темы?

33

Темизируем Bartik

34

Темизируем Bartik. Создание темы.

1.В папке /themes/ создать папку /themes/meetup/

2.Создать файл meetup.info.yml.

35

Темизируем Bartik. Поиск нужного шаблона.

1. Ищем шаблон в

a./core/themes/bartik/templates/

b./core/themes/classy/templates/

2. Переносим найденый шаблон в

a./themes/meetup/templates/

36

Темизируем Bartik. Поиск нужного шаблона.

/core/themes/bartik/templates/node.html.twig

37

Темизируем Bartik. Поиск нужного шаблона.

/themes/meetup/templates/node.html.twig

38

Темизируем Bartik

39

Темизируем Bartik. Результат.

40

Изменяем название шаблона.

1.node--nodeid--viewmode.html.twig

2.node--nodeid.html.twig

3.node--type--viewmode.html.twig

4.node--type.html.twig

5.node--viewmode.html.twig

6.node.html.twig

41

Изменяем название шаблона.

node.html.twig

node--article--teaser.html.twig

42

Ссылки

DrupalCon Barcelona 2015: Mastering TwigCSS Coding standardsJavascript Coding standardsTwig Coding standardsA Tale of Two Base Themes in Drupal 8 coreTheming differences between Drupal 6, 7 & 8Theme system overview

43

Спонсоры

Докладчик

Николай Шаповаловhttps://zniki.ru/contact