Theming in Drupal 8 (everything)
•Download as PPTX, PDF•
0 likes•82 views
Some theming principles, links and advices for front-end developers switching from Drupal 7 to Drupal 8, or for people that need to quickly hop into D8 theming development. There are links of the demo on github for the source code.
More Related Content
Similar to Theming in Drupal 8 (everything)
Similar to Theming in Drupal 8 (everything) (20)
More from Kirill Borzov
More from Kirill Borzov (10)
Recently uploaded
Recently uploaded (20)
Theming in Drupal 8 (everything)
- 1. Theming in Drupal 8 Getting started guide
- 3. Contents: 1. Differences with D7 2. File structure 3. Twig 4. Theme functions
- 4. Difference with Drupal 7 Same theme registry, same hook_theme, but with twig hook_process removed Now HTML5 friendly Adding scripts and styles in library All theme functions are now twig templates New theme hook suggestions: http://bit.ly/2jhjPpd
- 5. Difference with Drupal 7 No jQuery by default Breakpoints and Responsive images module Image styles: /admin/config/media/responsive-image-style Defining Breakpoints in theme config Theme settings and defaults change a bit. SMACSS and BEM based structure Drupal is now more responsive http://bit.ly/2kH6Yta
- 6. Difference with Drupal 7 or use Headless Drupal 8, so you don’t care ;)
- 7. File structure THEMENAME.info.yml * What libraries to include and basic theme stuff http://bit.ly/2kFnGN2 THEMENAME.libraries.yml * What files to include https://www.drupal.org/node/2216195 THEMENAME.theme Where the preprocess and alter logic goes http://bit.ly/2keNZsR
- 9. Working with Twig Quick overview: http://bit.ly/2kFep3A Twig naming convention: http://bit.ly/2kFtMwJ Twig filters: http://bit.ly/2kFkPzB in Drupal: http://bit.ly/2kFyR8a Twig funtions: http://bit.ly/2kFk6yv in Drupal: http://bit.ly/2kFk6yv Attributes http://bit.ly/2kFueeA
- 10. Theme functions Read about theme api and core templates here: http://bit.ly/2lmOrD8 About hook_theme here: http://bit.ly/2lmZewZ Twig naming convention: http://bit.ly/2lna3zh Pattern lab starter for D8 http://bit.ly/2koGnTT
- 11. Thank you! & have a nice day! the presentation is available here: http://bit.ly/theming-d8
Editor's Notes
- Различия с Друпал седьмым, что добавилось, что исчезло Поговорим о всех возможных (адекватных) файлах в папке темы, и где она должна быть Поговорим о твиге, что дает, как использовать и разберем пару примеров Посмотрим как изменились theme функции и как их использовать в D8 Полезные ссылки: https://sqndr.github.io/d8-theming-guide/core-themes/index.html https://dl.dropboxusercontent.com/u/8325927/d8-theming-html/index.html https://www.drupal.org/list-changes/drupal/published?keywords_description=&to_branch=&version=&created_op=%3E%3D&created%5Bvalue%5D=&created%5Bmin%5D=&created%5Bmax%5D=&impacts%5B%5D=3
- В принципе больших изменений в создании темы для D8 от d7 нет. Конечно новый yml формат и twig, но это небольшие изменения. Размерем тонкости. — Такой же theme registry. Все объявленные theme функции попадают туда, как и препроцессы и расположение файла — объявление и использование hook_theme такое же, но не нужно объявлять темплейты. Сразу идут твиг темплейты. Определяется так же - наличие в теме, в модуле и в коре. Работает переписывание по названию файла — Раньше были preprocess и process, сейчас process выкинули — Друпал теперь во всю использует html5 элементы, role и rDFA генерит schema.org markup. Не все новые html5 тэги добавлены. Сюда же - css стал чище, убрали лишние классы, убрали лишние врапперы, html стал много красивее — Раньше стили и скрипты можно было добавлять откуда угодно (я писал статью об этом). Теперь это на плечах библиотек, и все разделено по компонентам. В .info.yml можно указать какие libraries использовать на всех страницах, какие переписать, дополнить или отменить. Библиотеки можно подключать в twig файле через {{ attach_library('fluffiness/cuddly-slider') }} Можно в theme_preprocess_hook через variables['#attached']['library'][] — Все коровские тимизационные функции переведены в twig Темплейты поменяли в twig расширения Функции без темплейтов перевели в темплейты В коре теперь нет html кода вне twig файлов — theme hook suggestion раньше был в preprocess’е, теперь для него сделали отдельный hook: hook_theme_suggestions_alter(array &$suggestions, array $variables, $hook) и hook_theme_hook_suggestion_HOOK_alter(array &$suggestions, array $variables). Добавляется строка с саджестом в $suggestions, с __. В названии темплейта должны быть - — рекомендуется из preprocess’ов убирать theme() и drupal_render() функции, а вместо этого создавать renderable array и указанием нужной темы. array(‘#theme’ => ‘menu-item’, ...);
- — Раньше jQuery был изначально на всех страницах, теперь его нужно подключать везде где нужно. Можно подключить глобально в theme.libraries.yml — модуль breakpoints в коре. Брейкпойнты задаются в yml файле THEMENAME.breakpoints.yml - Заданные брэйкпойнты можно использовать в модуль Responsive images. — Настройки темы можно задать в themename.theme или в theme-settings.php. Внутри должна быть функция function hook_form_system_theme_settings_alter() - дефолтные значения хранятся в настройках в теме: config/install/THEMENAME.settings.yml - переменные из настроек нужно отправлять в темплейт через препроцесс. Получить можно через theme_get_setting('foo_example'); — — Много всего, админка и тулбар сразу респонсив, брэйкпойнты, modernizr и прочее. Читать тут : https://www.drupal.org/node/1388492 — Друпал теперь НАКОНЕЦ поддерживает новую версию jquery (2.x), модернайзер и проч. Опять же, если нужны — подключить в library. — Появились тема classy - с минимальными классами и чистыми темплейтами. И тема stable - совсем голая. Лучше использовать тему Classy как base тему
- Если вы используете d8 как REST-full или API сервис, то в принципе вы не столкнетесь с проблемой верстки под d8 :)
- Демо: Слайды от Wes Ruvalcaba: http://wesruv.github.io/reveal.js/d8.html#/17 Template helper для Chrome: https://chrome.google.com/webstore/detail/drupal-template-helper/ppiceaegogijpjodfpiimifhbnaifbnn