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