Темизация и twig в drupal 8
TRANSCRIPT
Темизация и 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