8.6. Работа с шаблонами в Drupal 8. Какие есть шаблоны в ядре Drupal 8.

18/11/2019, by Ivan

Мы уже рассмотрели, что в 8ом друпале у нас встроен Twig и как им пользоваться. В этой статье мы разберем как работать с шаблонами друпала, какие есть шаблоны в теме Stable, как переопределять шаблоны Stable и как переопределять шаблоны различных сущностей друпала.

Итак, давайте начнем с шаблонов темы Stable, перейдем в папку templates темы Stable:

templates in Drupal 8

Шаблоны разбиты по функциональному признаку:

/core/themes/stable/templates/admin - шаблоны для Views UI, страниц и элементов администрирования, шаблоны сообщений и отчетов.
/core/themes/stable/templates/block - шаблоны блоков.
/core/themes/stable/templates/content - шаблоны ноды, комментария, термина таксономии, rss элемента, результатов поиска.
/core/themes/stable/templates/content-edit - шаблоны фильтров и форм редактирования.
/core/themes/stable/templates/dataset - шаблоны форума, rss канала, таблицы, ul списка.
/core/themes/stable/templates/field - шаблоны полей разных типов.
/core/themes/stable/templates/form - шаблоны элементов форм (полей различных типов).
/core/themes/stable/templates/layout - шаблоны структуры страницы page.html.twig, регионов, основной шаблон html.html.twig - куда встраиваются все другие шаблоны.
/core/themes/stable/templates/misc - шаблоны иконки RSS, RDF разметки, сообщений друпал, прогресс бара.
/core/themes/stable/templates/navigation - шаблоны меню, книг (модуля book), pager'а, toolbar'а, вертикальных табов, хлебных крошек.
/core/themes/stable/templates/user - шаблоны страницы пользователя, имени пользователя, подписи кем был опубликован пост на форуме.
/core/themes/stable/templates/views - шаблоны различных элементов модуля Views.

Как вы видите тема Stable предоставляет широкий набор для темизации шаблонов. Для того чтобы переопределить эти шаблоны, нужно просто скопировать необходимый шаблон себе в подтему и поменять его там как вам угодно. Вы можете скопировать все шаблоны, но я вам советую копировать шаблоны в подтему по мере необходимости.

Переопределение шаблонов для контента (template suggestions)

Вы можете переопределять не только существующие шаблоны, но добавлять свои шаблоны для отдельных нод, терминов таксономии, блоков и т.д. Вот некоторые примеры переопределия шаблонов.

HTML шаблон (<head> шаблон)

HTML шаблон включает в себя основную структуру HTML-страницы теги <head>, <title>, <body>.

Основной шаблон: html.html.twig (базовое расположение: core/modules/system/templates/html.html.twig)

Следующие примеры показывают как можно переопределить этот шаблон:

html--internalviewpath.html.twig
html--node--id.html.twig
html.html.twig

internalviewpath - это внутренний путь внутри друпала node/15, taxonomy/term/46, user/2 и так далее.

Смотрите больше информации в документации html.html.twig

Шаблон страницы

Варианты переопределения: page--[front|internal/path].html.twig

Основной шаблон: page.html.twig (базовое расположение: core/modules/system/templates/page.html.twig)

Возможные шаблоны для страницы очень разнообразные. Шаблон главной страницы идет первым по старшинству. Все остальные шаблоны зависят от внутреннего пути. Главную страницу можно выставить на странице Конфигурация - Информация о сайте - Главная страница:
/admin/config/system/site-information

Не путайте внутренний путь с алиасами, например у ноды новости может быть путь /news/node-title, но на самом деле у ноды внутренний путь /node/node-id.

Для страницы редактирования ноды http://www.example.com/node/1/edit можно использовать следующие шаблоны для переопределия:

page--node--edit.html.twig
page--node--1.html.twig
page--node.html.twig
page.html.twig

Смотрите больше информации в документации page.html.twig

Регионы

Варианты переопределения: region--[region].html.twig

: region.html.twig (базовое расположение: core/modules/system/templates/region.html.twig)

Шаблон региона используется когда в регионе есть контент, создаваемый системой блоков или через функцию hook_page_build(). Возможно задавать название регионов в файле темы .info.yml.

Смотрите больше информации в документации region.html.twig.

Блоки

Варианты переопределения: block--[module|--delta]].html.twig

Основной шаблон: block.html.twig (базовое расположение: core/modules/block/templates/block.html.twig)

1. block--module--delta.html.twig
2. block--module.html.twig
3. block.html.twig

'module' это имя модуля который выводить данный блок, delta внутренний id блока в модуле.

Например block--block--1.html.twig это первый блок добавленный пользователем через админку модуля block. Если у вас кастомный модуль custom, вы создаете блок с delta "my-block", тогда шаблон для этого блока будет block--custom--my-block.html.twig.

Для модуля Views шаблон блока переопределяется следующим образом: берем имя view "front_news" и id дисплея view "block_1", тогда имя шаблона для переопределения блока будет: block--views-block--front-news-block-1.html.twig

