Drupal 8: Структура темы оформления

*.info.yml
*.libraries.yml
*.breakpoints.yml
*.theme
css/
js/
images/
screenshot.png
logo.svg
templates/
Ссылки

Каждая тема имеет свою собственную папку соответствующую названию темы, например my_theme_name/. А в данной папке находятся различные файлы и другие папки, необходимые для данной темы оформления.

Давайте посмотрим на пример структуры темы:

├─ my_theme_name.breakpoints.yml
  ├─ my_theme_name.info.yml
  ├─ my_theme_name.libraries.yml
  ├─ my_theme_name.theme
  ├─ config/
  │  ├─ install/
  │  │  └─ my_theme_name.settings.yml
  │  └─ schema/
  │     └─ my_theme_name.schema.yml
  ├─ css/
  │  └─ style.css
  ├─ js/
  │  └─ my-custom-script.js
  ├─ images/
  │  └─ buttons.png
  ├─ logo.svg
  ├─ screenshot.png
  └─ templates/
     ├─ maintenance-page.html.twig
     └─ node.html.twig

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

¶*.info.yml

Тема оформления должна содержать файл описывающий данную тему для Drupal. Это единственный обязательный файл для тем оформления. С его структурой и примерами можете ознакомиться в разделе создания собственной темы оформления.

¶*.libraries.yml

Файл .libraries.yml используется для объявления ассетов темы оформления, которые могут быть как JavaScript, так и CSS файла. В теме объявляются библиотеки, необходимые для данной темы оформления. Ознакомьтесь с информацией по работе с библиотеками.

¶*.breakpoints.yml

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

¶*.theme

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

¶css/

Хранение .css файлов в css/ папке является хорошей практикой. Если вы используете препроцессоры, возможно стоит подумать о создании следующей структуры:

└─ styles/
     ├─ css/
     │  └─ style.css
     └─ scss/
        └─ style.scss

Это позволить отделить исходные файлы стилей, из которых они собираются, от конечных, которые будут использоваться на странице.

¶js/

В данной папке должны находиться JavaScript файлы, которые необходимы только данной теме оформления.

¶images/

Также хорошей практикой является и создание папки для картинок.

¶screenshot.png

Скриншот темы, который показывается на странице листинга тем оформления административного интерфейса.

¶logo.svg

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

¶templates/

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

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

Вам не обязательно строго следовать данной структуре, там где возможно её менять. Например, многие темы создают папку assets/ куда складывают как стили, картинки и собственный JavaScript. Всё сильно зависит от темы, её авторов и какие инструменты вы планируете использовать в процессе её разработки.

Старайтесь создавать структуру темы таким образом, чтобы в ней не было каши и всё свалено в одну кучу, делите файлы по смыслу и назначению, чтобы было легко ориентироваться сторонним разработчикам.