Drupal 8 थीम फ़ोल्डर संरचना
Тема — это набор файлов, которые определяют уровень представления. Вы также можете создать одну или несколько «подтем» или вариантов темы. Обязателен только файл .info.yml, но большинство тем и подтем будут использовать и другие файлы. На этой странице перечислены файлы и папки, которые находятся в типичной теме или подтеме.
Расположение тем
Вы должны помещать темы в папку "themes" вашей установки Drupal. Обратите внимание, что основные темы Drupal, такие как Bartik и Seven, находятся в папке core/themes вашей установки.
Рекомендуется помещать добавленные темы в подпапку «contrib», а собственные темы — в папку «custom».
Каждая отдельная тема содержится в каталоге, названном в честь самой темы. Например, fluffiness. Имя должно быть строчным, начинаться с буквы и использовать символ подчеркивания (_) вместо пробелов.
(Частичная) структура вашей установки 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 заменит стандартные шаблоны вашими, что позволит вам переопределять стандартную разметку. Вы также можете организовывать шаблоны в подпапках, например, шаблоны блоков в templates/blocks, а шаблоны представлений — в templates/views.
Пример: структура папок темы 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