Здравствуйте. Сегодняшний материал будет посвящен оптимизации процесса создания шаблонов для CMS Joomla!, причем версия здесь не играет особой роли. Я буду писать все применительно к последней текущей версии Joomla! 1.6, но все что будет сказано можно также применить и при разработке шаблонов для Joomla! 1.5.
Поговорим мы об увеличении производительности написания CSS для шаблонов Joomla! посредством использования CSS-препроцессора LESS. Замечу, что целью данной статьи не является ознакомление читателя с LESS. Все изложенное ниже подразумевает, что у вас уже есть знания базовой работа с LESS. Если нет, то можно сначала ознакомится с этим прекрасным инструментов на сайте проекта lesscss.org.
Отмечу что я давно использую LESS при верстке статических и динамических HTML, но все никак не находил возможности интегрировать его с CMS для которых я верстаю шаблоны (Joomla!, Drupal, WordPress, Magento). И поскольку большая часть работы на данный момент идет именно по CMS Joomla!, то я решил изначально интегрировать поддержку LESS в свои фреймворки для шаблоно Joomla! версии 1.5 и 1.6
Интеграция LESS в шаблоны Joomla!
Для того чтобы интегрировать подержку LESS в шаблоны Joomla! нам нужно решить какой именно компилятор мы будем использовать. Изначально LESS создавался на основе Ruby, позднее появился компилятор для PHP — lessphp, и позднее появился LESS для JavaScript — LESS.js. Собственно, если верстать статические HTML страницы, то лично для меня предпочтительнее JavaScript обработчик, поскольку не нужно использовать ни PHP ни Ruby. То есть фактически можно верстать без какого-либо сервера. Но в случае с шаблонами для Joomla! нам желательно все делать непосредственно с северной обработкой, поэтому для этого случае нам предпочтительнее использовать именно LESS компилятор для PHP. А чтобы его использовать нам нужно некоторые предварительные подготовительные работы в нашем шаблоне.
Несколько простых шагов
Итак, изначально, конечно-же, нужно загрузить все необходимое в наш шаблон. Как правило я поступаю так. В директории шаблона делаю отдельную папку «less», в итоге получаем вид пути templates/template_name/less. Здесь мы будем собирать все файлы .less для препроцессора.
Далее, нужно скачать LESS компилятор для PHP на сайте lessphp. И добавить его в ваш шаблон. Лично у меня в шаблоне структура такова: templates/template_name/lib/lessphp и в этой папке находится сам компилятор. Теперь. Нам нужно подключить компилятор и вызвать стили .less в шаблоне.
Руководствуясь инструкциями для PHP компилятора мы должны сделать следующее. В index.php нашего шаблона включить вызов компилятора, исходного файла и итогового файла. Но для начала, поскольку все все наши фалы находятся в пределах одной папки шаблона, руководствуясь правилами хорошего тона в коде, мы должны сделать объявление константы основного пути, для того чтобы безопасно вызвать и добавить нужные нам файлы. Для этого непосредственно в начале index.php шаблона, сразу после проверки доступа нужно добавить строку define( 'YOURBASEPATH', dirname(__FILE__) );, в итоге у вас получится такой вид начала шаблона:
<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); // определяем основной путь define( 'YOURBASEPATH', dirname(__FILE__) ); ?> |
Далее, нам следует непосредственно вызвать и обработать стили в .less файле. Допустим у вас есть основной файл разметки layout.less, вызвать и обработать его компилятором можно несколькими путями, а именно тремя, они указаны на сайте lessphp. Лично я предпочитаю использовать вариант, который позволяет скомпилировать итоговый .css файл и положить его в папочку, из которой уже шаблон и будет брать стили. То есть, если вы закоренелый ортодокс и привыкли чтобы у вас файл стилей шаблонов назывался template.css, то этот вариант вам подойдет. И еще он хорош тем, что позволяет в итоге получать нормальный чистый CSS файл, который удобно просматривать дебагером и нет путаницы с номерами строк. Итак, для вызова и компиляции мы будем использовать второй способ из предложенных на сайте lessphp:
// Подключаем компилятор require (YOURBASEPATH .DS."lib/lessphp/lessc.inc.php"); // Объявляем переменную которая будет вызывать и обрабатывать .less файл $less = new lessc(YOURBASEPATH .DS.'less/layout.less'); // Генерируем итоговый .css файл file_put_contents(YOURBASEPATH .DS.'css/style.css', $less->parse()); |
Собственно, все что было нужно для использования LESS мы сделал. Теперь остается только стандартным методом подключить нужный итоговый файл стилей в шаблон. Как видно из кода выше, итоговый файл у нас называется style.css, но вы можете его и назвать template.css в итоге получаем:
// Название файла пишу соответственно примера выше где итоговый файл называется style.css <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/style.css" type="text/css" /> |
Вот и все. На выходе вы имеете сгенерированный .css файл после обработки LESS синтаксиса со всеми его прелестями типа, переменных, наследования, использования mixing (даже не знаю как по-русски сформулировать)… Остается только отметить некоторые важные моменты.
Важные моменты
Думаю, что текста выше было и так непозволительно много, по-этому, лаконично и и по пунктам:
- Вы можете использовать привычные правила импорта других .less файлов в ваш основной файл стилей. При этом на выбор дается несколько вариантов синтаксиса:
@import "file"; @import 'file.less'; @import url("file"); @import url('file'); @import url(file);все это в итоге импортирует файл в основной, но при этом стоит отметить, что в любом случае парсер ищет не .css, а именно .less файл.
- Если вы когда-либо пользовались LESS под Ruby, то вам нужно усвоить что в PHP компиляторе есть отличие при разделении правил для mixin’ов, а именно аргументы разделяются с помощью «;», a не «,».
- И еще одно… Если вам нужны комментарии в итоговом .css файле, то вам стоит удалить функции очистки комментариев в lessc.inc.php. Допустим, LESS для JavaScript оставляет комментарии.
Остается лишь добавить, что описанный выше метод можно очень просто адаптировать под многие популярные CMS. Кроме того на сайте lessphp есть готовые плагины в частности для WordPress и Symfony FrameWork.