Собственная тема в Drupal 8

Сб, 08/10/2016 - 18:03

Предлагаю к ознакомлению базовый примитив для создания собственной темы в Drupal 8.
Иметь свою тему хорошо и полезно.

Итак, приступим

Создание своей стартовой темы у вас не займёт много времени, основное время у вас уйдёт на написание стилей css.

Структура темы

Пусть наша тема будет иметь название light, тем более она будет точно соответствовать этому имени, так как в сущности будет иметь каркас темы, а дальнейшие расширения вы сможете применить в случае необходимости позже. Для старта нам её вполне хватит.

Создаем папку light

На картинке наглядно видно дерево темы

light theme

В папке light находятся файлы light.info.yml, light.libraries.yml,

light.theme,  html.html.twig, favicon.ico, logo.svg 

и директории css, js, images, templates.

В директории css находятся файлы стилей.
В директории js - файлы для javascript или вызовов функий библиотеки JQuery.
В директории images фоновые картинки.
В директории templates- шаблоны отображения нод и страниц.

Где брать шаблоны? Как и в Drupal 7 в восьмёрке шаблоны страниц лежат в папке system/templates Найти её можно по пути

/core/modules/system/templates
Скопируем в свою тему оттуда шаблоны page.html.twig и шаблон html.html.twig
Для темизации шаблона ноды возьмём шаблон node.html.twig в папке модуля node по пути

/core/modules/node/templates

Скопируйте эти шаблоны: html.html.twig в папку light, а шаблоны page.html.twig и node.html.twig в папку light/templates В дальнейшем, если вам нужно будет переопределить каки-нибудь шаблоны, то ищите их в папке модулей

по пути /core/modules
и копируйте себе в тему.

В папке css создайте файл стилей syle.css для оформления стилей темы.
В папке js создайте файл script.js для js кода в вашей темы.

Итак.
Мы создали директории темы, файлы yml и скопировали шаблоны.

Заполним файлы yml.

Файл light.info.yml

name: light 
description: A starter theme for Drupal 8
type: theme
core: 8.x 
libraries: 
  - light/global-css 
  - light/global-js 
stylesheets-remove: 
  - core/assets/vendor/normalize-css/normalize.css 
  - core/modules/system/css/system.module.css 
  - core/modules/system/css/system.theme.css 
  - core/modules/views/css/views.module.css 
regions:
  header: 'Header' 
  primary_menu: 'Primary menu' 
  secondary_menu: 'Secondary menu' 
  breadcrumb: 'Breadcrumb' 
  highlighted: 'Highlighted' 
  help: 'Help' 
  content: 'Content' 
  sidebar_first: 'Sidebar first' 
  sidebar_second: 'Sidebar second' 
  footer: 'Footer'

В файле идет описание темы, удаление файлов css стилей ядра,чтобы они не мешали вашей вёрстке, подключение библиотек, в которых прописаны пути для стилей и js- кода и описание регионов темы.

Если вам нужно добавить свой регион в тему, то в файле info темы в секции регионов вы прописываете свой регион

my_region: 'My region'

И в файле page.html.twig прописываете свой регион в любом месте разметки, где вам необходимо

{% if page.my_region %} 
<section class="my_region" role="complementary"> 
{{ page.my_region }}
</section> 
{% endif %} 

Шаблонизатор произведёт проверку на наличие контента в регионе 

{% if page.my_region %}

содержимое

 {% endif %} 

И если вы в админке вывели блок в этот регион, то он его выведет в поток браузеру для отображения.

Обратите внимание вот на что. Это важно!

Если вы используете <section>, то у блока, выводимого в секции должен быть заголовок, так как это сематнический элемент разметки, а не обёртка.

Если вам нужно вывести в блоке что- то другое, не имеющее семантического смысла,  то для обёртки испольуйте <div> и в таком случае код вывода региона будет выглядеть так:

<code>{% if page.my_region %} 
<div class="my_region"> 
{{ page.my_region }}
</div> 
{% endif %} 

Если вы выводите регион в секции <section>, от обратите внимание на атрибут role

Ниже описания этого атрибута:

