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


Верстка шаблонов | Get Drupal 8

По сути мы уже создали тему на предыдущем занятии. Мы научились добавлять регионы, подключать CSS стили и перезаписывать шаблоны. Для создания собственной темы вам фактически больше ничего не нужно. Эти три инструмента помогут вам стартануть в темизации. Курс можно завершать.

Но я считаю это не правильным.

Drupal - это CMF, а не рядовая CMS. С его помощью можно творить великие дела :)

Начиная этот курс я понимал, что беру ответственность за те знания, которыми делюсь и за результаты к которым веду. И я не могу остановить вас на полпути и сказать, что сказать больше нечего. Потому что сказать и показать мне действительно есть что.

Хочется, чтобы вы пройдя этот курс, были действительно готовы создать тему для себя и иметь в своем распоряжении все нужные для этого инструменты.

Настало время детального знакомства с перезаписью templates twig нашей темы. Принцип перезаписи мы рассмотрели ранее, здесь же научимся перезаписывать блоки, представления, ноды и меню.

Во время верстки темы мы создаем типовые виды контента сайта. Делаем блоки, располагаем меню, выводим содержимое в представления.

И если при всем при этом работать ограничивая себя особенностями bootstrap, на основе которого мы делаем тему, то выходит очень "сухой" дизайн. На прошлом занятии мы рассмотрели подключение CSS стилей, на этом же подробно разберем, как осуществлять перезапись шаблонов содержимого.

Шаблоны по умолчанию обычно располагается в папке templates модуля:

Пример расположения *.html.twig шаблонов для модуля Display Suit.

или core ядра drupal:

Пример расположения *.html.twig шаблоны в ядре drupal.

Для перезаписи шаблонов используются файлы макетов из папки templates. Чуть ранее мы перенесли ее содержимое на хостинг из архива bootstrap.

Если вам не будет хватать каких-то шаблонов, можете смело доставать оригиналы из ядра или модуля и помещать в папку templates темы. Таким образом ваша тема все необходимое будет содержать в самой себе.

Впрочем, это не всегда работает, т.к. тот же Display Suit, например, собственные шаблоны регистрирует в своем *.yml файле. Так что будьте внимательны!

 

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

node - шаблоны нод;

block - шаблоны блоков;

field - шаблоны полей;

view - представлений

...и т.д.

По сути же не важно, в какой папке находится шаблон - drupal все равно будет его видеть. Организация по папкам - это часть не функциональности, но элемент структуры, порядка и удобства. Поэтому, если хотите, вы можете создавать собственные папки и помещать туда шаблоны в такой структуре, какой вам заблагорассудится.

 

Как перезаписать шаблон содержимого?

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

Напомню, что для того чтобы перезаписать шаблон, нужно при помощи debug мода или правил переименования подобрать релевантное имя для замещающего шаблона и скопировав оригинальный шаблон задать ему это имя.

 

Дополнительные материалы:

Как вывести поле в twig?

Bootstrap 3 и Drupal 8

 

getdrupal8.ru

бизнес тема для Drupal 8 доступна для скачивания

Sanbro - Responsive Business Drupal 8 Theme

Sanbro — это современная и профессиональная бизнес-тема для Drupal с адаптивным дизайном.

Отличный шаблон для реализации любого бизнес или корпоративного веб-сайта, легко настраивается и прост в использовании.

Особенности темы Sanbro

Смотрите также другие шаблоны для Drupal 7 и 8 >>займ онлайнзайм на карту

Информация

DEMO Посмотрите установленную тему в демо-режиме, для того чтобы оценить все возможности, а так же найти документацию и разные варианты оформления темы.

Скачать

Версия, доступная для бесплатного скачивания:

Sanbrov1.1

57 MB [ исходники, документация, PSD, плагины, скрипты, демо (.xml) ]

Файлы для скачивания доступны только зарегистрированным пользователям со статусом "подписчик". Важная информация.

Регистрация /

Вирусов нет - архив проверен антивирусом Dr.Web

