Разработка тем оформления для Drupal 8. Часть 2: Основы темизации

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

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

Механизм темизации

Знание механизмов работы систем управления контентом (Content Management System, CMS) поможет нам в понимании дельнейшего материала.

Drupal — это программа, написанная на языке PHP. В отличии от статических HTML-файлов, Drupal генерирует HTML-код страничек "на лету". В общем случае Drupal делает это, имея только URL необходимой странички, полученный от браузера пользователя. И, что самое удивительное, этого вполне достаточно.

Получив URL, Drupal проделывает кучу работы, в подробности которой мы не будем вдаваться, в результате чего формируется массив данных, который "заворачивается" в HTML-теги и отправляется обратно в браузер пользователя. Процесс "заворачивания" в теги называется рендером, а массив данных — рендер-массив. В процессе рендера используется и PHP-код и файлы шаблонов, а также подключаются файлы CSS и JS.

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

Структура темы оформления

Тема оформления Drupal — это набор файлов, помещенных в общую папку. Минимально необходимые действия для создания темы оформления:

• создать папку темы, например, winterfell ;
• создать в ней файл конфигурации темы winterfell.info.yml ;
• поместить папку темы в папку themes в корневой папке Drupal.

В данном примере winterfell — это системное название темы. В дальнейшем я буду использовать заглушки вида THEMENAME , подразумевая, что их нужно будет заменять на ваши значения.

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

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

В Drupal 8 форматом конфигурационных файлов является YAML. В файле конфигурации THEMENAME.info.yml обязательно должны присутствовать:

• name — отображаемое название темы;
• type — тип расширения — theme ;
• core — версия Drupal — 8.x .

Пример конфигурационного файла:

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

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

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

CSS и JS

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

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

В папке темы создаем подпапку css . Создаем в ней файл styles.css , куда и будем добавлять наши стили.

Пример файла стилей:

В папке темы создаем файл библиотеки THEMENAME.libraries.yml , в котором перечислим файлы стилей.

Пример файла библиотеки:

Добавим в файл конфигурации THEMENAME.info.yml информацию о библиотеке.

Пример конфигурационного файла с добавленной библиотекой:

Аналогичным образом подключаются файлы JS.

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

Базовые темы

Шрифт — это, конечно, круто, но оформление элементов, по-прежнему, не вызывает восторга. Тема "по умолчанию" не имеет оформления, чтобы оно не мешало вам при разработке собственной темы.

Но в Drupal есть и другая интересная возможность — использовать в качестве основы любую другую тему, в том числе c готовым оформлением элементов. Такая тема будет называться базовой. Для того чтобы ее определить, нужно добавить в файл THEMENAME.info.yml параметр base theme с названием базовой темы.

Пример конфигурационного файла с базовой темой:

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

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

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

Вместе с Drupal 8 поставляются две базовые темы Stable и Classy, их мы рассмотрим подробно. На drupal.org тоже представлено немало базовых тем, основанных на разных технологиях и подходах. И хотя многие из них заслуживают внимания, сейчас мы их рассматривать не будем. Я рекомендую вам это сделать самостоятельно.

Stable — это базовая тема Drupal 8 "по умолчанию", и она используется, если вы не указываете другую базовую тему. Она имеет небольшие отличия от "голой" разметки предоставляемой модулями Drupal (ее мы можем увидеть в теме Stark). Stable — это своего рода прослойка, которая в случае изменений в модулях будет обеспечивать совместимость с существующими темами оформления.

Как я уже упоминал, Stable не имеет оформления и предоставляет минимум разметки, стилей, семантики и классов. В каком-то смысле это хорошо, потому что Drupal 7 многие критиковали как раз за избыточность всего этого.

Stable хорошо подходит для разработки тем оформления "с нуля" и на основе фреймворков, а также разработки других базовых тем.

Classy — это нововведение Drupal 8, базовая тема, которая позиционируется как имеющая семантический класс для каждого элемента. Тема хорошо проработана, имеет расширенную разметку и стили для основных элементов, именование классов реализовано в соответствии с методологией BEM.

Classy используется а качестве базовой темы для Bartik и Seven — тем, включенных по умолчанию при установке Drupal.

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

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

Выбор базовой темы

Базовые темы без оформления подходят для комплексных разработок, разработки тем на основе дизайн-макетов, брендбуков и фреймворков.

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

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

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

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

Однако как раз такую тему я разработал и сейчас активно поддерживаю. Material Base — базовая тема для разработчиков тем, сделанная с использованием концепции Material Design от Google.

В Material Base реализованы функции, которые используются мною практически в каждом проекте — от регионов для расположения блоков на странице до оформления кнопок. Функциональные элементы выполнены в соответствии с рекомендациями Google, при этом заложена возможность довольно легко изменять компоненты, которые отличаются от проекта к проекту, такие как размеры, цвета, шрифты и т. д.

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