banner - Содержит главный или внутренний заголовок страницы. Брендирование. Рекомендуется использовать не больше одного раза на странице.
complementary - Информационный блок. Отделен от основного содержания.
contentinfo -Информация о содержании страницы. Используйте не более одного раза
definition - Определение термина или понятия.
main - Основное содержание страницы. использовать не более одного раза.
navigation - Навигационный блок. Использовать не более одного раза.
note - Заметка или краткая анотация к основному содержимому.
search - Область поиска на сайте.

Файл light.libraries.yml

global-css: 
  css: 
   theme
    css/style.css: {} 
global-js: 
  js: 
   js/script.js: {}

Файл light.theme

В нём пишут некоторые переопределения, ради которых не охота пистать модули. Он выполняет ту же роль как файл template.php в семёрке На этом собственно и всё. logo.svg и favicon.ico вы сможете сделать сами))

Профит

У вас есть стартовая тема, с которой вы можете начать. Вы можете редактировать шаблоны файлов как вам угодно, добавляя собственные регионы и располагая их в потоке вывода содержимого с помощью стилей css .

Папку с темой нужно положить в директорию themes по пути   

/themes

Ниже можно скачать zip архив с темой
screenshot
Чуток добавил стилей в базовую тему, перезалил архив с темой

Демо темы можно посмотреть здесь http://themedemo.graytone.ru/

2 Спасибо

Комментарии

Аватар пользователя Studio VIZA
3 months 2 недели назад Studio VIZA #

Для старта и упрощения работы новичкам, можно и зип прикрепить, с начальными файлами.

И пожалуйста сделайте там 38 различных регионов, потом эту тему можно развивать и сделать действительно народным продуктом.

0 Спасибо
Аватар пользователя Lotar
3 months 2 недели назад Lotar #

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

0 Спасибо
Аватар пользователя bumble
3 months 2 недели назад bumble #

На главной.

1 Спасибо
Аватар пользователя ivnish
3 months 1 неделя назад ivnish #

Надо было тоже статью запилить, когда я восьмерку мучал)

0 Спасибо
Аватар пользователя FreeLancerPro
3 months 1 неделя назад FreeLancerPro #

Делал тему для Drupal 8 с помощью этой статьи, все работает, спасибо Михаил

Единственная проблема была, когда делал тему, использовал материал на сайте, долго разбирался поначалу, почему тема не работает, хотя копирую и вставляю все как было написано. Оказалось есть небольшая "опечатка", писал вам комментарий на сайте, но что-то он видимо не дошел. В предлагаемом варианте заполнения файла - light.info.yml - на одной строке написано - type: theme core: 8.x, поправьте Михаил, кому-то думаю это очень поможет

drupal 8

0 Спасибо
Аватар пользователя Mihail.space
3 months 1 неделя назад Mihail.space #

Кстати да, спасибо, исправил в бложике. А можно вопрос? Что не так с комментом было? Поля с email и хомяком не обязательны. только имя и сам коммент.

1 Спасибо
Аватар пользователя FreeLancerPro
3 months 1 неделя назад FreeLancerPro #

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

0 Спасибо
Аватар пользователя Mihail.space
1 month 3 недели назад Mihail.space #

update

0 Спасибо
Аватар пользователя gun_dose
1 month 3 недели назад gun_dose #

Есть способ немного быстрее
drupal generate:theme [options]

1 Спасибо
Аватар пользователя negociant
1 month 3 недели назад negociant #

Стоило еще написать про base theme в инфо файле
Чтобы тема не наследовала шаблоны других тем нужно прописать
base theme: false
В таком случае будут подхватываться только шаблоны модулей, а не тем: bartik, classy и stable

1 Спасибо
Аватар пользователя Van&#039;Denis
3 недели 2 дня назад Van'Denis #

Оффтоп.
Миша, я тебе случайно жену нашёл :)
З.Ы. Заодно и тему апнул :))

0 Спасибо
Аватар пользователя Mihail.space
3 недели 2 дня назад Mihail.space #

Заботливый какой)) Я таких барышень обхожу киллометрами)) Не женское это дело)

0 Спасибо
Аватар пользователя Mihail.space
3 недели 1 день назад Mihail.space #

Добавил в описании ссылку на демку

1 Спасибо