Заметьте, что нижние подчеркивания изменяются на один дефис.

В Drupal 8 нельзя задать отдельный шаблон для блока в отдельно взятом регионе, по крайней мере из коробки.

Также обратите внимания на то, что имена шаблонов чувствительны к регистру. Если ваш модуль называется MyModule, то имя шаблона для блока будет block--MyModule.html.twig.

Смотрите больше информации в документации block.html.twig.

Материалы (Ноды)

Варианты переопределения: node--[type|nodeid]--[viewmode].html.twig

Основной шаблон: node.html.twig (базовое расположение: core/modules/node/templates/node.html.twig)

Вы можете переопределить шаблон ноды следующим образом:

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

Viewmode это дисплей отображения ноды: Full, Teaser, RSS, Token и прочие дисплеи. Type - это контент тип вашей ноды Новости, Статьи, Страницы. Nodeid - это nid, id вашей ноды.

Смотрите больше информации в документации node.html.twig

Термины таксономии

Варианты переопределения: taxonomy-term--[vocabulary-machine-name|tid].html.twig

Основной шаблон: taxonomy-term.html.twig (базовое расположение: core/modules/taxonomy/templates/node.html.twig)

Вы можете переопределить шаблон термина таксономии следующим образом:

1. taxonomy-term--tid.html.twig
2. taxonomy-term--vocabulary-machine-name.html.twig
3. taxonomy-term.html.twig

Все нижние подчеркивая в названиях словарей должны быть заменены на дефисы.

Смотрите больше информации в документации taxonomy-term.html.twig

Поля

Варианты переопределения: field--[type|name[--content-type]|content-type].html.twig

Основной шаблон: field.html.twig (базовое расположение: core/modules/system/templates/field.html.twig)

Вы можете переопределить шаблоны следующим образом:

1. field--field-name--content-type.html.twig
2. field--content-type.html.twig
3. field--field-name.html.twig
4. field--field-type.html.twig
5. field.html.twig

Все нижние подчеркивания в названиях типом материла и имён полей заменяются на дефисы.

Смотрите больше информации в документации field.html.twig.

Views

Все шаблоны Views'а могут быть переопределены с помощью машинного имени вью, id дисплея, типа дисплея (page, block или другого) или комбинации машинного имени вью, id дисплея и типа дисплея.

Для каждого View используется по крайней мере два шаблона. Первый шаблон это views-view.html.twig:

Второй шаблон определяется стилем отображения вью (например неформатированный список, таблица, grid, HTML список). По умолчанию используется шаблон неформатированного фильтра (через теги <div>) views-view-unformatted.html.twig.

Если мы выводим через Views не готовые сущности (например полную ноду или ее тизер), а выводим поля, тогда Views использует еще шаблон поля, который мы тоже можем переопределить шаблон для полей views-view-fields.html.twig.

Ниже возможные имена шаблонов для переопределения.

Имя вьюса - foobar (машинное имя)
Формат отображения - unformatted (неформатированный список, добавить возможные варианты)
Стиль отображения записи - fields
Имя дисплея - page

views-view--foobar--page.html.twig
views-view--page.html.twig
views-view--foobar.html.twig
views-view.html.twig

views-view-unformatted--foobar--page.html.twig
views-view-unformatted--page.html.twig
views-view-unformatted--foobar.html.twig
views-view-unformatted.html.twig

views-view-fields--foobar--page.html.twig
views-view-fields--page.html.twig
views-view-fields--foobar.html.twig
views-view-fields.html.twig

Форум

Варианты переопределения: forums--[[container|topic]--forumID].html.twig

Основной шаблон: forums.html.twig (базовое расположение: core/modules/forum/templates/forums.html.twig)

Вы можете задать отдельно шаблоны для контейнеров и тем форума:

forums--containers--forumID.html.twig
forums--forumID.html.twig
forums--containers.html.twig
forums.html.twig

и для тем форума:

forums--topics--forumID.html.twig
forums--forumID.html.twig
forums--topics.html.twig
forums.html.twig

Смотрите больше информации в документации forums.html.twig.

Режим обслуживания

Варианты переопределения: maintenance-page--[offline].html.twig

Основной шаблон: maintenance-page.html.twig (базовое расположение: core/modules/system/templates/maintenance-page.html.twig)

Смотрите больше информации в документации maintenance-page.html.twig.

Результаты поиска

Search result

Варианты переопределения: search-result--[searchType].html.twig

Основной шаблон: search-result.html.twig (базовое расположение: core/modules/search/templates/search-result.html.twig)

Например если вы используете поиск по нодам:

/search/node/Search+Term

то вы можете использовать шаблон "search-result--node.html.twig".

Для поиска по пользователям:
search/user/bob

Используйте шаблон search-result--user.html.twig.

Extra Block Types (EBT) - New Layout Builder experience❗

❗Extra Paragraph Types (EPT) - New Paragraphs experience