Drupal 8. Структура кастомной темы

В отличие от 7-й версии, в 8-ке кастомные темы(или дистрибутивные темы) и темы ядра расположены более логично в структуре каталогов. Так кастомные темы должны находиться в папке themes в корне сайта, а темы, поставляемые с ядром соответственно в core/themes, и смотри не перепутай... Кутузов.

Как было уже сказано в прошлом блоге, повсеместно вместо info файлов используется формат yaml, причем разработчикам так понравились возможности этого формата, что файлы *.yml встречаются куда ни плюнь, по несколько штук на модуль или тему.

Создадим новую тему, для этого в папке themes создаем каталог с названием = название темы, например power и в новой папке themes/power создадим файл конфигурации power.info.yml смесь ужа и ежа, т.е. наименования файлов из 6,7 версий и 8)))

Содержимое файла power.info.yml:

name: Power
description: 'Power theme.'
type: theme
package: Custom
base theme: classy
core: 8.x

libraries:
  - power/global-styling

regions:
  header: Header
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  highlighted: Highlighted
  breadcrumb: Breadcrumb
  content: Content
  sidebar_first: 'Sidebar first'
  sidebar_second: 'Sidebar second'
  footer: 'Footer'

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

Основная секция состоит из обязательных и опциональных параметров и содержит данные об имени темы name обязательный параметр, type тип, к какому типу относится юнит - тема, тоже обязательный параметр. base theme - базовая тема, от которой наследуется шаблон. Обязательный параметр, если базовой темы нет, то ставим false. Еще два обязательных параметра, это description описание и ядро core, где указывается версия ядра. Параметры package, version и т.п. являются оциональными(необязательными), package описывает группу, в которой могут находится подобные юниты, version описывает версию пакета темы и т.д. Без указания обязательных параметров, тема не будет показана в админке в списке тем, что является одной из частых ошибок начинающих Друпаллеров.

Далее следует секция включения CSS или JS использующая новую концепцию библиотек в Drupal 8.

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

Использование *.libraries.yml означает, что подходы, используемые в Drupal 7 больше не работают. Вместо этого используется новый архитектурный подход SMACSS, с чем вас и поздравляю! А это значит, что пора лезть в пример файла bartik.libraries.yml и смотреть на какие секции разбивается файл конфигурации, и что эти секции означают.

global-styling:
  css:
    base:
      css/base/elements.css: {}
    component:
      css/components/block.css: {}
      css/components/book.css: {}
      ........
      css/components/ui-dialog.css: {}
    layout:
      css/layout.css: {}
    theme:
      css/colors.css: {}
      css/print.css: { media: print }

Base: в этой секции определяется сброс или нормализация CSS правил и стилизация HTML элементов;
Layout: эта секция означает макро разметку расположения страницы, включая различные системы сеток;
Component: в этой секции определяются отдельные элементы интерфейса страниц;
State: Здесь описываются компоненты, которые изменяются на стороне клиента;
Theme: Стили для визуального отображения компонентов, все красивости здесь;

Имя в начале библиотеки файла libraries.yml и в файле info.yml после слеша совпадает, чем мы указываем что подключить.

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

libraries-override:
  # Замена записи
  core/drupal.vertical-tabs: power/vertical-tabs
 
  # Удаление записи
  core/modernizr: false
 
  # Замена элемента
  core/drupal.vertical-tabs.css:
    css:
      component:
      misc/vertical-tabs.css: css/vertical-tabs.css

  # Удаление элемента
  core/drupal.vertical-tabs.css:
    css:
      component:
      misc/vertical-tabs.css: false

По аналогичной схеме библиотеки также можно расширять:

libraries-extend:
  core/drupal.vertical-tabs:
    - power/tabs

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

В twig существует функция приаттачить либу:

{{ attach_library('power/slick') }}

Где сама либа будет выглядеть примерно так:

# Slick
slick:
  version: VERSION
  css:
    theme:
      vendor/slick/slick.css: {}
  js:
    vendor/slick/slick.min.js: {}
  dependencies:
    - core/jquery

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

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

function example_preprocess_page(&$variables) {
  if ($variables['is_front']) {
    $variables['#attached']['library'][] = 'example/slick';
  }
}

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

Share this post

Leave a comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.