Drupal + Omega + Bootstrap: быстрое создание полностью кастомных тем оформления без верстки (Часть 1. Omega)

Drupal 7 на сегодняшний день развился настолько, что позволяет создавать темы оформления для сайтов любой сложности, практически не прибегая к HTML-верстке. Процесс создания таких тем напоминает использование конструктора, вся основная работа по переносу эскиза макета в жизнь заключается только в задании необходимых стилей в CSS. Дополнительных ограничений при этом никаких не возникает, можно создавать темы любой сложности, причем полностью настраиваемые; и разве что натыкаешься на ограничения самой платформы (Drupal) или выбранного фреймворка (Bootstrap).

Мой опыт разработки под Drupal более 7 лет, начинал в 2005 году с Drupal 4.6, с тех пор использую и восхищаюсь тем, как он развивается и становится лучше и удобнее от версии к версии. В этой статье я поделюсь своим опытом создания и использования сабжевой связки. Подразумевается, что вы знакомы с Drupal, умеете устанавливать модули и создавать темы оформления, но по каким-то причинам еще не используете фреймворк Omega для разработки своих тем. Первая часть статьи представляет собой простую инструкцию о том, как создать и настроить субтему на базе Omega. Также надеюсь, что идея этой статьи будет интересна пользователям альтернативных платформ, и немного прорекламирует мощь, простоту и гибкость Drupal в этом вопросе.

Вот список основных и вспомогательных модулей, которые позволяют добиться подобного результата:

• Omega Drupal 7 Base Theme ^[1] — базовая тема для Drupal 7, фреймворк для создания собственных тем оформления;
• Omega Tools ^[2] — тулкит (модуль) для простого создания субтем на базе Omega через админку;
• Delta ^[3] — из этого набора нам нужен модуль Delta Blocks для замены стандартных компонентов оформления блоками;
• Block Class ^[4] — простенький модуль для добавления блокам нужных нам классов CSS (пригодится для Bootstrap).

Архитектура

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

1. Собственно движок
Сначала определяется, какой движок тем будет использоваться. С незапамятных времен в Drupal используется в качестве движка стандарный PHP (PHPTemplate), шаблоны которого представляются собой обычные HTML-файлы с PHP-вставками вида <?php print $title ?>. Как мне кажется, это удобно, т. к. не нужно разучивать дополнительный синтаксис движка оформления, а также можно вставлять любой код без каких-либо ограничений. Также Drupal позволяет использовать любой движок тем оформления, например Smarty, однако уже давно никто не торопится их прикручивать (для того же Smarty есть версия для Drupal 6, а для 7 уже нет — наверное, никому не надо).

2. Базовая тема
Тема оформления, которая определяет все основные стили, функции и прочее для будущих субтем. Ваша тема может и не использовать никаких базовых тем, может быть написана с нуля, или сама являться базовой для других тем.

3. Субтема
Наследует все функции, стили и прочее от базовой темы и может их переопределять. В качестве базовой может быть также указана субтема, и так до бесконечности.

Это очень гибкая система, которую можно использовать, например, для незначительных модификаций основной темы сайта (скажем, чтобы украсить его к Новому году — создаем субтему, которая висит некоторое время, потом ее отключаем, включаем через год и так далее). Ну а также эта архитектура позволяет создавать, использовать и расширять такие фреймворки, как Omega или AdaptiveTheme.

Создание субтемы на базе Omega

Для начала скачиваем и устанавливаем базовую тему и модули, указанные в начале статьи. Далее переходим в раздел Аppearance (Оформление) и, если модуль Omega Tools у корректно установлен, видим на странице ссылку Create new Omega subtheme (Создать новую субтему) (если модуль установлен, но этой ссылки нет — попробуйте очистить кеш). Переходим по ссылке и задаем параметры новой темы:

