Мы уже рассмотрели, что в 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 шаблон (<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.
Комментарии
Варианты переопределения: 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 список). По умолчанию используется шаблон неформатированного фильтра (через теги <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.
Комментарии
Добавить комментарий
Когда-нибудь слова "СКРИНШОТ"
Когда-нибудь слова "СКРИНШОТ" заменят нормальными скриншотами?
Пока времени не хватает
Пока времени не хватает писать новые статьи и проверять старые, как только допишу очередную главу, так буду проверять предыдущие уроки и вставлять скриншоты.
Подскажите пожалуйста, как
Подскажите пожалуйста, как сделать шаблон поля для views из коллекции полей.
field-collection-item.html.twig - так работает при просмотре ноды, но соответственно для любых коллекций полей.
Само поле имеет имя field_lovework
Если сделать field-collection-item--field_lovework.html.twig - то так работает. Но как для views сделать шаблон я не могу понять.
views-view-fields--field
views-view-fields--field-lovework.html.twig - попробуйте так
Не сработало. Кеш сбрасывал,
Не сработало. Кеш сбрасывал, да.
Нет, не проходит такое имя.
Нет, не проходит такое имя.
https://api.drupal.org/api
https://api.drupal.org/api/drupal/core%21modules%21views%21views.theme.i...
Хм.. видимо нет действительно шаблона через который переопределить конкретное поле. Вы можете изменить вывод поля непосредственно в поле views'а, в настройке "Переписать вывод поля".
Использовал в восьмерке
Использовал в восьмерке вместо вебформ модуль yaml forms. Каким образом можно темизировать страницу с этой формой? Например, нужно, чтобы был текст, под ним сама форма, а справа картинка со схемой проезда
Для темизации формы
Для темизации формы используйте hook_form_alter()