Разработка тем оформления для 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.

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

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

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

name: THEMENAME
type: theme
description: 'Theme description.'
core: '8.x'

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

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

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

CSS и JS

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

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

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

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

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=latin,cyrillic);

body {
  font-family: "Roboto", sans-serif;
}

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

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

LIBRARYNAME:
  css:
    theme:
      css/styles.css: {}

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

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

name: THEMENAME
type: theme
description: 'Theme description.'
core: '8.x'

libraries:
  - THEMENAME/LIBRARYNAME

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

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

Базовые темы

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

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

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

name: THEMENAME
type: theme
description: 'Theme description.'
core: '8.x'
base theme: BASETHEME

libraries:
  - THEMENAME/LIBRARYNAME

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

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

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

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

Stable

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

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

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

Classy

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

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

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

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

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

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

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

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

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

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

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

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

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

В следующей статье мы будем работать со стилями.