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 — базовая тема для Drupal 7, фреймворк для создания собственных тем оформления;
  • Omega Tools — тулкит (модуль) для простого создания субтем на базе Omega через админку;
  • Delta — из этого набора нам нужен модуль Delta Blocks для замены стандартных компонентов оформления блоками;
  • Block Class — простенький модуль для добавления блокам нужных нам классов 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-файл. Если все сделано правильно и никаких ошибок в процессе создания не возникло, то наша тема готова! Можем теперь отыскать ее в списке тем и установить по умолчанию.

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

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

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

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



Здесь можно выбрать один из типов сетки: 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 (конфигурация зон и регионов)



Вся основная работа по настройке макета сайта будет проходить в этой вкладке. Собственно, это и есть основная плюшка фреймворка 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 (его мы не рассматриваем в этой статье) можно полностью переопределить расположение всех регионов для разных страниц сайта, а также применить другие настройки темы. Пример: большой сайт, разное расположение блоков на главной и внутренних страницах сайта или разделах, плюс страница-справочник с онлайн-картой, на которой используется Fluid-макет.

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



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

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



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

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



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

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



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

Итог

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

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

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

Вторая часть, подключаем Bootsrap
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 28

    +1
    Жду продолжения :).
      0
      Присоединяюсь! Nilard, скоро планируется вторая часть?
        +1
        Планирую в понедельник, на прошлых выходных не успел закончить.
          0
          Спасибо! ждём. Пока отдал сотрудникам на изучение. К понедельнику будут готовы ко второй части :) Следующие части будут?
            0
            По темизации наверное нет, что тут еще расскажешь. А какие темы еще интересуют?
              0
              Даже не знаю. Такие моменты как с темой омега — даже для меня открытие :) Я не знаю что у вас в загашнике есть :) Предложите.
              А сотрудникам будет полезно многое. Например про панелс, вьшки, рулс. Коммерц и уберкарт опять же. Drush — не помешал бы. Это то что пришло на ум с ходу.
        0
        Добро пожаловать! :)
        0
        Шикарно. Но так ведь вообще можно обленится.
          0
          Еще раз подчеркиваю, что статья шикарная. А вторая часть на тему «лень-двигатель прогресса». Для быстрого, я бы сказал конвейерного создания тем для заказчиков отличный инструмент.
            0
            Не сказал бы, что облениться :) Но сосредоточиться на всяких дополнительных фишках и функционале, вместо пиления очередного велосипеда из page.tpl.php
            0
            Все настройки созданной подтемы хранятся в БД или экспортируются в info-файл?
              0
              В БД. Теоретически их можно экспортировать в Features и потом собирать платформу Drupal при помощи drush make, но хотел бы я посмотреть на человека, который в действительности построил на этом свой development workflow.
                +1
                Прошу прощения, Omega Tools позволяет экспортировать конфигурацию темы в .info-файл.
              +1
              Большое спасибо за замечательную, прекрасно иллюстрированную статью.

              Пробовал Omega, но идея группировать CSS-код по media queries, а не по структуре, мне не понравилась. Поэтому я отказался от Omega в пользу минималистичной базовой темы Boron и собственного starter kit'а.

              Bootstrap и подобные «CSS-фреймворки» не использую принципиально из-за того, что они идут вопреки семантике. Вместо того, чтобы присваивать определенным блокам нужные свойства, CSS-фреймворк декларирует все возможные сочетания свойств под несемантическими классами. Эти классы нужно вставить в HTML блоков, чтобы свойства применились к ним… Ужасно!

              Нет, это, конечно, позволяет по-быстренькому склепать тему оформления, но для серьезной работы не годится (мое личное мнение).

              Гораздо более грамотный подход предлагает, например, SASS-фреймворк Susy.

              Чтобы блок занял, скажем, четыре колонки, пишем:

              ----
              // Файл: partials/blocks/.block-foo.sass
              #block-foo
                +span-columns(2)
              ----

              Чисто, семантично, аккуратно.

              Susy позволяет задавать разное количество колонок в зависимости от ширины окна браузера. Я использую следующие диапазоны:
              1) 0—400px — мобильники в портретном режиме;
              2) 400—600 — мобильники в ландшафтном режиме;
              3) 600—800 — планшеты в портретном режиме;
              4) 800—1000 — планшеты в ландшафтном режиме;
              5) 1000—1200 — нетбуки;
              6) 1200—1400 — десктопы.

              Напоминаю, что мобильные устройства имеют виртуальное разрешение, отличающееся от физического. Так, на типовом мобильнике с экраном 800×480 пикселов браузер считает, что размер экрана составляет 533×320 пикселов.

              По дефолту количество колонок для каждого диапазона соответствует номеру диапазона (например, пять колонок на экране нетбука), но можно использовать и любое другое количество (причем, индивидуального для каждого контейнера и каждого диапазона!). Например:

              ----
              // Файл: partials/blocks/.main-menu.sass
              #main-menu
              
                // Изначально блок занимает всю ширину контейнера,
                // так что задавать значение для первого диапазона не нужно.
                // +at-bp(1)
              
                // Во втором диапазоне пускай тоже будет во всю ширину.
                +ap-bp(2)
                  +span-columns(2)
              
                // Начиная с третьего диапазона и дальше список должен выстраиваться в строку.
                +from-bp(3)
                  ul
                   +horizontal-list
              
                // В четвертом диапазоне у контейнера данного блока должно быть три колонки,
                // из них одну занимает лого, а две других — главное меню.
                +at-bp(4,3)
                  +span-columns(2 omega)
              
                // И так далее
                // ...
              ----

              HTML-код при этом трогать вообще не нужно.

              У метода есть несущественный недостаток: в итоговом CSS будут встречаться повторяющиеся участки кода. Из положения можно было бы выйти при помощи @extend, но большого смысла в этом нет, поскольку:
              1) повторные куски прекрасно жмутся gzip'ом;
              2) на читаемость кода это не влияет, ведь верстальщик работает с SASS, а там повторяются только вызовы mixin'ов, что не нарушает принцип DRY.
                0
                Пробовал Omega, но идея группировать CSS-код по media queries, а не по структуре, мне не понравилась. Поэтому я отказался от Omega в пользу минималистичной базовой темы Boron и собственного starter kit'а.

                Можно не использовать отдельные файлы, предложенные омегой, а все писать в global.css, добавить туда media-queries самостоятельно.

                Bootstrap и подобные «CSS-фреймворки» не использую принципиально из-за того, что они идут вопреки семантике. Вместо того, чтобы присваивать определенным блокам нужные свойства, CSS-фреймворк декларирует все возможные сочетания свойств под несемантическими классами. Эти классы нужно вставить в HTML блоков, чтобы свойства применились к ним… Ужасно!

                Мне тоже поначалу претил такой подход. Но скорость разработки и простота дальнейшего обслуживания все перевесила. Drupal сам добавляет кучу классов ко всем компонентам, так что парочка дополнительных не помешает. Тем более, классы можно добавлять через админку Drupal, например, в выводе модуля Views задавать нужное количество колонок, которое занимает тот или иной компонент, не засоряя CSS. Сам CSS получается очень компактным, описывающим абстрактные классы. А верстальщик/редактор/админ сайта просто добавляет нужные классы нужным компонентам через админку, в любой момент может их менять, не прибегая к правке CSS.
                +1
                Также рекомендую следующие два модуля, для Bootstrap:
                Panels Bootstrap Layouts
                Views Bootstrap
                  0
                  Спасибо за статью, интересный подход к темизации
                    +1
                    Это не темизация а скоростное быстро-кепание типовых шаблонов сайтов (которых ~80% от всех) :)
                      –2
                      Ну что уж там, уже само использование какой-либо CMS это «скоростное быстро-клепание типовых сайтов».

                      На последнем скриншоте перед вами чистый белый лист и только от вас зависит, превратится ли он в типовой шаблон или будет уникальным.

                      Хотя статья да, про скоростное быстро-клепание :)
                    0
                    Nilard, а Foundation не пробовали? Они как раз быстрым прототипированием хвалятся.

                    Для Drupal есть базовая тема на Foundation в разработке, обещают скоро зарелизить.
                      0
                      В этой части статьи я рассказал о преимуществах и возможностях, которые дает Omega. Во второй части собираюсь рассказать о том, как прикрутить к ней Bootstrap. Таким же способом можно будет прикрутить и любой другой фреймворк. В принципе, ничего нового я не изобретаю, просто рассказываю, как можно воспользоваться уже имеющимся в Drupal и Omega функционалом. Bootstrap мне кажется самым зрелым, качественным и функциональным фреймворком, который оттачивается наиболее массивной аудиторией.
                        0
                        Вы не ответили на вопрос. :)
                          0
                          А, ну да :) Нет, не пробовал. Почему — ответ выше.
                          0
                          Прототипы собрать везде ± одинаково по скорости. Хотя поддержка в SCSS радует.
                          Мне больше www.profoundgrid.com нравится. Но тут на вкус и цвет… :)
                          foundation вроде как в лицензионнном не разрешается логотип убирать (или я путаю с кем то).
                        0
                        а также можно вставлять любой код без каких-либо ограничений
                        Удобно очень как, особено потом код искать везде где только можно. В допустимых значениях какого нить филда пхп код найти весело.
                        Суть — запросы в шаблоне — ХАРАМ!
                          +2
                          Сам использую Adaptivetheme для своих проектов, в ней больше гибких настроек, чем в Омеге, есть поддержка panels и Gpanels, и тоже можно гибко настраивать ширину блоков в различных регионов в зависимости от грида. + очень удобная настройка поведения блоков для различных разрешений.
                            +1
                            Плюсую за Adaptivetheme.

                            Никак не могу понять в чем прелесть Омеги, версия 3 плохо документирована в коде, возможностей не так много, 4ая только сегодня в бетту вышла.

                            Adaptivetheme прекрасно документирована в коде, имеет намного больше настроек в админке, предоставляет большую адаптацию к HTML5 (чего стоит только поддержка figcaption для поля с изображением) + не нарадуюсь css в сабтеме — оставлены все возможные виды классов и айди, генерируемые Друпалом!
                              0
                              Когда я использовал AdaptiveTheme, в ней особых настроек не было. Надо будет попробовать, спасибо.

                          Only users with full accounts can post comments. Log in, please.