Шаблоны drupal 8


Но для этого понадобится комплексное изучение, так как из всех подобных CMS систем, Drupal– самая сложная в освоении.Гибкость конфигурирования – это основное достоинство данной платформы. Благодаря ему веб-программисты могут создавать любые типы сайтов, не чувствуя ограничений. Конечно, если это не начинающие пользователи. Так как разобраться в сложном интерфейсе администрирования данной платформы не так просто. Поэтому новичкам не рекомендуется делать первый сайт, используя эту CMS. Множество дополнений и разработанных модулей позволяют расширить первоначальный функционал этой платформы. Также его преимуществом является встроенная система кэширования, которая позволяет снизить нагрузку на сервер, и современная поисковая система. 7 и 8 версии Drupal – самые последние на сегодняшний момент. Набор графических элементов, из которых строится внешний вид интернет-страниц, называется шаблоном. В данной платформе дизайн отделен от содержимого сайта. У разработчика нет ограничений в создании темы оформления, так как эта платформа не привязана к какому-либо механизму реализации шаблонов.


м не менее, Drupal предлагает ряд движков тем, которые можно использовать на свое усмотрение. К ним относятся темы с шаблонами PHP и темы c шаблонами HTML. Также добиться изменения внешнего вида продвинутые программисты могут, работая над стилями. И благодаря этому увеличить функционал шаблона, что не менее важно для работы веб-страниц. Сейчас существует множество сайтов, на которых можно скачать шаблоны Drupal. Но стоит помнить о том, что любую тему после скачивания необходимо будет править, чтобы добиться нужного результата. Выбирая внешний вид сайта, следует обращать внимание на валидность кода и юзабилити шаблона. А не руководствоваться лишь дизайном. Не стоит забывать также о наличии недобросовестных разработчиков, предлагающих бесплатно скачивать шаблоны. Для коммерческих целей существуют шаблоны магазина Drupal. А также разработаны целые системы электронной коммерции, которые выделяются своими особенностями. Многие Drupal 8 шаблоны и шаблоны Drupal 7 включают в себя все необходимое для ведение интернет-магазина. Это и удобные платежные системы, и функциональный интерфейс, и множество возможностей для настройки магазина под собственные нужды. При покупке шаблона у профессиональных разработчиков, стоит помнить о том, что главная задача – это ускорить процесс создания сайта, а также сделать его как можно дешевле. При выборе темы оформления своего сайта нужно руководствоваться не только красивым внешним видом(как было выше сказано), но и возможностью адаптации шаблона.

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

pixelbrush.ru

Предлагаю к ознакомлению базовый примитив для создания собственной темы в Drupal 8.
Иметь свою тему хорошо и полезно.

Итак, приступим

Создание своей стартовой темы у вас не займёт много времени, основное время у вас уйдёт на написание стилей css.

Структура темы

Пусть наша тема будет иметь название light, тем более она будет точно соответствовать этому имени, так как в сущности будет иметь каркас темы, а дальнейшие расширения вы сможете применить в случае необходимости позже. Для старта нам её вполне хватит.

Создаем папку light

На картинке наглядно видно дерево темы


light theme

В папке light находятся файлы light.info.yml, light.libraries.yml,

light.theme,  html.html.twig, favicon.ico, logo.svg 

и директории css, js, images, templates.

В директории css находятся файлы стилей.
В директории js — файлы для javascript или вызовов функий библиотеки JQuery.
В директории images фоновые картинки.
В директории templates— шаблоны отображения нод и страниц.

Где брать шаблоны? Как и в Drupal 7 в восьмёрке шаблоны страниц лежат в папке system/templates Найти её можно по пути

/core/modules/system/templates
Скопируем в свою тему оттуда шаблоны page.html.twig и шаблон html.html.twig
Для темизации шаблона ноды возьмём шаблон node.html.twig в папке модуля node по пути

/core/modules/node/templates


