Мы уже рассмотрели, что в 8ом друпале у нас встроен Twig и как им пользоваться. В этой статье мы разберем как работать с шаблонами друпала, какие есть шаблоны в теме Stable, как переопределять шаблоны Stable и как переопределять шаблоны различных сущностей друпала.
Итак, давайте начнем с шаблонов темы Stable, перейдем в папку templates темы Stable:
скриншот
Шаблоны разбиты по функциональному признаку:
/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 шаблон ( шаблон)
HTML шаблон включает в себя основную структуру HTML-страницы теги , , .
Основной шаблон: 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.
Комментарии
Варианты переопределения: comment--node-[type].html.twig
Основной шаблон: comment.html.twig (базовое расположение: core/modules/comment/templates/comment.html.twig)
Вы можете задавать отдельный шаблон для комментариев к каждому типу материала. Например, comment--node-article.html.twig.
Смотрите больше информации в документации comment.html.twig.
Также можно задать отдельный шаблон для обертки комментария.
Варианты переопределения: comment-wrapper--node-[type].html.twig
Основной шаблон: comment-wrapper.html.twig (базовое расположение: core/modules/comment/templates/comment-wrapper.html.twig)
Views
Все шаблоны Views'а могут быть переопределены с помощью машинного имени вью, id дисплея, типа дисплея (page, block или другого) или комбинации машинного имени вью, id дисплея и типа дисплея.
Для каждого View используется по крайней мере два шаблона. Первый шаблон это views-view.html.twig:
Второй шаблон определяется стилем отображения вью (например неформатированный список, таблица, grid, HTML список). По умолчанию используется шаблон неформатированного фильтра (через теги
Если мы выводим через 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--[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.
Атрибуция
Абраменко Иван
Комментарии
Можно ли задать шаблон страницы, если путь плавающий. Например для вьюса отображения тизера товара путь catalog/%/teaser
Можно использовать этот модуль и сделать несколько страниц для одной ноды:
View Mode Page
https://www.drupal.org/project/view_mode_page