8.2. Из чего состоит тема Drupal 8. Обзор темы Stark.

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

Разработчики Drupal 8 предлагают нам рассмотреть тему-пример Stark. Эта тема добавлена в друпал, только для ознакомления как устроена тема. Давайте посмотрим что лежит внутри этой темы:

Скриншот

Файл stark.info.yml

Начнем рассмотрение с файлика stark.info.yml. Раньше в 7ом друпале данные о теме хранились в файлах .info, но 8ом друпале повсеместно используется YML, так что и .info файл, теперь info.yml в формате YML. В YML формате ключи и значения разделяются двоеточием:

Имя темы:

name: Stark

Тип проекта, может быть темой, модулем. У нас это тема.

type: theme

Описание, показывается на странице с темами:

description: 'An intentionally plain theme with no styling to demonstrate default Drupal’s HTML and CSS. Learn how to build a custom theme from Stark in the <a href="https://www.drupal.org/theme-guide">Theming Guide</a>.'

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

package: Core

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

# version: VERSION

Версия ядра друпала, также закомментирована и вставлена дальше автоматически drupal.org:

# core: 8.x

Использует или нет какую-нибудь базовую тему, false означает что не использует:

base theme: false

Блок с версией темы и какое ядро, вставлено автоматически сайтом drupal.org:

# Information added by Drupal.org packaging script on 2016-02-03
version: '8.0.3'
core: '8.x'
project: 'drupal'
datestamp: 1454490380

 Файл stark.libraries.yml

Здесь мы подключаем css и js файлы темы:

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}

Также мы можем подключить javascript файлы

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
  js:
    js/custom.js: {}

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

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

Помимо этого можно еще задать для css файлов, какие файлы должны отображаться всегда, а какие только в версии для печати

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

 Файлы описания README.txt,  screenshot.png

Эти файлы показывают как выглядит тема и как ее устанавливать, если есть какие-нибудь особенности установки или использования.

Файл logo.svg

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

Папка config и файл stark.schema.yml

Еще один файл YML темы, в котором храняться настройки темы. Для темы Stark здесь только заголовок для страницы настроек темы Stark.

Папки css, js

В этих папках хранятся пользовательские css, javascript файлы. Не забывайте, что недостаточно положить файл в папку, чтобы он подключился. Каждый файл нужно подключать отдельно через stark.libraries.yml.

Файл stark.breakpoints.yml

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

stark.mobile:
  label: mobile
  mediaQuery: '(min-width: 0px)'
  weight: 0
  multipliers:
   - 1x
stark.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 480px) and (max-width: 959px)'
  weight: 1
  multipliers:
    - 1x
stark.wide:
  label: wide
  mediaQuery: 'all and (min-width: 960px)'
  weight: 2
  multipliers:
    - 1x

Вот собственно и вся темя для ознакомления Stark. В следующей статье мы разберем как создавать свою тему офомления на основе темы Stable.