Купить

Приобретая тему или плагин у официального разработчика вы обеспечиваете себе гарантию работоспособности продукта и ряд преимуществ:

Купить

Смотрите также

Комментарии

freeams.ru

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

Мы уже рассмотрели, что в 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)

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

  1. html--internalviewpath.html.twig
  2. html--node--id.html.twig
  3. 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.twigpage--node--1.html.twigpage--node.html.twigpage.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.twig2. block--module.html.twig3. 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.twig2. node--nodeid.html.twig3. node--type--viewmode.html.twig4. node--type.html.twig5. node--viewmode.html.twig6. 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.twig2. taxonomy-term--vocabulary-machine-name.html.twig3. 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.twig2. field--content-type.html.twig3. field--field-name.html.twig4. field--field-type.html.twig5. 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.twigviews-view--page.html.twigviews-view--foobar.html.twigviews-view.html.twig

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

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

 Форум

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

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

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

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

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

forums--topics--forumID.html.twigforums--forumID.html.twigforums--topics.html.twigforums.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. 

 

drupalbook.ru

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

Мы уже рассмотрели, что в 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)

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

  1. html--internalviewpath.html.twig
  2. html--node--id.html.twig
  3. 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.twigpage--node--1.html.twigpage--node.html.twigpage.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.twig2. block--module.html.twig3. 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.twig2. node--nodeid.html.twig3. node--type--viewmode.html.twig4. node--type.html.twig5. node--viewmode.html.twig6. 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.twig2. taxonomy-term--vocabulary-machine-name.html.twig3. 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.twig2. field--content-type.html.twig3. field--field-name.html.twig4. field--field-type.html.twig5. 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.twigviews-view--page.html.twigviews-view--foobar.html.twigviews-view.html.twig

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

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

 Форум

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

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

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

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

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

forums--topics--forumID.html.twigforums--forumID.html.twigforums--topics.html.twigforums.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. 

 

drupalbook.ru

Как можно создать свою тему на Drupal 8

Свою тему нужно создавать по двум причинам. Редактирование тем ядра противоречит правилам доработки Друпал, а использование контрибных тем может стать причиной утраты дизайна, когда вы случайно обновите тему автоматически.Предлагается создавать свои темы простым переименованием любой контрибной. Выбирайте такую тему, в структуре которой вам будет удобно разобраться. Так в Бартик 53 файла стилей, а в некоторых контрибных темах слишком много файлов шаблонов, разбитых на подпапки. Некоторые темы имеют хорошие функции адаптивного дизайна, в других возможны баги. Обзор шаблонов для Друпал 8 представлен тут.

Как создать свою тему, копируя Bartik:

  1. Скопируйте папку /core/themes/bartik на компьютер.
  2. Замените слово bartik на название вашей темы, например, site_theme, во всех служебных файлах в корне темы, также в файлах в папках templates, color, а также в этом файле: config/schema/bartik.schema.ymlЯ выполняю замену программой Geany (Linux), для Windows есть программа Text Replace TR. Или это можно сделать в консоли линукс с помощью sed.
  3. Переименуйте все файлы, содержащие в имени bartik, и замените это слово именем вашей темы site_theme
  4. Измените название папки темы на site_theme - в именах тем используется нижнее подчёркивание на месте пробела как в именах файлов, так и в названиях php-функций. Если вы хотите избежать путаницы, используйте одно слово, например, sitetheme.
  5. Закачайте новую тему на сайт в папку themes.
  6. Активируйте тему в меню "Оформление"

Если всё получилось, вы сможете редактировать файлы шаблонов, стилей, изменить скриншот внутри темы для удобства.

Две команды: массовое переименование файлов с рекурсией в Linux и массовая замена текста в файлах с рекурсией в Linux

Если вы пользуетесь Линукс, то вот конкретные рекомендации как переименовать контрибную тему (на примере Paxton):

