Access to this page has been denied.
You have been blocked because we believe you are using automation tools to browse the website.
This may happen as a result of the following:
- Javascript is disabled or blocked by an extension (ad blockers for example)
- Your browser does not support cookies
If you think you have been blocked by mistake, please contact help@drupal.org with the reference ID below.
Reference ID: #757d6443-872b-11ee-b9a8-2cf5b7d9be6f
Powered by PerimeterX , Inc.
Access to this page has been denied.
You have been blocked because we believe you are using automation tools to browse the website.
This may happen as a result of the following:
- Javascript is disabled or blocked by an extension (ad blockers for example)
- Your browser does not support cookies
If you think you have been blocked by mistake, please contact help@drupal.org with the reference ID below.
Reference ID: #75700f1d-872b-11ee-af56-4fe625fa52f1
Powered by PerimeterX , Inc.
8.3. Создание своей Drupal 8 темы на основе темы Stable.
Начиная с этой статьи мы будем делать свою тему на друпале. В этом разделе учебника мы разберем основы темы на друпале, где что лежит, как подключать и использовать CSS, JavaScript. Делать свою тему мы будем на основе темы-конструктора ядра Stable. Если вы хотите изучать друпал, то Stable отличное начало. Не стоит начинать с Bootstrap, у вас будут постоянно возникать вопросы и ошибки. В следующем разделе учебника мы уже с багажом умений созданий темы для Drupal 8, возьмемся и за Bootstrap.
Если у вас есть желание читать мануал на английском, то вот официальная документация, можете сравнивать с моим учебником и поправлять меня в комментариях или через Ctrl + Enter.
Создаем папку нашей темы
Все новые темы мы кладем в папку /themes. Вы можете класть папки по старинке в sites/all/themes, но лучше всего использовать новую структура файлов Drupal 8 и класть в папку /themes.
Я создам папку /themes/drupalbook, вы можете назвать вашу тему как вам угодно:
Создаем файл с основной информацией о теме drupalbook.info.yml
В папке нашей темы создаем файл имя_темы.info.yml:
Дальше стоит сделать небольшое отступление на то что такое формат YAML (здесь подробнее ссылка на статью).
Обратите внимание на две вещи:
1) Не используйте табуляцию для отступов, только пробелы.
2) Отступы должны быть 1 или более пробелов. (то есть name: value, но не name:value).
Вставляем в файл drupalbook.info.yml:
name: Drupalbook type: theme base theme: stable description: My first Drupal 8 theme. core: 8.x libraries: - drupalbook/global-styling regions: header: Header content: Content # Этот регион обязателен sidebar_first: 'Sidebar first' # Не забываем добавить кавычки footer: FooterДавайте разберем, что каждая строчка значит.
name — название нашей темы. Машинное имя нашей темы это название папки и файла drupalbook.info.yml — drupalbook.
type — тип проекта друпал, у нас это тема.
base theme — мы наследуемся от темы stable, если тема с нуля, то пишем false.
description — описание темы, которое отображается в админке.
core — версия ядра друпала, для которого эта тема.
libraries — здесь мы поключаем библиотеки к нашему модулю. Делаем мы это через файлик, который мы создадим далее drupalbook.libraries.yml. Обратите внимание на global-styling, мы будем использовать его в drupalbook.libraries.yml.
regions — регионы нашей темы. Обязательный регион content, через него выводится содержимое друпала. Также если название региона в два или более слова, не забудьте обернуть его в кавычки. Машинные имена регионов пишутся через нижнее подчеркивание.
Раз мы заявили об библиотеке нашей темы, так давайте ее создадим.
Файл drupalbook.libraries.yml
Добавляем следующие строки в drupalbook.libraries.yml:
global-styling: version: 1.x css: theme: css/style.css: <> css/print.css: < media: print >js: js/custom.js: <> dependencies: - core/jqueryА теперь давайте разберем все построчно:
global-styling — именно такое имя мы задали в drupalbook.info.yml
css — здесь мы подключаем CSS файлы, заметьте, что для print версии сайта мы указали media: print.
js — здесь подключаем javascript файлы. jQuery не является обязательным для друпала, поэтому если хотим использовать jQuery в нашем пользовательском JavaScript дописываем зависимость от него
dependencies: - core/jqueryСоздаем папки css, js и кладем туда файлы:
css/style.css
css/print.css
js/custom.js
Так как мы наследуемся от темы stable, то и шаблоны наследуются от нее. Теперь заходим на наш сайт в раздел Оформление:
чистим кеш и включаем нашу тему:
Теперь у нас на сайте наша новая тема Drupalbook:
Разработка тем оформления для Drupal 8. Часть 2: Основы темизации
В этой статье мы рассмотрим компоненты, из которых состоят темы оформления, их структуру, а также возможности, которые предоставляют базовые темы.
В предыдущей статье мы рассматривали процесс подготовки к работе. В основном это был идейный и теоретический материал, и тем не менее, эту статью я также хотел бы начать с теории.
Механизм темизации
Знание механизмов работы систем управления контентом (Content Management System, CMS) поможет нам в понимании дельнейшего материала.
Drupal — это программа, написанная на языке PHP. В отличии от статических HTML-файлов, Drupal генерирует HTML-код страничек «на лету». В общем случае Drupal делает это, имея только URL необходимой странички, полученный от браузера пользователя. И, что самое удивительное, этого вполне достаточно.
Получив URL, Drupal проделывает кучу работы, в подробности которой мы не будем вдаваться, в результате чего формируется массив данных, который «заворачивается» в HTML-теги и отправляется обратно в браузер пользователя. Процесс «заворачивания» в теги называется рендером, а массив данных — рендер-массив. В процессе рендера используется и PHP-код и файлы шаблонов, а также подключаются файлы CSS и JS.
Влияние на процесс рендера и рендер-массив с целью получения нужного отображения — это и есть темизация, в общем смысле. Темизация каких-то отдельных элементов может быть реализована в модулях, а для всего сайта используются специальный тип модулей — темы оформления.
Структура темы оформления
Тема оформления Drupal — это набор файлов, помещенных в общую папку. Минимально необходимые действия для создания темы оформления:
- создать папку темы, например, winterfell ;
- создать в ней файл конфигурации темы winterfell.info.yml ;
- поместить папку темы в папку themes в корневой папке Drupal.
Примечание
В данном примере winterfell — это системное название темы. В дальнейшем я буду использовать заглушки вида THEMENAME , подразумевая, что их нужно будет заменять на ваши значения.
Системное название темы должно быть уникальным. Есть и другие правила именования тем, а также файлов и папок.
Пока просто запомните, что надо стараться обходиться латинскими буквами в нижнем регистре, цифрами и символами подчеркивания и не использовать пробелы, знаки препинания и символы других алфавитов.
В Drupal 8 форматом конфигурационных файлов является YAML. В файле конфигурации THEMENAME.info.yml обязательно должны присутствовать:
- name — отображаемое название темы;
- type — тип расширения — theme ;
- core — версия Drupal — 8.x .
Пример конфигурационного файла:
name: THEMENAME type: theme description: 'Theme description.' core: '8.x' Проделав эти действия, нужно очистить кеш в Drupal, после чего тема появится в списке доступных тем оформления.
Правда, если вы включите эту тему сейчас, то увидите весьма унылую картину, потому что пока мы еще не определили в ней ничего, что влияет на внешний вид. Для этого нужно добавить в тему файлы CSS, JS, изображения, библиотеки, функции, шаблоны, регионы и другие сопутствующие ресурсы. Для большинства ресурсов предусмотрены специальные файлы и папки, но кое-что вы можете организовать по своему усмотрению.
Структура файлов и папок темы оформления
Структура темы хорошо описана в документации, я же сосредоточусь на принципах разработки.
CSS и JS
В данный момент для всех элементов будет отображаться разметка и стили «по умолчанию». Забегая вперед скажу, что вид «по умолчанию» также определен в теме, но она системная и не отображается в общем списке.
Темизация в Drupal производится по принципу дополнения или переопределения «чего-то». Стили — это лишь одна из возможностей темизации. Другие возможности и методы мы будем рассматривать в следующих статьях. А пока мы будем изменять стили «по умолчанию», для чего создадим и подключим к теме свой файл CSS.
В папке темы создаем подпапку css . Создаем в ней файл styles.css , куда и будем добавлять наши стили.
Пример файла стилей:
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=latin,cyrillic); body
В папке темы создаем файл библиотеки THEMENAME.libraries.yml , в котором перечислим файлы стилей.
Пример файла библиотеки:
LIBRARYNAME: css: theme: css/styles.css: <> Добавим в файл конфигурации THEMENAME.info.yml информацию о библиотеке.
Пример конфигурационного файла с добавленной библиотекой:
name: THEMENAME type: theme description: 'Theme description.' core: '8.x' libraries: - THEMENAME/LIBRARYNAME Аналогичным образом подключаются файлы JS.
Если вы посмотрите на тему сейчас (не забудьте очистить кеш), то увидите, что в ней используются наши стили, в данном примере — шрифт.
Базовые темы
Шрифт — это, конечно, круто, но оформление элементов, по-прежнему, не вызывает восторга. Тема «по умолчанию» не имеет оформления, чтобы оно не мешало вам при разработке собственной темы.
Но в Drupal есть и другая интересная возможность — использовать в качестве основы любую другую тему, в том числе c готовым оформлением элементов. Такая тема будет называться базовой. Для того чтобы ее определить, нужно добавить в файл THEMENAME.info.yml параметр base theme с названием базовой темы.
Пример конфигурационного файла с базовой темой:
name: THEMENAME type: theme description: 'Theme description.' core: '8.x' base theme: BASETHEME libraries: - THEMENAME/LIBRARYNAME Попробуйте определить в качестве базовой темы, например, bartik . Оформление элементов унаследуется от базовой темы, при этом по-прежнему будет использоваться шрифт из нашего файла стилей.
Помимо оформления от базовой темы наследуется все, что она предоставляет: регионы, шаблоны, функции, библиотеки и прочее. Их можно переопределять, отключать и дополнять. Базовая тема сама может иметь базовую тему, в этом случае унаследуются также и ее ресурсы.
Эта концепция открывает большие возможности для разработчиков тем оформления, позволяя выделить общие элементы в базовую тему и повторно использовать их на разных проектах. Некоторые темы изначально разрабатываются, чтобы использоваться в качестве базовых.
Вместе с Drupal 8 поставляются две базовые темы Stable и Classy, их мы рассмотрим подробно. На drupal.org тоже представлено немало базовых тем, основанных на разных технологиях и подходах. И хотя многие из них заслуживают внимания, сейчас мы их рассматривать не будем. Я рекомендую вам это сделать самостоятельно.
Stable
Stable — это базовая тема Drupal 8 «по умолчанию», и она используется, если вы не указываете другую базовую тему. Она имеет небольшие отличия от «голой» разметки предоставляемой модулями Drupal (ее мы можем увидеть в теме Stark). Stable — это своего рода прослойка, которая в случае изменений в модулях будет обеспечивать совместимость с существующими темами оформления.
Как я уже упоминал, Stable не имеет оформления и предоставляет минимум разметки, стилей, семантики и классов. В каком-то смысле это хорошо, потому что Drupal 7 многие критиковали как раз за избыточность всего этого.
Stable хорошо подходит для разработки тем оформления «с нуля» и на основе фреймворков, а также разработки других базовых тем.
Classy
Classy — это нововведение Drupal 8, базовая тема, которая позиционируется как имеющая семантический класс для каждого элемента. Тема хорошо проработана, имеет расширенную разметку и стили для основных элементов, именование классов реализовано в соответствии с методологией BEM.
Classy используется в качестве базовой темы для Bartik и Seven — тем, включенных по умолчанию при установке Drupal.
Classy хорошо подходит для разработки тем с помощью стилей. Классов здесь действительно очень много, так что вам вряд ли придется добавлять их в разметку.
Однако большое количество классов также является и недостатком, в том случае, если в них нет необходимости или нужны другие классы и разметка. Такая ситуация может возникнуть, если тема разрабатывается на основе какого-либо фреймворка или технологии, где используются другая разметка и названия классов.
Выбор базовой темы
Базовые темы без оформления подходят для комплексных разработок, разработки тем на основе дизайн-макетов, брендбуков и фреймворков.
Использование тем с оформлением в качестве базовой темы может иметь место при создании прототипов, на функциональных проектах или для быстрого запуска. Но в целом, это не лучшее решение.
Существует сегмент премиум-тем, как универсальных, так и предназначенных для определенных задач, но с точки зрения разработки вносить какие-либо изменения в них, пожалуй, сложнее всего.
Существуют и универсальные базовые темы, сочетающие в себе наличие оформления и возможности кастомизации. Обычно они основаны на CSS-фреймворках, таких как Bootstrap. Это хороший вариант для начинающего разработчика тем или специалиста по сайтостроению.
Профессиональные разработчики часто создают собственные базовые темы, реализуют в них свои наработки, подходящие под их методы разработки. К сожалению, здесь выбор совсем не велик, поскольку такие решения узкоспециализированы и не всегда публикуются в открытом доступе.
Однако как раз такую тему я разработал и сейчас активно поддерживаю. Material Base — базовая тема для разработчиков тем, сделанная с использованием концепции Material Design от Google.
В Material Base реализованы функции, которые используются мною практически в каждом проекте — от регионов для расположения блоков на странице до оформления кнопок. Функциональные элементы выполнены в соответствии с рекомендациями Google, при этом заложена возможность довольно легко изменять компоненты, которые отличаются от проекта к проекту, такие как размеры, цвета, шрифты и т. д.
Об этой теме оформления я расскажу подробнее в заключительной статье этого цикла, пока же могу рекомендовать ее к ознакомлению как наглядный пример описываемых мною подходов и решений.
В следующей статье мы будем работать со стилями.