Предлагаю к ознакомлению базовый примитив для создания собственной темы в Drupal 8.
Иметь свою тему хорошо и полезно.
Итак, приступим
Создание своей стартовой темы у вас не займёт много времени, основное время у вас уйдёт на написание стилей css.
Структура темы
Пусть наша тема будет иметь название light, тем более она будет точно соответствовать этому имени, так как в сущности будет иметь каркас темы, а дальнейшие расширения вы сможете применить в случае необходимости позже. Для старта нам её вполне хватит.
Создаем папку light
На картинке наглядно видно дерево темы
В папке 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
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 темы в секции регионов вы прописываете свой регион
И в файле page.html.twig прописываете свой регион в любом месте разметки, где вам необходимо
<section class="my_region" role="complementary">
{{ page.my_region }}
</section>
{% endif %}
Шаблонизатор произведёт проверку на наличие контента в регионе
содержимое
{% endif %}
И если вы в админке вывели блок в этот регион, то он его выведет в поток браузеру для отображения.
Обратите внимание вот на что. Это важно!
Если вы используете <section>
, то у блока, выводимого в секции должен быть заголовок, так как это сематнический элемент разметки, а не обёртка.
Если вам нужно вывести в блоке что- то другое, не имеющее семантического смысла, то для обёртки испольуйте <div>
и в таком случае код вывода региона будет выглядеть так:
<div class="my_region">
{{ page.my_region }}
</div>
{% endif %}
Если вы выводите регион в секции <section>
, от обратите внимание на атрибут role
Ниже описания этого атрибута:
banner - Содержит главный или внутренний заголовок страницы. Брендирование. Рекомендуется использовать не больше одного раза на странице.
complementary - Информационный блок. Отделен от основного содержания.
contentinfo -Информация о содержании страницы. Используйте не более одного раза
definition - Определение термина или понятия.
main - Основное содержание страницы. использовать не более одного раза.
navigation - Навигационный блок. Использовать не более одного раза.
note - Заметка или краткая анотация к основному содержимому.
search - Область поиска на сайте.
Файл light.libraries.yml
Файл light.theme
В нём пишут некоторые переопределения, ради которых не охота пистать модули. Он выполняет ту же роль как файл template.php в семёрке На этом собственно и всё. logo.svg и favicon.ico вы сможете сделать сами))
Профит
У вас есть стартовая тема, с которой вы можете начать. Вы можете редактировать шаблоны файлов как вам угодно, добавляя собственные регионы и располагая их в потоке вывода содержимого с помощью стилей css .
Папку с темой нужно положить в директорию themes по пути
Вложение | Размер |
---|---|
base theme for drupal 8 | 113.69 КБ |
Комментарии
Делал тему для Drupal 8 с помощью этой статьи, все работает, спасибо Михаил
Единственная проблема была, когда делал тему, долго разбирался поначалу, почему тема не работает, хотя копирую и вставляю все как было написано. Оказалось есть небольшая "опечатка", писал вам комментарий на сайте, но что-то он видимо не дошел. В предлагаемом варианте заполнения файла - light.info.yml - на одной строке написано - type: theme core: 8.x, поправьте Михаил, кому-то думаю это очень поможет
Кстати да, спасибо, исправил в бложике. А можно вопрос? Что не так с комментом было? Поля с email и хомяком не обязательны. только имя и сам коммент.
Что именно было уже не скажу, давно было. Помню, что и полностью заполнял форуму, и частично - не подтверждения о размещении, не самого комментария. Сейчас попробовал разместить комментарий, все работает
Есть способ немного быстрее
drupal generate:theme [options]
Стоило еще написать про base theme в инфо файле
Чтобы тема не наследовала шаблоны других тем нужно прописать
base theme: false
В таком случае будут подхватываться только шаблоны модулей, а не тем: bartik, classy и stable
что-то не совсем понял это дело. если не добавить base theme false, то тянутся стили от отключенных стандартных тем? для 7-ки тоже справедливо?
А почему в боковой колонке показывается, что в этом топике 0 комментариев?