1) Переименовать все файлы в папке и вложенных папках. Откройте в консоли (терминале) папку темы и выполните команду переименования paxton на moyatema (или ваше название):

find . -name '*paxton*' -print0 | xargs -0 -n1 bash -c 'mv "$0" "${0/paxton/moyatema}"'

2) Заменить имя темы в текстах файлов. В консоли пропишите следующую команду поиска и замены текста в файлах:

grep 'paxton' -P -R -I -l * | xargs sed -i 's/paxton/moyatema/g'

3) Вручную измените имя папки и имя темы, описание в файле moyatema.info.yml.

 

Эта процедура выполнена автором поста для двух тем:

www.tlito.ru

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

Мы уже рассмотрели, что в 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)

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

  1. html--internalviewpath.html.twig
  2. html--node--id.html.twig
  3. 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.twigpage--node--1.html.twigpage--node.html.twigpage.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.twig2. block--module.html.twig3. 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.twig2. node--nodeid.html.twig3. node--type--viewmode.html.twig4. node--type.html.twig5. node--viewmode.html.twig6. 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.twig2. taxonomy-term--vocabulary-machine-name.html.twig3. 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.twig2. field--content-type.html.twig3. field--field-name.html.twig4. field--field-type.html.twig5. 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.twigviews-view--page.html.twigviews-view--foobar.html.twigviews-view.html.twig

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

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

 Форум

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

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

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

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

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

forums--topics--forumID.html.twigforums--forumID.html.twigforums--topics.html.twigforums.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. 

 

drupalbook.ru

1.4. Установка темы оформления на Drupal 8. Темы конструкторы.

На drupal очень много готовых шаблонов, наверно уже больше чем на joomla. Давайте поставим какое-нибудь оформление на наш сайт. Для этого в друпале уже есть папка themes, куда мы будем устанавливать темы оформления для нашего сайта.

themes drupal

Для того, чтобы скачать тему для друпала, нам нужно зайти на drupal.org в раздел Download и там выбрать ссылку на выбор тем:

download themes

 

Давайте возьмем New Themes (новые темы оформления). Теперь отсортируем темы по drupal 8.x, для этого выберем версию нашего друпала (Core compatibility):

drupal 8.x

Например мне понравилась тема Themage, вы можете скачать любую другую тему, только проверьте, что номер версии ядра совпадает с Вашим:

drupal themage

Скачиваем тему и скидываем ее в папку themes:

Теперь мы можем включить нашу тему оформления, заходим Manage > Оформление > Enable and set as default:

manage theme

 Теперь у нас есть новая тема на сайте:

theme themage

 Темы Конструкторы

 Темы на друпале не всегда статичные, иногда можно менять цвета, шрифты, загружать фоновые изображения. Таких тем много, обычно в описание к теме указывается, что может тема оформления.

Omega

https://www.drupal.org/project/omega

drupal omega

Тема омега скорее полуготовая тема, которую можно поднастроить. В помощь к теме прилагается модуль omega tools для ее настройке:https://drupal.org/project/omega_tools

Fusion

https://www.drupal.org/project/fusion

drupal fusion

Fusion вместе с модулем Fusion accelerator позволит настроить много из внешнего вида темы оформления:

http://drupal.org/project/fusion_accelerator

Zero point

https://www.drupal.org/project/zeropoint

drupal zeropoint

Неплохая тема с преднастроенными цветовыми схемами

Adaptive theme

https://www.drupal.org/project/adaptivetheme

adaptive theme

Также имеет различные настройки, но скорее подойдет для тех, кто знаком с css и хочет сделать свою тему.

Модуль Skinr

https://www.drupal.org/project/skinr

skinr

Позволяет настроит внешний вид блоков, форм, views, panels через админку, не зная css. Он может быть установлен на любой друпал к любой теме.

Все популярные темы на друпал вы можете найти по ссылке ниже:

https://www.drupal.org/project/project_theme?solrsort=iss_project_releas...

drupalbook.ru


Prostoy-Site | Все права защищены © 2018 | Карта сайта