Свой дизайн на Друпал 8

Drupal: 
Уровень сложности: 

Друпал 8 - интеллектуальная система, в руках разработчика предсталяет набор функциональных возможностей. Освоение системы начинается с редактирования дизайна сайта.
Структура документа:

Если вы хотите визуальной информации по разработке темы для Друпал 8, тут видео Theme Development for Drupal 8 https://www.youtube.com/watch?v=zTX3jrPCKWs
Ниже идет теоретическая методология и шпаргалка верстальщика.

 

Как работать над дизайном сайта

После установки Drupal 8 нужно скачать любую контрибную тему из Обзора шаблонов для Drupal 8 и в ней верстать нужный вам макет. Этого нельзя делать в стандартных темах bartik, stark, так как есть правила доработки Друпала.

Видеоурок о FireBug поясняет как правильно менять внешний вид сайта, исследуя стили и внося изменения в нужный файл стилей. Файлы стилей, как правило, располагаются в папке css вашей темы. Редактирование css-файлов не требует чистки кэша (если у вас не включена опция "Объединение CSS-файлов" в Конфигурация - Производительность). С помощью CSS можно вполне доработать внешний вид, скрыть ненужные элементы. А с помощью блоков можно разместить нужные элементы в правильных местах.

Если нужно переделать структуру сайта, добавить регионы, задавать собственные шаблоны отдельных страниц (главной или лендингов), изменять положение элементов по условиям, тогда в Друпал 8 нужно исследовать и освоить Twig - язык разметки шаблонов - и редактировать файлы шаблонов. Что-то по Твигу есть тут http://x-twig.ru/ (по ссылке с адаптивностью на данный момент проблемы).

Все файлы шаблонов в 8 Друпале написаны на Твиге, хотя в 7ке всё было на простом пхп.

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

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

Всегда, когда вы редактируете шаблон и закачиваете на сервер, нужно очищать кэш сайта так: Конфигурация - Производительность - Очистка кэша /admin/config/development/performance. Чтобы не чистить кэш и быстрее редактировать дизайн, нужно отключить кэширование Твиг. Нередко при ошибках в шаблоне друпал показывает белый экран и системную ошибку, тогда надо исправить файл шаблона или удалить этот файл, или сменить тему в админке /admin/appearance .

 

Предлагаю перевод статьи Template naming conventions.

Именование файлов шаблонов в Drupal 8

Файлы шаблонов имеются в ядре Drupal 8 ( в папке /core/modules/system/templates ) - их нельзя редактировать согласно правил доработки Drupal 8. Также некоторые файлы шаблонов присутствуют в контрибных темах ( в папке templates темы ) и служат для переопределения вывода и создания нужной разработчику логики, структуры шаблона.

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

После загрузки файла шаблона на сервер чистите кэш сайта через админку Друпала.

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

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

 

HTML, шаблон заголовка <head>

Шаблон HTML-документа содержит базовую разметку и задаёт параметры тегов <html>, <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

Исследуя любую тему, например, Bartik, можно обнаружить, что файл html.html.twig расположен в папке темы templates. В вашей теме вы так можете добавить тег адаптивности или обозначить классы главных элементов html-документов, дописать любой html-код. Друпал будет формировать страницы сайта, пользуясь этим файлом шаблона.

Официальная документация о html.html.twig.

 

Шаблон страницы page.html.twig

Шаблон имени: page--[front|internal/path].html.twig
Базовый файл: page.html.twig (расположение: core/modules/system/templates/page.html.twig)

Содержит много строк. Шаблон главной страницы также задаётся файлом page--front.html.twig, он является приоритетным. Если нужно изменить вывод главной, можно пользоваться админкой: Управлять - Конфигурация - О сайте - Главная страница /admin/config/system/site-information .

Используемые файлы шаблонов подгружаются в порядке спецификации, основанной на внутренних путях. Так например для страницы /node/1/edit будут использованы такие имена файлов шаблонов:

  1. page--node--edit.html.twig
  2. page--node--1.html.twig
  3. page--node.html.twig
  4. page.html.twig

Подробнее в официальной документации о page.tpl.php.

 

Регионы

Шаблон имени: region--[region].html.twig
Базовый файл: region.html.twig (расположение: core/modules/system/templates/region.html.twig)

Файл шаблона региона используется при отображении каждого региона, имеющего содержимое. Он вызывается модулем ядра Block или любой функцией типа hook_page_build(). Имена регионов могут задаваться в файле темы mytheme.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" - системное название, присвоенное блоку этим модулем.

Пример:
block--block--1.html.twig - этот файл шаблона будет использоваться для отображения блока с номером 1 из Библиотеки пользовательских блоков, то есть созданного тут admin/structure/block/block-content.
Имена шаблонов блоков, использующие нумерацию внутри региона, не поддерживаются в Друпал 8.

Если нужно задать шаблон отображения блока, созданного некоторым модулем, например mymodule, и допустим, модуль присвоил блоку внутреннее имя (delta): my-block, тогда нужно использовать имя: block--mymodule--my-block.html.twig .

Пример для блоков Views.
Если вы создали Представление с системным именем front_news и задали вывод в блок с системным именем block_1, тогда имя шаблона должно сформироваться так: block--front-news--block-1.html.twig. Обратите внимание

