Как создать собственную тему Drupal 9 за 9 простых шагов

Drupal 9 дает разработчикам и владельцам сайтов гибкость в создании индивидуальных компонентов, которые можно объединить для создания привлекательного цифрового опыта. Темы - это блоки дизайна Drupal, которые отображают внешний вид веб-сайта. Drupal 9 поставляется с выбором основных тем и сторонних тем, наиболее популярной из которых является тема Bootstrap. Однако, если ни одна из тем Drupal 9 не подходит для вас, вам, вероятно, стоит задуматься о разработке пользовательских тем. С пользовательскими темами Drupal 9 вы можете адаптировать свой дизайн к точным требованиям.

Drupal 9 предоставляет Bartik в качестве темы внешнего интерфейса для Drupal, но если вам нужна настраиваемая тема Drupal 9, вы можете создать свою собственную разработку темы Drupal 9, тем самым улучшив свои навыки работы с темами Drupal. Самый простой способ по-настоящему понять разработку тем для Drupal 9 - это попрактиковаться и создать ее с нуля.

Drupal 8 достиг EOL. Пришло время перейти на Drupal 9. Однако, если вы все еще пытаетесь создать собственную тему в Drupal 8, эти шаги будут работать и для установки Drupal 8.

Начало работы с индивидуальной разработкой тем для Drupal 9

Давайте начнем с создания темы Drupal 9 для нашего сайта Drupal.
ШАГ 1. Во-первых, нам нужно создать собственную тему в папке web / themes / custom . Мы назовем папку custom_theme .

ШАГ 2: Далее нам нужно будет создать файл info.yml . Нам нужно указать для него основные ключи. Уточним это здесь -

 КОД:
имя : Пользовательская тема
тип : тема
description : «Пользовательская тема для моего веб-сайта».
пакет : Другой
core_version_requirement : ^ 8 || ^ 9

ШАГ 3 : Теперь давайте создадим libraries.yml файл , чтобы указать все библиотеки мы нужны (CSS и JS) для наших пользовательского Drupal 9 темы. Мы также создадим каталог CSS и JS и его файлы, чтобы связать его здесь. Мы собираемся назвать библиотеку global-styling .

 КОД:
глобальный стиль :
версия : 1.x
js :
js / script.js : {}
css :
тема :
css / style.css : {}

ШАГ 4: После создания файла library.yml нам нужно связать его с нашей темой. Для этого мы собираемся добавить его в файл info.yml. который затем применит его ко всей теме.

 КОД:
библиотеки :
- custom_theme / глобальный стиль

Итак, ключом будут библиотеки, а путь - имя темы - custom_theme / имя библиотеки - global-styling .

ШАГ 5: Затем нам нужно унаследовать «Базовую тему». В нашем случае мы унаследуем « классную » тему, которая является основной темой Drupal. Итак, ключевой будет основная тема в info.ym l.

 КОД:
базовая тема : стильный

ШАГ 6: Теперь мы определим «регионы» для нашей темы. В info.yml мы должны определить его в разделе «регионы».

 КОД:
регионы :
брендинг : брендинг
навигация : Основная навигация
search : поиск
признаки: Рекомендуемая
content : Content
right_sidebar : Правая боковая панель
footer_first : Сначала нижний колонтитул
footer_second : Секунда нижнего колонтитула
footer_third : Третий нижний колонтитул
footer_bottom : Нижний колонтитул

В разделе «регионы» вы можете определить свои регионы для настраиваемой темы Drupal. Здесь,
брендинг: это идентификатор региона, который должен состоять из строчных букв.
Брендинг: название региона, которое может состоять из прописных букв.

ШАГ 7. После того, как мы определили регионы для нашей настраиваемой темы Drupal, нам нужно переопределить page.html.twig, чтобы захватить наши «регионы» вместо классной темы. Мы создадим каталог templates / system, в котором мы будем создавать page.html.twig .

 КОД:
< header aria-label = "Заголовок сайта" class = "header" id = "header" role = "banner" >
{{page.branding}}
{{page.navigation}}
{{page.search}}
</ заголовок >
< section class = "Featured" id = "Featured" role = "complementary" >
{{page.featured}}
</ section >
< section class = "main" id = "main" >
< main aria-label = "Основное содержание сайта" class = "content" id = "content" role = "main" >
{{page.content}}
</ main >
< aside class = "right - sidebar" id = "sidebar" role = "complementary" >
{{page.right_sidebar}}
</ в сторону >
</ section >
< footer aria-label = "Нижний колонтитул сайта" class = "footer" id = "footer" role = "contentinfo" >
< div class = "нижний колонтитул - верх" >
{{page.footer_first}}
{{page.footer_second}}
{{page.footer_third}}
</ div >
< div class = "нижний колонтитул - нижний" >
{{page.footer_bottom}}
</ div >
</ нижний колонтитул >

В page.html.twig мы создадим структуру HTML для наших регионов. Как вы видите на {{page.branding}} - здесь,

page - ключ к отображению "регионов" на странице.

брендинг - это регион, который мы определили в файле info.yml .

Итак, теперь мы создали наши регионы и отрендерили их на странице.

Шаг 8: Перейдите в раздел «Внешний вид» на вашем сайте Drupal. Вы можете увидеть свою собственную тему Drupal в разделе « Неустановленные темы ».

Вам нужно нажать кнопку « Установить и установить по умолчанию », чтобы установить тему Drupal на сайт.

После того, как он будет установлен, перейдите в Structure -> Block Layout . Ваша пользовательская тема появится под макетом блока.

Вы увидите ссылку « Демонстрация блоковых регионов (настраиваемая тема) ». Щелкните ссылку. Вы можете увидеть все регионы, которые вы объявили в info.yml и добавили в page.html.twig.

Шаг 9: Вы почти закончили создание тем в Drupal 9! Затем вам нужно применить стили в CSS для каждой области в соответствии с вашим дизайном. В этом случае мы будем использовать CSS ; Вы даже можете использовать SCSS, если хотите. Просто проверьте область брендинга - вы должны увидеть класс региона, а затем добавить CSS к этому классу.

 . header {
 дисплей : гибкий ;
 justify-content : пробел между ;
 отступ : 10 пикселей ;
}


. заголовок . region {
 отступ : 5 пикселей ;
}


. заголовок . region-branding {
 гибкость : 0 1 20 %;
}


. заголовок . region-navigation {
 гибкость : 0 1 50 %;
}


. заголовок . region-search {
 гибкость : 0 1 30 %;
}


. регион . block-region {
 отступ : 15 пикселей ;
}


. Featured {
 отступ : 40 пикселей 20 пикселей ;
 цвет фона : индийский красный ;
}


. main {
 отступ : 50 пикселей 0 ;
 дисплей : гибкий ;
 justify-content : пробел между ;
}


. основной . content {
 гибкость : 0 1 65 %;
}


. основной . right - sidebar {
 гибкость : 0 1 30 %;
}
		



. нижний колонтитул - верх {
 дисплей : гибкий ;
 justify-content : пробел между ;
 отступ : 10 пикселей ;
}


. нижний колонтитул - верх . region {
 отступ : 5 пикселей ;
}


. регион-сноска-первых,. регион-сноска-вторых,. region-footer-third {
 гибкость : 0 1 30 %;
}

Результат:

Ваша тема для Drupal 9 готова!

Если вам нужно написать какие-либо перехватчики или создать предложения для вашего файла ветки, вы можете добавить файл .theme в свою пользовательскую тему Drupal (показано ниже).