Мой опыт разработки под 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-файл. Если все сделано правильно и никаких ошибок в процессе создания не возникло, то наша тема готова! Можем теперь отыскать ее в списке тем и установить по умолчанию.
Далее начинается самое интересное.
Настройка макета
Переходим по ссылке Настройки нашей темы и видим несколько вкладок, в которых фреймворк 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. Главная страница с отключенными блоками и включенными сеткой и отладочными блоками
Для того, чтобы вернуть стандартные элементы на страницу (логотип, заголовок страницы, меню, сообщения, вкладки и прочее), воспользуемся модулем Delta Blocks: в его настройках включим необходимые нам компоненты, и уже в виде стандартных блоков разместим их на странице в любом месте. Это также избавляет нас от правки шаблона page.tpl.php, и позволяет «на лету» размещать, включать и отключать необходимые элементы.
Мы создали собственную полностью настраиваемую тему оформления без правки кода файлов основных шаблонов, и даже без подключения к серверу по FTP/SSH. Но теперь мы хотим добавить в нашу тему всю мощь Bootstrap. О том, как этого добиться, речь пойдет во второй части статьи.
ссылка на оригинал статьи http://habrahabr.ru/post/172213/
Добавить комментарий