Структура папок Тем Drupal 8

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

Расположение тем

Вы должны поместить темы в папку "themes" вашей установки Drupal. Обратите внимание, что основные темы Drupal, такие как Bartik и Seven, находятся в папке core/themes вашей установки.

Рекомендуется помещать добавленные темы в подпапку «contrib», а свои собственные темы - в папку «custom».

Каждая отдельная тема содержится в каталоге, названном в честь самой темы. Например, пушистость. Имя должно быть строчным, начинаться с буквы и использовать символ подчеркивания (_) вместо пробелов.

(Частичная) структура вашей установки Drupal может выглядеть следующим образом:

  |-core
  |  |-modules
  |  |-themes
  |  |  |-bartik
  |  |  |-seven
  ..
  |-modules
  |-themes
  |  |-contrib
  |  |  |-zen
  |  |  |-basic
  |  |  |-bluemarine
  |  |-custom
  |  |  |-fluffiness

Структура тематической папки

Это пример файлов и папок, которые находятся в типичной структуре папок темы:

  |-fluffiness.breakpoints.yml
  |-fluffiness.info.yml
  |-fluffiness.libraries.yml
  |-fluffiness.theme
  |-config
  |  |-install
  |  |  |-fluffiness.settings.yml
  |  |-schema
  |  |  |-fluffiness.schema.yml
  |-css
  |  |-style.css
  |-js
  |  |-fluffiness.js
  |-images
  |  |-buttons.png
  |-logo.svg
  |-screenshot.png
  |-templates
  |  |-maintenance-page.html.twig
  |  |-node.html.twig

Ниже приведено описание наиболее распространенных файлов, которые вы можете найти в теме.

*.info.yml
Тема должна содержать файл .info.yml для определения темы. Помимо прочего, файлы .info.yml определяют метаданные, библиотеки и области блоков. Это единственный обязательный файл в теме.

*.libraries.yml
Файл .libraries.yml используется для определения библиотек JavaScript и CSS, которые могут быть загружены темой.

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

*.theme
Файл .theme представляет собой файл PHP, который содержит всю условную логику и предварительную обработку данных. Это также может расширить основные настройки темы. Создание расширенных настроек темы.

CSS/
Рекомендуется хранить файлы .css в подпапке 'css'. Основные темы Drupal 8 организовывают файлы CSS в соответствии с руководством по стилю SMACSS. Чтобы тема загружала CSS-файлы, они должны быть определены в файле .libraries.yml и могут быть переопределены или удалены в файле .info.yml.

JS/
Специфичные для темы файлы JavaScript хранятся в папке 'js'. Чтобы тема загружала файлы JavaScript, они должны быть определены в файле .libraries.yml.

images/
Рекомендуется хранить изображения в подпапке «images».

screenshot.png
Если файл screenshot.png находится в папке темы, он будет использоваться на странице «Внешний вид». Кроме того, вы можете определить скриншот в файле .info.yml.

logo.svg
Если в папке темы находится векторный SVG-файл логотипа вашей темы, его можно использовать в шапке сайта. Логотипы также можно загрузить в разделе «Внешний вид»>«Настройки».

templates/
Шаблоны обеспечивают разметку HTML и некоторую логику представления. В отличие от Drupal 7, файлы шаблонов Drupal 8 (файлы * .html.twig) должны храниться в подпапке 'templates'. Если вы будете следовать определенным соглашениям об именах, Drupal заменит основные шаблоны по умолчанию теми, которые вы предоставите, что позволит вам переопределить разметку по умолчанию. Вы также можете организовать свои шаблоны в подпапках, например, все шаблоны блоков внутри шаблонов / блоков и все шаблоны представлений внутри шаблонов / представлений.

Основная тема Bartik: структура папок

Для примера посмотрите на структуру папок Bartik, которая находится в core/themes/bartik:

  |-bartik.breakpoints.yml
  |-bartik.info.yml
  |-bartik.libraries.yml
  |-bartik.theme
  |-color
  |  |-color.inc
  |  |-preview.css
  |  |-preview.html
  |  |-preview.js
  |-config
  |  |-schema
  |  |  |-bartik.schema.yml
  |-css
  |  |-colors.css
  |  |-layout.css
  |  |-maintenance-page.css
  |  |-print.css
  |-images
  |  |-add.png
  |  |-required.svg
  |  |-tabs-border.png
  |-logo.svg
  |-screenshot.png
  |-templates
  |  |-block--search-form-block.html.twig
  |  |-block--system-branding-block.html.twig
  |  |-block--system-menu-block.html.twig
  |  |-block.html.twig
  |  |-comment.html.twig
  |  |-field--taxonomy-term-reference.html.twig
  |  |-maintenance-page.html.twig
  |  |-node.html.twig
  |  |-page.html.twig
  |  |-status-messages.html.twig

Больше информации

Стандарты кодирования: организация файлов CSS