Что нужно знать, чтобы написать свою тему на Drupal?

Хотите чтобы ваш сайт выглядел уникально? Не можете найти подходящей готовой темы? Возможно пришло время создать собственную тему для Drupal. Для этого вам придётся изучить HTML и CSS - это базовые знания. Однако для написания более функциональной темы оформления потребуется изучить PHP, систему шаблонов Twig и JavaScript.

Что нужно знать для создания своей темы для Drupal

1. HTML и CSS:

   - Эти технологии необходимы для создания базовой структуры и внешнего вида вашей новой темы. HTML определяет структуру страницы, а CSS отвечает за её оформление.

2. PHP:

   - Это язык программирования, на котором написана большая часть ядра Drupal. Для создания собственной темы потребуется базовое понимание PHP, чтобы настроить шаблоны и динамическое содержимое.

3. Twig:

   - Система шаблонов, используемая в Drupal для генерации HTML. Хотя Twig сам по себе не является языком программирования, знание его синтаксиса облегчит написание тем.

4. JavaScript:

   - Этот язык программирования необходим для добавления динамических элементов на страницы сайта. 

Рекомендации:

1. Если вы новичок в разработке тем на Drupal, начните с изучения HTML и CSS. Эти знания позволят вам написать подтему на основе существующей, изменив внешний вид и стуктуру. Вы также сможете создавать простейшие темы для Drupal.
2. Осваив PHP и Twig, вы расширите свои возможности, сможете писать более сложные и функциональные темы.
3. Изучив JavaScript сможете "оживить" свой сайт, добавив на страницы интерактивные элементы.

Пошаговая инструкция

1. Подготовка окружения:

• Убедитесь, что у вас установлен Drupal 11 (PHP 8.2+).
• Используйте локальный сервер (например, DDEV, Lando или XAMPP).
• Установите инструменты: Composer, Node.js (для сборки CSS/JS), Twig-плагины для IDE.

2. Создание структуры темы

Тема должна находиться в папке `/themes/custom/ваша_тема`.  

Базовая структура папок:

```
ваша_тема/
├── ваша_тема.info.yml          → Основной файл темы
├── ваша_тема.libraries.yml     → Подключение CSS/JS
├── templates/                  → Twig-шаблоны
│   ├── node/
│   └── block/...
├── css/
│   └── style.css               → Стили
├── js/
│   └── scripts.js              → Скрипты
├── images/                     → Изображения
└── config/                     → Конфигурации (опционально)
```

3. Настройка .info.yml

Создайте файл `ваша_тема.info.yml` с базовыми параметрами:

```
yaml
name: Ваша тема
description: Описание темы
type: theme
core_version_requirement: ^11
base theme: stable9  # Или другая базовая тема (например, olivero)
libraries:
  - ваша_тема/global-styles
regions:
  header: Header
  content: Content
  sidebar: Sidebar
  footer: Footer
```

4. Подключение CSS/JS через .libraries.yml

В файле `ваша_тема.libraries.yml` укажите стили и скрипты:

```
yaml
global-styles:
  css:
    theme:
      css/style.css: {}
  js:
    js/scripts.js: {}
  dependencies:
    - core/drupal
    - core/jquery
```

5. Работа с Twig-шаблонами

• Шаблоны размещайте в папке `templates/`.
• Чтобы переопределить шаблон, скопируйте его из ядра Drupal или базовой темы.  

  Например, для переопределения шаблона ноды:  

  `templates/node/node--article.html.twig`.

- Используйте отладку с помощью модуля Twig Debug (включите в `services.yml`).

6. Добавление CSS/JS

• Для современных проектов используйте Sass/SCSS или PostCSS (настройте сборку через Webpack/Gulp).
• Подключите библиотеки через `hook_page_attachments` или `*.libraries.yml`.

7. Создание подтемы (sub-theme)

Если вы хотите наследоваться от существующей темы (например, Olivero):

```
yaml
# ваша_тема.info.yml
base theme: olivero
```

Скопируйте необходимые файлы из базовой темы и модифицируйте их.

8. Регистрация новых регионов или блоков

• Добавьте регионы в `ваша_тема.info.yml`.
• Для кастомных блоков используйте модуль Block UI или создайте свои плагины блоков.

9. Адаптивность и доступность

• Используйте CSS-фреймворки (например, Bootstrap 5) или пишите свои медиа-запросы.
• Соблюдайте стандарты WCAG 2.1 (контрастность, ARIA-роли).

10. Тестирование темы

Проверьте тему на разных устройствах и браузерах. Используйте инструменты:

• Lighthouse (для производительности и доступности).
• PHPSta / Drupal Check (для анализа кода).
• Theme Developer (модуль для отладки).

11. Активация темы

1. Зайдите в Админ-панель → Appearance.
2. Найдите вашу тему и нажмите Install and set as default.

Полезные советы

1. Используйте Drupal Console для генерации кода:

   ```
   drupal generate:theme
   ```

2. Подключите библиотеки только там, где они нужны (для оптимизации).

3. Документируйте код — это упростит поддержку.

Пример переопределения шаблона страницы

1. Скопируйте `core/themes/stable9/templates/layout/page.html.twig` в `ваша_тема/templates/layout/page.html.twig`.

2. Модифицируйте HTML:

   ```
twig
   <header>
     {{ page.header }}
   </header>
   <main>
     {{ page.content }}
   </main>
   ```
---

Ресурсы

1. Официальная документация Drupal 11 (https://www.drupal.org/docs/11)
2. Drupal Theming Guide (https://www.drupal.org/docs/theming-drupal)
3. Twig для Drupal (https://twig.symfony.com/doc/3.x/templates.html)