• Name (название), например Omega Example Theme;
• Machine-readable name (машинное имя), например omega_example;
• отмечаем галочкой пункт Install automatically (Установить автоматически);
• выбираем Destination (место назначения) — директорию с конфигурацией нужного нам сайта или sites/all, если хотим, чтобы тема была доступна всем сайтам в мультисайтовой установке (веб-сервер должен иметь права на запись в эту директорию для выполнения автоматической установки);
• в качестве Base theme (базовой темы) выбираем Omega;
• в качестве Starterkit (стартового набора) выбираем Omega HTML5 Starterkit.

Рисунок 1. Создание субтемы с использованием модуля Omega Tools

Нажимаем кнопку Save and continue (Сохранить и продолжить), последуют 2 простеньких шага мастера, на которых можно задать дополнительный параметры темы, включить ее сразу после установки или отредактировать .info-файл. Если все сделано правильно и никаких ошибок в процессе создания не возникло, то наша тема готова! Можем теперь отыскать ее в списке тем и установить по умолчанию.

Далее начинается самое интересное.

Настройка макета

Переходим по ссылке Настройки нашей темы и видим несколько вкладок, в которых фреймворк Omega предлагает нам тонкую настройку нашего макета (Layout configuration).

1. Grid settings (настройка сетки)

^[5]

Здесь можно выбрать один из типов сетки: Default (960px) — стандарный, адаптивно-фиксированный по ширине под основные разрешения экранов (800, 1024, 1280), или Fluid — тянущийся по всей ширине экрана. Пользователи фреймворков типа Bootstrap знают разницу между ними. Также на этой вкладке можно тонко настроить @media под необходимую ширину. Ну а для большинства проектов на этой вкладке все можно оставить по умолчанию.

Через @media к теме подключаются следующие CSS:

• global.css — основной файл стилей, подключается глобально на всех экранах, в том числе мобильных, реализуя концепцию mobile-first;
• omega-example-alpha-default.css — основной файл стилей для использования с сеткой
• omega-example-alpha-default-narrow.css — файл для экранов шириной около 800 пикселей
• omega-example-alpha-default-normal.css — файл для экранов шириной около 1024 пикселей и всех IE до 9-й версии
• omega-example-alpha-default-wide.css — файл для экранов шириной более 1200 пикселей

2. Zone and region configuration (конфигурация зон и регионов)

^[6]

Вся основная работа по настройке макета сайта будет проходить в этой вкладке. Собственно, это и есть основная плюшка фреймворка Omega — задание расположения Drupal-регионов для размещения Drupal-блоков не правкой кода шаблона page.tpl.php, а непосредственно в настройках темы. Собственно, при использовании Omega вообще отпадает необходимость переопределять или даже заглядывать в глобальные шаблоны, такие как html.tpl.php или page.tpl.php, и прочие. Это и есть тот функционал, обозначенный в начале статьи, который избавляет от HTML-верстки макета. Можно сосредоточиться непосредственно на CSS и коде на нужных вам шаблонов вывода, node.tpl.php, например. А ширина или расположение левой/правой колонок, основного содержимого страницы или блоков в подвале теперь настраивается в пару кликов.

Теперь несколько слов о том, как этим пользоваться. На первый взгляд все выглядит немного запутанно, но разобравшись один раз, дальше становится все просто. Omega вводит помимо стандартной сущности региона в Drupal еще две: секцию и зону. Секции объединяют зоны, а в зоны входят уже привычные нам регионы. Всего секций три: Header (шапка), Content (содержимое) и Footer (подвал), переопределить их нельзя (хотя необходимости в этом и не возникает, так как это довольно абстрактные сущности). Внутри этих секций можно как угодно разместить зоны с регионами.

