SlideShare a Scribd company logo
1 of 17
Download to read offline
Layouts VS Templates у Drupal 8.
Погляд зі сторони front-end.
Templates
Templates - простий спосіб “натягнути”
Верстку
Кількість templates зашкалює
Зміни в адмін-панелі не впливають на
відображення елементів
Обов`язкові елементи в twig templates
<article{{ attributes.addClass(classes) }}>
https://www.drupal.org/node/2551373 - contextual.js and quickedit.js
should fail gracefully, with useful error messages, when Twig templates
forget to print attributes
{{ title_prefix }} - contextual links
Layots & DS
Layouts list
layout-name.html.twig
theme_name.layouts.yml
Вибір layout
Розташування полів в layout
DS Extras
Результат
1. Використовуємо шаблони Drupal Core
2. 1 layout може викорисовуватися декілька разів і в різних entity
3. Зручність управління, зміни в адмін-панелі відображаются на
сайті :)
Sergiy Borodylin
Skilld - Drupal front-end developer
DevCompany - Co-founder
● https://www.facebook.com/hog.seruj
● https://www.drupal.org/u/hog

More Related Content

Similar to Layouts vs Templates - Sergey Borodylin

природна і економна дорожня карта для переходу команди розробки на тест центр...
природна і економна дорожня карта для переходу команди розробки на тест центр...природна і економна дорожня карта для переходу команди розробки на тест центр...
природна і економна дорожня карта для переходу команди розробки на тест центр...Andrii Podanenko
 
МАПО Лекция 13 Схема компонентов UML
МАПО Лекция 13 Схема компонентов UMLМАПО Лекция 13 Схема компонентов UML
МАПО Лекция 13 Схема компонентов UMLОлег Гудаев
 
Global logic tech talk switching to Angular.js
Global logic tech talk switching to Angular.jsGlobal logic tech talk switching to Angular.js
Global logic tech talk switching to Angular.jsPavlo Iuriichuk
 
Павло Юрійчук — Перехід на Angular.js. Howto
Павло Юрійчук — Перехід на Angular.js. HowtoПавло Юрійчук — Перехід на Angular.js. Howto
Павло Юрійчук — Перехід на Angular.js. HowtoGlobalLogic Ukraine
 
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...lisovvolod
 
Using Metatags in Flex Developing
Using Metatags in Flex DevelopingUsing Metatags in Flex Developing
Using Metatags in Flex DevelopingRoman Shuper
 
10 asp.net
10 asp.net 10 asp.net
10 asp.net eleksdev
 
Uml+Patterns2
Uml+Patterns2Uml+Patterns2
Uml+Patterns2apofig
 
ЮРІЙ СЕРДЮК «Патерни проектування в автоматизації. Практичний досвід з Python...
ЮРІЙ СЕРДЮК «Патерни проектування в автоматизації. Практичний досвід з Python...ЮРІЙ СЕРДЮК «Патерни проектування в автоматизації. Практичний досвід з Python...
ЮРІЙ СЕРДЮК «Патерни проектування в автоматизації. Практичний досвід з Python...GoQA
 
Lviv PMDay 2015 S Михайло Попчук: “Синхронізація декількох Agile команд в про...
Lviv PMDay 2015 S Михайло Попчук: “Синхронізація декількох Agile команд в про...Lviv PMDay 2015 S Михайло Попчук: “Синхронізація декількох Agile команд в про...
Lviv PMDay 2015 S Михайло Попчук: “Синхронізація декількох Agile команд в про...Lviv Startup Club
 
Volodymyr Yatsynych e+CMS flash front end (server)
Volodymyr Yatsynych e+CMS flash front end (server)Volodymyr Yatsynych e+CMS flash front end (server)
Volodymyr Yatsynych e+CMS flash front end (server)Semen Frish
 
Docsvision Кирильчук Сергій
Docsvision Кирильчук СергійDocsvision Кирильчук Сергій
Docsvision Кирильчук СергійDokymentoznavstvo111
 
Урок 13. Розділи, колонтитули, стилі, структура в текстових документах
Урок 13. Розділи, колонтитули, стилі, структура в текстових документахУрок 13. Розділи, колонтитули, стилі, структура в текстових документах
Урок 13. Розділи, колонтитули, стилі, структура в текстових документахВасиль Тереховський
 
"Distributed graphs and microservices in Prom.ua", Maksym Kindritskyi
"Distributed graphs and microservices in Prom.ua",  Maksym Kindritskyi"Distributed graphs and microservices in Prom.ua",  Maksym Kindritskyi
"Distributed graphs and microservices in Prom.ua", Maksym KindritskyiFwdays
 

Similar to Layouts vs Templates - Sergey Borodylin (20)

природна і економна дорожня карта для переходу команди розробки на тест центр...
природна і економна дорожня карта для переходу команди розробки на тест центр...природна і економна дорожня карта для переходу команди розробки на тест центр...
природна і економна дорожня карта для переходу команди розробки на тест центр...
 
МАПО Лекция 13 Схема компонентов UML
МАПО Лекция 13 Схема компонентов UMLМАПО Лекция 13 Схема компонентов UML
МАПО Лекция 13 Схема компонентов UML
 
Global logic tech talk switching to Angular.js
Global logic tech talk switching to Angular.jsGlobal logic tech talk switching to Angular.js
Global logic tech talk switching to Angular.js
 
Павло Юрійчук — Перехід на Angular.js. Howto
Павло Юрійчук — Перехід на Angular.js. HowtoПавло Юрійчук — Перехід на Angular.js. Howto
Павло Юрійчук — Перехід на Angular.js. Howto
 
Друпал Drush
Друпал DrushДрупал Drush
Друпал Drush
 
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...
 
Using Metatags in Flex Developing
Using Metatags in Flex DevelopingUsing Metatags in Flex Developing
Using Metatags in Flex Developing
 
10 asp.net
10 asp.net 10 asp.net
10 asp.net
 
3
33
3
 
3
33
3
 
Uml+Patterns2
Uml+Patterns2Uml+Patterns2
Uml+Patterns2
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
ЮРІЙ СЕРДЮК «Патерни проектування в автоматизації. Практичний досвід з Python...
ЮРІЙ СЕРДЮК «Патерни проектування в автоматизації. Практичний досвід з Python...ЮРІЙ СЕРДЮК «Патерни проектування в автоматизації. Практичний досвід з Python...
ЮРІЙ СЕРДЮК «Патерни проектування в автоматизації. Практичний досвід з Python...
 
Lviv PMDay 2015 S Михайло Попчук: “Синхронізація декількох Agile команд в про...
Lviv PMDay 2015 S Михайло Попчук: “Синхронізація декількох Agile команд в про...Lviv PMDay 2015 S Михайло Попчук: “Синхронізація декількох Agile команд в про...
Lviv PMDay 2015 S Михайло Попчук: “Синхронізація декількох Agile команд в про...
 
ASP.Net basics
ASP.Net basics ASP.Net basics
ASP.Net basics
 
Volodymyr Yatsynych e+CMS flash front end (server)
Volodymyr Yatsynych e+CMS flash front end (server)Volodymyr Yatsynych e+CMS flash front end (server)
Volodymyr Yatsynych e+CMS flash front end (server)
 
Docsvision Кирильчук Сергій
Docsvision Кирильчук СергійDocsvision Кирильчук Сергій
Docsvision Кирильчук Сергій
 
Урок 13. Розділи, колонтитули, стилі, структура в текстових документах
Урок 13. Розділи, колонтитули, стилі, структура в текстових документахУрок 13. Розділи, колонтитули, стилі, структура в текстових документах
Урок 13. Розділи, колонтитули, стилі, структура в текстових документах
 
Theme24-jQuery
Theme24-jQueryTheme24-jQuery
Theme24-jQuery
 
"Distributed graphs and microservices in Prom.ua", Maksym Kindritskyi
"Distributed graphs and microservices in Prom.ua",  Maksym Kindritskyi"Distributed graphs and microservices in Prom.ua",  Maksym Kindritskyi
"Distributed graphs and microservices in Prom.ua", Maksym Kindritskyi
 

More from DrupalCamp Kyiv

Speed up the site building with Drupal's Bootstrap Layout Builder
Speed up the site building with Drupal's Bootstrap Layout BuilderSpeed up the site building with Drupal's Bootstrap Layout Builder
Speed up the site building with Drupal's Bootstrap Layout BuilderDrupalCamp Kyiv
 
Performance Monitoring with Google Lighthouse
Performance Monitoring with Google LighthousePerformance Monitoring with Google Lighthouse
Performance Monitoring with Google LighthouseDrupalCamp Kyiv
 
Oleg Bogut - Decoupled Drupal: how to build stable solution with JSON:API, Re...
Oleg Bogut - Decoupled Drupal: how to build stable solution with JSON:API, Re...Oleg Bogut - Decoupled Drupal: how to build stable solution with JSON:API, Re...
Oleg Bogut - Decoupled Drupal: how to build stable solution with JSON:API, Re...DrupalCamp Kyiv
 
Acquia BLT for the Win, or How to speed up the project setup, development an...
Acquia BLT for the Win, or  How to speed up the project setup, development an...Acquia BLT for the Win, or  How to speed up the project setup, development an...
Acquia BLT for the Win, or How to speed up the project setup, development an...DrupalCamp Kyiv
 
THE INTERNET OF THINGS IS GETTING REAL
THE INTERNET OF THINGS IS GETTING REALTHE INTERNET OF THINGS IS GETTING REAL
THE INTERNET OF THINGS IS GETTING REALDrupalCamp Kyiv
 
FRONT-END COMPONENTS IN DRUPAL THEME. "KAIZEN" - DRUPAL 8 THEME FROM SKILLD
FRONT-END COMPONENTS IN DRUPAL THEME. "KAIZEN" - DRUPAL 8 THEME FROM SKILLDFRONT-END COMPONENTS IN DRUPAL THEME. "KAIZEN" - DRUPAL 8 THEME FROM SKILLD
FRONT-END COMPONENTS IN DRUPAL THEME. "KAIZEN" - DRUPAL 8 THEME FROM SKILLDDrupalCamp Kyiv
 
DRUPAL AND ELASTICSEARCH
DRUPAL AND ELASTICSEARCHDRUPAL AND ELASTICSEARCH
DRUPAL AND ELASTICSEARCHDrupalCamp Kyiv
 
WHAT WE LEARNED FROM OPEN SOCIAL IN 3 YEARS, MOVING FROM AN AGENCY TO A PRODU...
WHAT WE LEARNED FROM OPEN SOCIAL IN 3 YEARS, MOVING FROM AN AGENCY TO A PRODU...WHAT WE LEARNED FROM OPEN SOCIAL IN 3 YEARS, MOVING FROM AN AGENCY TO A PRODU...
WHAT WE LEARNED FROM OPEN SOCIAL IN 3 YEARS, MOVING FROM AN AGENCY TO A PRODU...DrupalCamp Kyiv
 
DRUPAL 8 STORAGES OVERVIEW
DRUPAL 8 STORAGES OVERVIEWDRUPAL 8 STORAGES OVERVIEW
DRUPAL 8 STORAGES OVERVIEWDrupalCamp Kyiv
 
ONE MORE TIME ABOUT CODE STANDARDS AND BEST PRACTICES
ONE MORE TIME ABOUT CODE STANDARDS AND BEST PRACTICESONE MORE TIME ABOUT CODE STANDARDS AND BEST PRACTICES
ONE MORE TIME ABOUT CODE STANDARDS AND BEST PRACTICESDrupalCamp Kyiv
 
1-1 MEETING: STEP-BY-STEP-HOW-TO
1-1 MEETING: STEP-BY-STEP-HOW-TO1-1 MEETING: STEP-BY-STEP-HOW-TO
1-1 MEETING: STEP-BY-STEP-HOW-TODrupalCamp Kyiv
 
UX DURING MODULE INSTALLATION AND CONFIGURATION
UX DURING MODULE INSTALLATION AND CONFIGURATIONUX DURING MODULE INSTALLATION AND CONFIGURATION
UX DURING MODULE INSTALLATION AND CONFIGURATIONDrupalCamp Kyiv
 
SWITCHING FROM QA ENGINEER TO PROJECT MANAGER - LEVEL UP OR DOWN?
SWITCHING FROM QA ENGINEER TO PROJECT MANAGER - LEVEL UP OR DOWN?SWITCHING FROM QA ENGINEER TO PROJECT MANAGER - LEVEL UP OR DOWN?
SWITCHING FROM QA ENGINEER TO PROJECT MANAGER - LEVEL UP OR DOWN?DrupalCamp Kyiv
 
TECHNOLOGIES-POWERED WEB AND THE POST-BROWSER ERA
TECHNOLOGIES-POWERED WEB AND THE POST-BROWSER ERATECHNOLOGIES-POWERED WEB AND THE POST-BROWSER ERA
TECHNOLOGIES-POWERED WEB AND THE POST-BROWSER ERADrupalCamp Kyiv
 
PROTECTED CONTENT: END-TO-END PGP ENCRYPTION FOR DRUPAL
PROTECTED CONTENT: END-TO-END PGP ENCRYPTION FOR DRUPALPROTECTED CONTENT: END-TO-END PGP ENCRYPTION FOR DRUPAL
PROTECTED CONTENT: END-TO-END PGP ENCRYPTION FOR DRUPALDrupalCamp Kyiv
 
DRUPAL AUDITS MADE FASTR
DRUPAL AUDITS MADE FASTRDRUPAL AUDITS MADE FASTR
DRUPAL AUDITS MADE FASTRDrupalCamp Kyiv
 
FROM DISTRO TO CUSTOM - HOW WE CREATE GREAT COMMUNITIES FOR EVERY ORGANIZATIO...
FROM DISTRO TO CUSTOM - HOW WE CREATE GREAT COMMUNITIES FOR EVERY ORGANIZATIO...FROM DISTRO TO CUSTOM - HOW WE CREATE GREAT COMMUNITIES FOR EVERY ORGANIZATIO...
FROM DISTRO TO CUSTOM - HOW WE CREATE GREAT COMMUNITIES FOR EVERY ORGANIZATIO...DrupalCamp Kyiv
 
SEARCH API: TIPS AND TRICKS - FROM BEGINNING TO CUSTOM SOLUTIONS
SEARCH API: TIPS AND TRICKS - FROM BEGINNING TO CUSTOM SOLUTIONSSEARCH API: TIPS AND TRICKS - FROM BEGINNING TO CUSTOM SOLUTIONS
SEARCH API: TIPS AND TRICKS - FROM BEGINNING TO CUSTOM SOLUTIONSDrupalCamp Kyiv
 

More from DrupalCamp Kyiv (20)

Speed up the site building with Drupal's Bootstrap Layout Builder
Speed up the site building with Drupal's Bootstrap Layout BuilderSpeed up the site building with Drupal's Bootstrap Layout Builder
Speed up the site building with Drupal's Bootstrap Layout Builder
 
Performance Monitoring with Google Lighthouse
Performance Monitoring with Google LighthousePerformance Monitoring with Google Lighthouse
Performance Monitoring with Google Lighthouse
 
Oleg Bogut - Decoupled Drupal: how to build stable solution with JSON:API, Re...
Oleg Bogut - Decoupled Drupal: how to build stable solution with JSON:API, Re...Oleg Bogut - Decoupled Drupal: how to build stable solution with JSON:API, Re...
Oleg Bogut - Decoupled Drupal: how to build stable solution with JSON:API, Re...
 
Acquia BLT for the Win, or How to speed up the project setup, development an...
Acquia BLT for the Win, or  How to speed up the project setup, development an...Acquia BLT for the Win, or  How to speed up the project setup, development an...
Acquia BLT for the Win, or How to speed up the project setup, development an...
 
Upgrading to Drupal 9
Upgrading to Drupal 9Upgrading to Drupal 9
Upgrading to Drupal 9
 
THE INTERNET OF THINGS IS GETTING REAL
THE INTERNET OF THINGS IS GETTING REALTHE INTERNET OF THINGS IS GETTING REAL
THE INTERNET OF THINGS IS GETTING REAL
 
FRONT-END COMPONENTS IN DRUPAL THEME. "KAIZEN" - DRUPAL 8 THEME FROM SKILLD
FRONT-END COMPONENTS IN DRUPAL THEME. "KAIZEN" - DRUPAL 8 THEME FROM SKILLDFRONT-END COMPONENTS IN DRUPAL THEME. "KAIZEN" - DRUPAL 8 THEME FROM SKILLD
FRONT-END COMPONENTS IN DRUPAL THEME. "KAIZEN" - DRUPAL 8 THEME FROM SKILLD
 
DRUPAL AND ELASTICSEARCH
DRUPAL AND ELASTICSEARCHDRUPAL AND ELASTICSEARCH
DRUPAL AND ELASTICSEARCH
 
WHAT WE LEARNED FROM OPEN SOCIAL IN 3 YEARS, MOVING FROM AN AGENCY TO A PRODU...
WHAT WE LEARNED FROM OPEN SOCIAL IN 3 YEARS, MOVING FROM AN AGENCY TO A PRODU...WHAT WE LEARNED FROM OPEN SOCIAL IN 3 YEARS, MOVING FROM AN AGENCY TO A PRODU...
WHAT WE LEARNED FROM OPEN SOCIAL IN 3 YEARS, MOVING FROM AN AGENCY TO A PRODU...
 
Blackfire Workshop
Blackfire WorkshopBlackfire Workshop
Blackfire Workshop
 
DRUPAL 8 STORAGES OVERVIEW
DRUPAL 8 STORAGES OVERVIEWDRUPAL 8 STORAGES OVERVIEW
DRUPAL 8 STORAGES OVERVIEW
 
ONE MORE TIME ABOUT CODE STANDARDS AND BEST PRACTICES
ONE MORE TIME ABOUT CODE STANDARDS AND BEST PRACTICESONE MORE TIME ABOUT CODE STANDARDS AND BEST PRACTICES
ONE MORE TIME ABOUT CODE STANDARDS AND BEST PRACTICES
 
1-1 MEETING: STEP-BY-STEP-HOW-TO
1-1 MEETING: STEP-BY-STEP-HOW-TO1-1 MEETING: STEP-BY-STEP-HOW-TO
1-1 MEETING: STEP-BY-STEP-HOW-TO
 
UX DURING MODULE INSTALLATION AND CONFIGURATION
UX DURING MODULE INSTALLATION AND CONFIGURATIONUX DURING MODULE INSTALLATION AND CONFIGURATION
UX DURING MODULE INSTALLATION AND CONFIGURATION
 
SWITCHING FROM QA ENGINEER TO PROJECT MANAGER - LEVEL UP OR DOWN?
SWITCHING FROM QA ENGINEER TO PROJECT MANAGER - LEVEL UP OR DOWN?SWITCHING FROM QA ENGINEER TO PROJECT MANAGER - LEVEL UP OR DOWN?
SWITCHING FROM QA ENGINEER TO PROJECT MANAGER - LEVEL UP OR DOWN?
 
TECHNOLOGIES-POWERED WEB AND THE POST-BROWSER ERA
TECHNOLOGIES-POWERED WEB AND THE POST-BROWSER ERATECHNOLOGIES-POWERED WEB AND THE POST-BROWSER ERA
TECHNOLOGIES-POWERED WEB AND THE POST-BROWSER ERA
 
PROTECTED CONTENT: END-TO-END PGP ENCRYPTION FOR DRUPAL
PROTECTED CONTENT: END-TO-END PGP ENCRYPTION FOR DRUPALPROTECTED CONTENT: END-TO-END PGP ENCRYPTION FOR DRUPAL
PROTECTED CONTENT: END-TO-END PGP ENCRYPTION FOR DRUPAL
 
DRUPAL AUDITS MADE FASTR
DRUPAL AUDITS MADE FASTRDRUPAL AUDITS MADE FASTR
DRUPAL AUDITS MADE FASTR
 
FROM DISTRO TO CUSTOM - HOW WE CREATE GREAT COMMUNITIES FOR EVERY ORGANIZATIO...
FROM DISTRO TO CUSTOM - HOW WE CREATE GREAT COMMUNITIES FOR EVERY ORGANIZATIO...FROM DISTRO TO CUSTOM - HOW WE CREATE GREAT COMMUNITIES FOR EVERY ORGANIZATIO...
FROM DISTRO TO CUSTOM - HOW WE CREATE GREAT COMMUNITIES FOR EVERY ORGANIZATIO...
 
SEARCH API: TIPS AND TRICKS - FROM BEGINNING TO CUSTOM SOLUTIONS
SEARCH API: TIPS AND TRICKS - FROM BEGINNING TO CUSTOM SOLUTIONSSEARCH API: TIPS AND TRICKS - FROM BEGINNING TO CUSTOM SOLUTIONS
SEARCH API: TIPS AND TRICKS - FROM BEGINNING TO CUSTOM SOLUTIONS
 

Layouts vs Templates - Sergey Borodylin