Скопируйте эти шаблоны: html.html.twig в папку light, а шаблоны page.html.twig и node.html.twig в папку light/templates В дальнейшем, если вам нужно будет переопределить каки-нибудь шаблоны, то ищите их в папке модулей

по пути /core/modules
и копируйте себе в тему.

В папке css создайте файл стилей syle.css для оформления стилей темы.
В папке js создайте файл script.js для js кода в вашей темы.

Итак.
Мы создали директории темы, файлы yml и скопировали шаблоны.

Заполним файлы yml.

Файл light.info.yml

В файле идет описание темы, удаление файлов css стилей ядра,чтобы они не мешали вашей вёрстке, подключение библиотек, в которых прописаны пути для стилей и js- кода и описание регионов темы.

Если вам нужно добавить свой регион в тему, то в файле info темы в секции регионов вы прописываете свой регион

И в файле page.html.twig прописываете свой регион в любом месте разметки, где вам необходимо

Шаблонизатор произведёт проверку на наличие контента в регионе 

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

Обратите внимание вот на что. Это важно!

Если вы используете


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

Если вам нужно вывести в блоке что- то другое, не имеющее семантического смысла,  то для обёртки испольуйте <div> и в таком случае код вывода региона будет выглядеть так:

Если вы выводите регион в секции

, от обратите внимание на атрибут role

Ниже описания этого атрибута:

banner — Содержит главный или внутренний заголовок страницы. Брендирование. Рекомендуется использовать не больше одного раза на странице.
complementary — Информационный блок. Отделен от основного содержания.
contentinfo -Информация о содержании страницы. Используйте не более одного раза
definition — Определение термина или понятия.
main — Основное содержание страницы. использовать не более одного раза.
navigation — Навигационный блок. Использовать не более одного раза.
note — Заметка или краткая анотация к основному содержимому.
search — Область поиска на сайте.


Файл light.libraries.yml

Файл light.theme

В нём пишут некоторые переопределения, ради которых не охота пистать модули. Он выполняет ту же роль как файл template.php в семёрке На этом собственно и всё. logo.svg и favicon.ico вы сможете сделать сами))

Профит

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

Папку с темой нужно положить в директорию themes по пути   

drupal.ru

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

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

скриншот

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

/core/themes.


hemes/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.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. 

 

drupalbook.ru

Организация Шаблонов

Шаблоны — это файлы содержащие разметку и специальные директивы, которые будут заменены в процессе рендера на значения для отображаемого элемента. В Drupal 8 используется обработчик шаблонов Twig. Twig — это современный, мощный и гибкий инструмент, и его появление в Drupal 8 существенно упрощает работу с шаблонами и открывает новые возможности.

Файлы шаблонов должны иметь расширение *.html.twig и располагаться в папке templates или вложенных папках. Существуют определенные правила именования файлов шаблонов, и именно по ним Drupal определяет необходимость использования шаблона. То есть, чтобы переопределить какой-либо системный шаблон достаточно просто наличия файла с соответствующем названием в папке templates вашей темы. Аналогичным способом добавляются шаблоны специфичные для определенных элементов.

Системных шаблонов довольно много, их названия и содержимое можно посмотреть в теме Stable, здесь же я приведу некоторые основные:

  • html.html.twig — шаблон базовой разметки страницы;
  • page.html.twig — шаблон расположения регионов страницы;
  • node.html.twig — шаблон страницы контента;
  • block.html.twig — шаблон блока.

Примеры названий шаблонов специфичных для определенных элементов:

  • page--node.html.twig — шаблон расположения регионов страницы контента;
  • node--TYPE.html.twig — шаблон страницы контента типа TYPE;
  • node--VIEWMODE.html.twig — шаблон страницы контента в режиме отображения VIEWMODE;
  • node--TYPE--VIEWMODE.html.twig — шаблон страницы контента типа TYPE в режиме отображения VIEWMODE.