в именах файлов шаблонов нижнее подчеркивание "_" заменяется на дефис "-"

Также имейте ввиду, имена модулей чувствительны к регистру в этом случае. Так что для модуля с системным именем MyModule шаблон HTML будет иметь имя MyModule.html.twig, шаблон блока - block--MyModule--delta.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

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

Отметим, нижние подчеркивания всегда заменяются дефисами в именах файлов шаблонов.

Читайте официальную документацию по node.html.twig.

 

Термины таксономии

Шаблон имени: taxonomy-term--[vocabulary-machine-name|tid].html.twig
Базовый файл: taxonomy-term.html.twig (расположение: core/modules/taxonomy/templates/taxonomy-term.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-" к имени поля, например, fiield--field-slide.html.twig.

Официальная документация по field.html.twig.

 

Комментарии

Шаблон имени: comment-wrapper--node-[type].html.twig
Базовый файл: comment-wrapper.html.twig

Задаёт параметры отображения и html-разметку каждого комментария.

 

Форумы

Шаблон имени: forums--[[container|topic]--forumID].html.twig
Базовый файл: forums.html.twig (расположение: core/modules/forum/templates/forums.html.twig)

Разделы форума управляются шаблонами:

  1. forums--containers--forumID.html.twig
  2. forums--forumID.html.twig
  3. forums--containers.html.twig
  4. forums.html.twig

Страницы топиков управляются шаблонами:

  1. forums--topics--forumID.html.twig
  2. forums--forumID.html.twig
  3. forums--topics.html.twig
  4. forums.html.twig

Официальная документация по forums.html.twig.

 

Страница сообщения о техническом обслуживании

Шаблон имени: maintenance-page--[offline].html.twig
Базовый файл: maintenance-page.html.twig (расположение: core/modules/system/templates/maintenance-page.html.twig)

Эта страница появляется, когда не работает база данных. Полезно использовать для отображения читабельной страницы без сообщений об ошибках. Настройка этой страницы описана тут Theming the maintenance page

Официальная документация по maintenance.html.twig.

 

Страница результатов поиска

Шаблон имени: search-result--[searchType].html.twig
Базовый файл: search-result.html.twig (расположение: core/modules/search/templates/search-result.html.twig)

Файл search-result.html.twig можно скопировать в тему и использовать для настройки общей страницы поиска и индивидуальных. В зависимости от типа поиска могут использоваться различные разметки. Например, для страницы example.com/search/node/Search+Term Друпал будет искать файл search-result--node.html.twig или, если такого нет, использует стандартный файл шаблона поиска. Для страницы поиска типа example.com/search/user/bob файл шаблона должен называться search-result--user.html.twig. Есть возможность расширить с помощь модулей (расширений) типы поиска и добавить больше шаблонов.

Официальная документация по search-result.html.twig.

 
Добавление от тлито
 

Страница пользователя user.html.twig

Базовый файл: user.html.twig (расположение: core/modules/user/templates/user.html.twig)

Официальная документация по user.html.twig.

 

Пример разработки темы: Как перенести HTML-шаблон на Друпал, видео

 

 

Ответы на вопросы

1 Как мне настроить собственный внешний вид для конкретной страницы на Друпале 8?

Если это страница материала, используйте в папке темы templates файл page--node--1.html.twig, где 1 - это id материала (можно узнать при редактировании в адресной строке).
Если это другой тип страницы (Представление, Главная, Термин, Страница пользователя), тогда найдите соответствующий файл шаблона в папке ядра core/modules/search/templates/, скопируйте в папку темы templates, задайте в имени файла правильный идентификатор страницы и редактируйте.

2 Что делать, если изменения в файле шаблона не дают результат?

Очистите кэш, как об этом написано в уроке выше, отключите кэширование Твиг, убедитесь в правильности имени файла, научитесь дебажить Твиг, в частности, определять подключенные файлы шаблонов, как написано тут https://www.drupal.org/node/2358785

3 Будут ли ещё переводы статей о дизайне, Твиге и доработке Друпала?

Да. Чтобы повлиять на выбор статей для перевода, оставляйте вопросы или темы на форуме.

4 Какой шаблон на Друпал 8 более менее подходящий для блога, магазина, сайта компании?

Paxton, BusinessGroup Zymphonies Theme, Drupal8 Zymphonies Theme, Professional Responsive Theme. Обзор шаблонов для 8 Друпала есть на тлито ру. Используйте поиск тем по друпал.орг.

5 Стоит ли использовать Друпал 8 для сайта компании?

Если у вас нет опыта использования кода и функций Друпал, вы не знаете как искать ответы на вопросы, но вам понадобятся сложные функции, типа слайдер, связи материалов, тогда Друпал 7 будет более правильным решением, так как для него есть много модулей. Для Друпал 8 мало расширений, поэтому на нём можно делать только небольшие сайты компаний, типа блог и пять страниц меню.

6 Как начать изучение кода Друпал 8 ?

Я думаю, что стоит открыть несколько сайтов с разнообразным набором функций: форум, поиск музыки, городской сайт, фотосайт с голосованием и комментариями. Тогда, может быть, вы освоите систему, дорабатывая функции на каждом сайте.
Если вы готовы читать теорию, то на Друпал.орг есть кнопка Documentation.

Рубрика: