Hub — новостная и журнальная тема для Drupal 8. Шаблоны друпал 8
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)
Следующие примеры показывают как можно переопределить этот шаблон:
- 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.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
Hub — многофункциональная новостная тема для Drupal с адаптивным дизайном.
Основное предназначение шаблона:
- новостные порталы
- интернет-журналы
- блоги
Ключевые особенности темы
- Совместимость с Drupal 8.x;
- Адаптивная верстка;
- Конструктор страниц;
- Слайдер изображений;
- Предустановленные расширения и модули;
- Шаблон разработан с использованием современных веб-технологий: Sass, Bootstrap.
Информация
DEMO Посмотрите установленную тему в демо-режиме, для того чтобы оценить все возможности, а так же найти документацию и разные варианты оформления темы.Скачать
Версия, доступная для бесплатного скачивания:
Hubv1.08 MB [ исходники, документация, PSD, плагины ]
Файлы для скачивания доступны только зарегистрированным пользователям со статусом "подписчик". Важная информация.
Регистрация /Вирусов нет - архив проверен антивирусом Dr.Web
Купить
Приобретая тему или плагин у официального разработчика вы обеспечиваете себе гарантию работоспособности продукта и ряд преимуществ:
- Самая последняя и актуальная версия
- Бесплатные обновления
- Бесплатная техническеая поддержка
- Полная совместимость с последней версией Drupal
Смотрите также
Комментарии
freeams.ru
Drupal 8: темизация элементов меню
Шаблоны Drupal 8 строятся на HTML5, что помогает решать задачи вёрстки дизайна точно и выгодно.
Теория: HTML5, в котором возможностей больше, чем в HTML4, предлагает использование пользовательских атрибутов тегов. При работе с документом HTML5 (шаблоном сайта) можно добавлять пользовательские атрибуты к любым тегам, например, тегу <a>, чтобы выделить нужный элемент и обращаться к нему в CSS и JavaScript по значению атрибута.То есть теги могут иметь атрибуты data-*, также как и стандатные атрибуты href, src, border, alt, width...Примеры HTML5:
<a href="/" data-kuda="main">Главная</a>
<a href="blog" data-kuda="blog">Блог</a>
<img src="/images/logo.jpg" data-img-name="logo">
<img src="/images/blog/environmebt.jpg" data-img-name="bog-teaser">
В этих примерах атрибуты data-* можно использовать для обращения к пунктам в CSS (или JS):
a[data-kuda="main"] {color:#55FFAA;} /*выделить ссылку на главную страницу цветом*/
img[data-img-name="blog-teaser"] {width:25%;} /*задать картинкам тизеров ширину*/
Подобные атрибуты прописаны в шаблонах Drupal 8.
CSS-стили ссылок меню с помощью атрибутов data-drupal-link-system-path
Пользовательский атрибут data-drupal-link-system-path позволяет обращаться к каждому элементу меню и задавать стили CSS.Откройте FireBug страницы сайта на Друпал 8, чтобы узнать какие атрибуты и их значения присвоены элементам страницы.
Скриншот FireBug страницы сайта на Drupal 8 с шаблоном TheMy
Для обращения к ссылкам Главного меню будем использовать класс блока главного меню menu--main (8я сверху строка кода), класс списка ul menu и пользовательский атрибут ссылок data-drupal-link-system-path. Свойства элементов меню в данном случае будут прописываться таким CSS:
.menu--main .menu li a[data-drupal-link-system-path="<front>"] {background:blue;} /*Кнопка Главная - с синим фоном*/
.menu--main .menu li a[data-drupal-link-system-path="kontakty"] {background:orange;} /*Кнопка Контакты - оранжевая*/
.menu--main .menu li a[data-drupal-link-system-path="blog"] {background:brown;} /*Кнопка Блог - коричневая*/
Если такие длинные атрибуты невыгодны для решения задач вёрстки, можно пользоваться модулем Menu Link Attributes, который добавляет стандартные атрибуты class, id ссылкам выбранных вами меню.
Больше информации о пользовательских атрибутах HTML5: Google: html5 атрибуты data-*
www.tlito.ru