Чтобы узнать с помощью какого шаблона отрендерен тот или иной элемент, а также получить информацию о специфичных названиях шаблонов нужно в файле services.yml установить следующее значение:

parameters:  twig.config:  debug: true 

Файл services.yml должен располагаться в папке сайта, там же где файл settings.php, но по умолчанию он отсутствует. Его можно создать на основе файла default.services.yml. После сброса кеша, в комментариях к коду страницы будет выводиться информация о шаблонах.

Пример шаблона

Чаще всего изменения нужно будет вносить в шаблон расположения регионов страницы. Его мы и рассмотрим в качестве примера.

Шаблон page.html.twig темы Stable:

<div class="layout-container">   <header role="banner">  {{ page.header }}  </header>   {{ page.primary_menu }}  {{ page.secondary_menu }}  {{ page.breadcrumb }}  {{ page.highlighted }}  {{ page.help }}   <main role="main">  <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}   <div class="layout-content">  {{ page.content }}  </div>{# /.layout-content #}   {% if page.sidebar_first %}  <aside class="layout-sidebar-first" role="complementary">  {{ page.sidebar_first }}  </aside>  {% endif %}   {% if page.sidebar_second %}  <aside class="layout-sidebar-second" role="complementary">  {{ page.sidebar_second }}  </aside>  {% endif %}  </main>   {% if page.footer %}  <footer role="contentinfo">  {{ page.footer }}  </footer>  {% endif %}  </div>{# /.layout-container #} 

В файлах Twig может присутствовать HTML разметка и директивы следующих типов:

  • {{ variable }} — переменная;
  • {% function %} — функция;
  • {# comment #} — комментарий.

В примере нам часто встречаются директивы типа {{ page.header }} — это переменные, которые в данном случае будут заменены на отрендеренное содержимое региона. В регионы мы можем помещать блоки через административный интерфейс. Для некоторых регионов, например для footer, предусмотрена дополнительная обертка, и чтобы она не выводилась, когда регион не имеет содержимого, для всей конструкции добавлено условие {% if page.footer %}, проверяющее наличие содержимого.

При необходимости, можно создавать собственные регионы. Для этого сначала необходимо добавить информацию о них в файл THEMENAME.info.yml, после чего можно будет использовать их в шаблонах. В теме Stable используются только регионы «по умолчанию», поэтому информация о них отсутствует. Названия регионов «по умолчанию» и сопутствующую информацию можно посмотреть в документации. Добавление даже одного нового региона полностью переопределяет информацию о них, унаследованную от базовой темы. В этом случае, в файле конфигурации нужно будет перечислить все регионы, которые вы собираетесь использовать в своей теме, включая регионы «по умолчанию».

Возможности Twig

Возможности и особенности Twig:

  • высокая скорость обработки шаблонов;
  • экранирование вывода;
  • гибкость, расширяемость;
  • простой и чистый синтаксис;
  • работа с переменными и массивами;
  • условия, циклы и другие управляющие конструкции;
  • функции и фильтры для управления выводом;
  • наследование шаблонов.

В Twig допустимо использование логики, связанной с отображением. Drupal, в свою очередь, передает в шаблон переменные, определенные в текущем контексте. Эта концепция, вместе с простотой и гибкостью Twig открывает практически безграничные возможности управления разметкой.

Пример создания массива классов в шаблоне node.html.twig темы Classy:

{%  set classes = [  'node',  'node--type-' ~ node.bundle|clean_class,  node.isPromoted() ? 'node--promoted',  node.isSticky() ? 'node--sticky',  not node.isPublished() ? 'node--unpublished',  view_mode ? 'node--view-mode-' ~ view_mode|clean_class,  ] %}  <article{{ attributes.addClass(classes) }}> 

В этом примере массив classes заполняется значениями, в зависимости от значений переменных в массиве node, который содержит информацию о текущей странице. Оператор ? означает, что если выражение слева истинно, то значение справа будет добавлено в массив. В последнем условии значение формируется с помощью объединения строк (оператор ~), а также применяется фильтр clean_class нормализующий значение для использования в качестве класса. Фильтры применяются к выражению с помощью символа |. Полученный массив с помощью функции addClass() добавляется к массиву атрибутов attributes определенному в рендер-массиве.

Некоторые функции и фильтры в примере являются расширениями встроенных возможностей Twig и присутствуют только в Drupal. Ознакомиться с ними подробнее можно в документации.

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

iamdroid.net

Оптимизированная тема Themy

Для оптимальной работы сайта и уменьшения объёма страниц (ускорения загрузки) пользуйтесь оптимизированным клоном Paxton — адаптивной темой Themy — без лишних JS, шаблонов, с каскадным (выпадающим) меню на CSS.

 

После установки и активации шаблона доработка макета и отладка будет невозможна, если не отключить кэш Twig. Как отключить кэш Твиг описано тут.

 

 

 

 

На этапе разработки

 

 

Другие темы

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

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

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

 

Как установить тему в Drupal 8

Включите модуль Update Manager и перейдите в «Оформление», то есть: /admin/appearance. Нажмите установить тему и укажите в форме адрес архива нужной версии, который можно найти на странице темы. Если на вашем хостинге файлы не скачиваются, закачайте архив темы вручную и распакуйте в папку themes. И тогда на странице «Оформление» появится новая тема. Активируйте тему.

В 8 версии контрибные темы должны размещаться в корневой папке themes, а не в sites/all/themes как это было в 7 версии.

www.tlito.ru

Как, вы наверное знаете, в Drupal 8 блоки тоже стали сущностями – я уже говорил, что это то, что действительно не хватало в 7й версии движка, т.е. мы можем создавать определённый тип блока со своими набором полей, что избавило нас от написания своих кастомных модулей, когда необходимо было реализовать дополнительное поле блока.

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

Как всегда, разберемся с этим на конкретном примере. Я создал свой тип блока, в моем случае – testing-bock

add-twig-templates-for-type-block-drupal-8.png

Теперь создадим блок и выведем его в любой регион нашего сайта

add-twig-templates-for-type-block-drupal-8-1.png

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

add-twig-templates-for-type-block-drupal-8-2.png

Кстати, кто не в курсе как включить отладку в Drupal 8, то идем сюда. Как мы видим, нам доступны следующие шаблоны:

  • block—testingblock.html.twig – шаблон переопределяет блок по ID блока
  • block—block-content—39e5fa3a-79f6-42dd-8857-fcdbec376e44.html.twig – шаблон переопределяет блок по его Uniqid

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

  • block—block-content.html.twig – шаблон переопределяет блок, исходя из региона в котором находится, в данном случает регион — content
  • block.html.twig – базовый шаблон блоков по умолчанию, определяет вывод всех блоков сайта

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

Файл template_block_type.info.yml

 name: Template block type description: Данный модуль добавляет TWIG шаблон для переопределения блока по его типу core: 8.x package: Drupalfly type: module 

Файл template_block_type.module

 <?php  use Drupalblock_contentBlockContentInterface;  /**  * Implements hook_theme_suggestions_HOOK_alter().  */ function template_block_type_theme_suggestions_block_alter(array &$suggestions, array $variables) {  if (isset($variables['elements']['content']['#block_content']) && $variables['elements']['content']['#block_content'] instanceof BlockContentInterface) {  $suggestions[] = 'block__block_content_' . $variables['elements']['content']['#block_content']->bundle();  } } 

Активируем модуль и проверяем список доступных шаблонов.

add-twig-templates-for-type-block-drupal-8-3.png

Как видим, нам стал доступен шаблон

 block--block-content-testing-bock.html.twig

Где,

  • testing-bock – это «машинное имя» нашего типа блока

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

На этом можно закончить.

Скачать модуль, используемый в статье

Скачать

drupalfly.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.