У каждой зоны есть настройки, основные из которых: Section (секция, которой принадлежит данная зона), Weight (вес, определяющий порядок расположения зон в секции), Column count (количество колонок для каждой секции можно задать свое, на выбор предлагаются 12, 16 и 24), Primary Region (основной регион). Ширина каждой зоны соответствует ширине страницы. Если задан основной регион, то общее количество колонок всех регионов внутри зоны должно быть не больше количества колонок самой зоны, и тогда если один или несколько регионов пустуют, то регион, заданный основным, растягивается на оставшуюся ширину. Например, если на главной странице блоки в регионах Sidebar First (Левая колонка) и Sidebar Second (Правая колонка) отсутствуют, тогда регион Content (Содержимое) занимает по ширине 12 колонок. И если на внутренних страницах в левой колонке появляются блоки, то регион с содержимым станет занимать по ширине 9 колонок. Ну а если блоки будут присутствовать в обоих колонках, то ширина содержимого будет равна заданному количеству колонок — 6. Это будет происходить в том случае, если в зоне задан основной регион, а если нет, то регионов может быть любое количество любой ширины, все регионы будут иметь заданную ширину, пустые регионы (без блоков или со скрытыми блоками) выводиться не будут.

Далее в зоне перечислены принадлежащие ей регионы, сами регионы имеют аналогичные зонам настройки: Zone (родительская зона), Prefix (количество колонок для смещения, аналогично классам offset* в Bootstrap), Width (ширина, количество колонок), Suffix (количество колонок для отступа после региона), Weight (вес).

Меняя все эти параметры, можно настроить расположение блоков в макете абсолютно как душе угодно. Регионы можно переопределить стандартным для Drupal способом — в файле описания темы .info, точно также переопределяются и зоны, их может быть любое количество.

Дополнительно с помощью модуля Context ^[7] (его мы не рассматриваем в этой статье) можно полностью переопределить расположение всех регионов для разных страниц сайта, а также применить другие настройки темы. Пример: большой сайт, разное расположение блоков на главной и внутренних страницах сайта или разделах, плюс страница-справочник с онлайн-картой, на которой используется Fluid-макет.

3. Debugging (отладка)

^[8]

Просто интересная плюшка, которая помогает в работе: добавляет 2 кнопки, позволяющие включать (по умолчанию — отключать) сетку-оверлей и вспомогательные блоки. На рисунке 2 (далее) видно, как выглядит макет с включенными блоками и сеткой. В настройках я отключаю отображение этих вещей по умолчанию, а сами кнопки делаю видимыми только для администратора.

4. Toggle libraries (включение/отключение библиотек)

^[9]

На этой вкладке можно включать или отключать нужные/ненужные библиотеки. Библиотека — это сущность фреймворка Omega и не имеет отношения к Libraries API. Библиотеки определяются в файле .info и могут состоять из файлов JS и CSS. В дальнейшем мы будем использовать их для подключения Bootstrap.

5. Toggle styles (включение/отключение стилей)

^[10]

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

6. Toggle advanced elements (включение/отключение дополнительных элементов)

^[11]

Ну и на последней вкладке мы отключаем все стандартные элементы Drupal, которые не можем отключить в общих настройках темы: сообщения, вкладки, «хлебные крошки», заголовок страницы, иконку RSS. Остальные элементы отключаем в общих для всех тем настройках, которые находятся ниже вкладок и есть у каждой темы: логотип, название сайта, слоган, главное и дополнительное меню.

Итог

В итоге у нас получился девственно чистый макет, который мы увидим перейдя на главную страницу.

Рисунок 2. Главная страница с отключенными блоками и включенными сеткой и отладочными блоками

Для того, чтобы вернуть стандартные элементы на страницу (логотип, заголовок страницы, меню, сообщения, вкладки и прочее), воспользуемся модулем Delta Blocks: в его настройках включим необходимые нам компоненты, и уже в виде стандартных блоков разместим их на странице в любом месте. Это также избавляет нас от правки шаблона page.tpl.php, и позволяет «на лету» размещать, включать и отключать необходимые элементы.

Мы создали собственную полностью настраиваемую тему оформления без правки кода файлов основных шаблонов, и даже без подключения к серверу по FTP/SSH. Но теперь мы хотим добавить в нашу тему всю мощь Bootstrap. О том, как этого добиться, речь пойдет во второй части статьи.

Автор: Nilard

Источник ^[12]