J!Blank — Чистый шаблон Joomla 2.5.x / 3.x

Для тех, кто делает уникальный дизайн и не любит лишнего в своих шаблонах.
А главное — не боится делать что-то своими руками.

Вместо вступления...

Что это и зачем?

J!Blank.proJ!Blank Template — это современный шаблон для Joomla CMS , ориентированный на разработку индивидуального дизайна с учетом последних стабильных «писков моды» из мира разработки фронт-энда.

Он подойдет вам только в одном случае — вы хотите «с нуля» разработать шаблон Joomla, но лень заморачиваться на мелочи и доделывать собственные пустышки, которые любовно дрейфуют из проекта в проект.

Внимание! Если не знаете, как пользоваться HTML+CSS, то, дабы избежать лишней головной боли — пожалуйста, не скачивайте и не пользуйтесь этим продуктом. Это сохранит и ваше, и мое время (узнавал, штука, оказывается, очень дорогая).

Краткий список фич

Ранее проект лежал на Joomla-Book.ru и долгое время был успешно мной заброшен, т.к. я переключился на JBZoo. Теперь он будет развиваться, но уже на более серьезной основе. Как и прежде, все держится на голом энтузиазме автора. Поэтому буду рад любой вашей поддержке (подробнее внизу сайта). СПАСИБО!

Где скачать?

Смотря что считать «последней» версией...

  • Последнюю стабильную версию можно скачать по кнопке Download в шапке сайта.
  • Последняя версия с какими-то экспериментами лежит на GitHub (watch & fork! ;))

Прочие старые версии ищите среди релизов в том же репозитории, например, для J!1.5-1.7

ChangeLog

История экспериментов с Github Atom

v3.0.6 — 14.11.2014

  • Новое для less
    • Отдельные файлы less для разных разрешений браузера. Старые файлы переименованы.
    • Популярные media queries выделены в переменные.
    • Актульный вариант для экранов с ретиной.
    • Комментарии изменены с блочных на строчные, чтобы вообще никогда не мешали в CSS.
    • Новые примеси для спрайтов, кнопок.
    • Мелкие фиксы и форматирование кода.
  • Для JavaScript и CSS
    • Экспериментальная фича. Объединение всех JS и CSS файлов.
    • CSS сжимается регулярными выражениями (best practice).
    • JS сжимается через сервис Google (опционально).
    • Для CSS учитываются пути - они конвертируются в абсолютные.

v3.0.5 — 17.10.2014

v3.0.4 — 20.09.2014

  • Подключение внешних файлов JS и CSS
  • Обновлен пример init.php и template.less
  • Минорные баги

v3.0.3 — 18.09.2014

  • Автокеш не плодит больше 2-х файлов CSS для кажого из компиляторов.
  • Мапинг стилей для pgeasy в хроме (нужно включить в браузере).
  • partial() умеет подключать файлы без расширения *.php
  • Режим отладки больше не обновляет css без явной необходимости.

v3.0.2 — 15.09.2014

  • Фиксы путей для картинок в url() и data-uri().
  • Теперь pgeasy — это рекомендованный less компилятор по умолчанию.
  • Пути для data-uri можно и нужно указывать относительно less файла.

v3.0.1 — 13.09.2014

  • Фикс инициализации SCSS препроцессора

v3.0 First Stable — 10.09.2014

  • Исправлены ошибки совместимости с J!2.5
  • Добавлена поддержка less.js (компиляция в браузере на лету).
  • В шаблон счетчиков добавлена метрика и простейшие параметры.

v3.0b1 — 08.09.2014

  • Первый публичный релиз.

v2.2.0 — 2012

  • Прародитель для J!1.5, 1.6, 1.7 и начальных 2.5

Документация

В общем...

Повторюсь, что стоит понимать — перед вами чистый шаблон, поэтому тут собрано только то, что необходимо для быстрого старта. Для удобства управления рутинными вещами внутри шаблона создается единственная переменная $tpl (одиночка JBlankTemplate). Она собирает в себе наиболее полезные методы и заранее подготовленные переменные. Об этом ниже.

Несмотря на обилие возможностей, шаблон ничего просто так не вырезает, не добавляет и не изменяет. Вся конфигурация идет только через вызов тех или иных методов переменной $tpl. По умолчанию это происходит в файле /php/init.php.

Установка

1 Способ (классика): В менеджере расширений Joomla выберите скачанный архив и нажмите «Установить». Если не получилось, то пользуйтесь вторым способом.

2 Способ (вручную): Скопируйте в <site root>/templates/jblank/,так чтобы в корне лежал templateDetails.xml. После этого в менеджере расширений зайдите в поиск, найдите шаблон и установите.

Пример конфигурации

Чтобы продемонстрировать простоту настройки J!Blank, я покажу вам пример из текущего сайта (J!Blank.pro). Заодно вы увидите удобства вызовов «по цепочке». Т.е если позволяет логика функции, то она вернет $this.

Пример init.php c JBlank.pro

<?php
// Код ниже примерный и может по мелкой мелочи не соответствовать действительности.
// Т.к. не в этом основной смысл листинга
// включаем нужные PHP-файлы require_once dirname(__FILE__) . '/libs/template.php'; $tpl = JBlankTemplate::getInstance(); // получаем объект $tpl (одиночка) $tpl ->css(array( // подключаем CSS фреймворк и less одновременно 'uikit.min.css', // не писать же грид с нуля, поэтому экономим время. 'template.less', // люблю его, ничего не могу поделать =) )) ->js(array( // подключаем свои JS файлы 'libs/libs.js', // тут у меня jQuery + мелкие плагины 'template.js', // тут инициализация библиотек )) ->excludeCSS(array( 'jbzoo\.css', // исключаем стили JBZoo, т.к. они на этом сайте в принципе не нужны. )) ->excludeJS(array( 'mootools', // исключаем стандартные скрипты 'jbzootools', // не нужно нагружать страницу функциями, которыми точно(!) не пользуемся 'com_zoo', // выкидывает скрипты Zoo 'responsive', // и их костыли для адаптивной верстки 'media\/jui\/js' // Joomla скрипты тоже мне не нужны )) ->generator('J!Blank Template') // заявляем о себе
->html5(true) // мелочи HTML5 в документе
->meta(array( // SEO хрень '<link href="' . $tpl->baseurl . '" rel="canonical" />', '<meta property="og:url" content="' . $tpl->baseurl . '" />', '<meta property="og:title" content="' . $tpl->doc->getTitle() . '" />', '<meta property="og:description" content="Для тех, кто ... " />', '<meta property="og:site_name" content="' . $tpl->doc->getTitle() . '" />', '<meta property="og:image" content="' . $tpl->baseurl . 'images/cover.png" />', // попытки улучшить верстку '<meta http-equiv="X-UA-Compatible" content="IE=edge" />', '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />', // верификация в поисковиках (ненавижу файлы в корне и лазить в DNS) '<meta name="google-site-verification" content="0WIhZ-bNk6pGsYR77wgNn-pRZbb7j9kTemjbmhx198M" />', '<meta name="yandex-verification" content="677c4eabb8658f6a" />', ));

Пример index.php с сайта JBlank.pro

<?php
defined('_JEXEC') or die;
require dirname(__FILE__) . '/php/init.php';
?><?php echo $tpl->renderHTML(); ?> <head> <jdoc:include type="head"/> </head> <body class="<?php echo $tpl->getBodyClasses(); ?>"> <?= $tpl->partial('counters'); ?>
<div class="jblank-wrapper"> <?= $tpl->partial('header'); ?>
<div class="jblank-main"> <div class="uk-container uk-container-center"> <div class="uk-grid">
<div class="uk-width-medium-1-4 jblank-sidebar" data-sticky_parent> <div class="sticky" data-sticky_column> <jdoc:include type="modules" name="left"/> </div> </div>
<div class="uk-width-medium-3-4 uk-article component">
<?= $tpl->partial('buttons'); ?>
<div class="clearfix"> <jdoc:include type="message"/> <jdoc:include type="component"/> </div>

<?= $tpl->partial('buttons'); ?>
</div> </div> </div> </div>
<div class="jblank-footer-spacer"></div> </div>
<?= $tpl->partial('footer'); ?>
</body> </html>

Особенно хочется отметить, что

  • Как вы заметили, я использую UIkit и меня ничего не сдерживает крутить шаблоном, как мне хочется. Для сравнения посмотрите Warp YOOtheme. Он тоже на этом фреймворке, но с ходу не понять, что, откуда и зачем. Добавить свой изумительный блок в существующую верстку — это уже отдельная задача.
  • Другие мои сайты, такие как Joomla-Book.ru и JBZoo.ru, намного сложнее по структуре, тем не менее, index.php выглядит примерно так же. Согласитесь, что в простом скелете проще разобраться. Не верите, посмотрите Protostar или Beez, или любой шаблон YOOtheme.
  • У меня чистый тег head без шума, пыли и грязи. А это значит, что я могу управлять мета информацией страницы полностью через API Joomla. И это очень и очень здорово, т.к. добрая часть этой информации приходит из недр других компонентов и мне не нужно делать хаки. Хардкод — вселенское зло.
  • Логически отдельные блоки подключаю через partial(). Поэтому общая разметка сайта не кажется громоздкой. Легко мог бы использовать шапку, счетчики и футер в других шаблонах, например для внутренней страницы с её особым дизайном.
  • На мой взгляд, тут должна быть только сетка основного шаблона. Если у вас это не так, то это печально… сложнее разрабатывать сайт.
  • Остальные шаблоны остались без изменений.
  • less можно подсмотреть по прямой ссылке к файлу. Я его делал впопыхах, так что не старался навести там порядок и мега-логичность.

В итоге — минимум головной боли с основным шаблоном и с будущими его обновлениями.

Работа с HTML-разметкой

Тег html + !doctype

Хоть и кажется, что тег html — прост, но, тем не менее, в нем могут содержаться довольно полезные функции. У нас реализованы следующие фичи:

  • Определение версии IE с помощью спецтегов-комментариев от Microsoft.
  • Добавляет класс no-js, который удаляется, если включен JS в браузере.
  • Генерирует различные атрибуты для поддержки OpenGraph, указания языка и направления письма.
<?php echo $tpl->renderHTML(); ?>
<head>
    <jdoc:include type="head"/>
</head>

На выходе получим следующее:

<!doctype html> 
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7 ie6" lang="en" dir="ltr"> <![endif]--> 
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="en" dir="ltr"> <![endif]--> 
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="en" dir="ltr"> <![endif]--> 
<!--[if gt IE 8]><!--><html class="no-js" xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" > <!--<![endif]-->
<head>
...

Генерация классов для тега «body»

Бывает полезно иметь какие-то классы, которые касаются только определенной страницы или девайса.

<body class="<?=$tpl->getBodyClasses(); ?>">
    ...
</body>

Будет добавлен набор классов, который в основном зависит от внешних переменных в _REQUEST. Содержимое будет примерно следующего характера (точный вариант зависит от версии).

class="itemid-101 lang-en com-zoo view-frontpage layout-frontpage task-none zoo-itemid-0 zoo-categoryid-0 device-ios-no device-android-no device-mobile-no device-table-no"

Включение вложенных шаблонов

К сожалению, объект JDocumentHTML не поддерживает ничего подобного, поэтому я добавил свою версию метода partial(). Подключаемые файлы должны лежать в папке /templates/jblank/partial/

Таким образом, удобно выносить счетчики, header и footer или делать отдельную верстку для внутренней страницы, предварительно обрамив условием $tpl->isFront()

<?php echo $tpl->partial('counters.php');?>

Переменные, которые нужно передать в шаблон, указываем массивом:

<?php echo $tpl->partial('header.php', array(
    'myVar' => 123
));?>
// или более лаконичный вариант <?=$tpl->partial('header', compact('myVar'));?>

Примечания

  • При подключении изменится $this внтури шаблона, т.к. реализация partial() работает в контексте JBlankTemplate.
  • Для удобства внутри подключенного шаблона автоматически будут объявлены переменные $tpl и $_this (ссылка на JDocumentHTML), поэтому нет смысла их указывать явно.
  • Внутри вложенных шаблонов можно так же проверять позиции и делать прочие вещи, как в обычном index.php, но только с помощью переменной $_this.
  • Если файл не был найден, то ошибки не будет - функция вернет null.
  • Для вывода не забывайте использовать echo.

Системные шаблоны Joomla

Для удобства заранее созданы такие системные шаблоны как:

  • component.php — для печати.
  • error.php — для вывода фатальных ошибок сайта.
  • offline.php — страница авторизации для выключенного сайта.
  • raw.php — для системных нужд компонентов.
  • pagination.php — постраничная навигация.
  • modules.php — chrome-функции для позиций.

В них можно найти функционал типичный большинству шаблонов Joomla с минимумом верстки и стилей. Исключение — шаблон error.php, который показывает дополнительную системную информацию в зависимости от режима отладки Joomla.

Стили CSS

С CSS все просто. Несколько предварительных системных стилей лежат в папке /templates/jblank/css/. Они будут подключаться с помощью одноименного метода в $tpl. Например, так:

<?php
// один файл
$tpl->css('template.css');
// либо несколько сразу $tpl->css(array( 'template.css', 'some-another.css' ));

// устанавливаем media
$tpl->css('component.css', 'print');

Заранее определены следующие CSS. Я их не объединял, чтобы вас не путать и проще было разобраться где, что.

  • editor.css — для wysiwyg редактора в панели управления.
  • error.css — вариант стилей для страницы с фатальной ошибкой.
  • offline.css — стили для отключенного сайта.
  • print.css — внешний вид версии для печати (взят bootstrap за основу).
  • reset.css — классический reset.css (normalize)
  • template.css — тут должны лежать стили вашего сайта.

Примечания

  • Если файл пустой, он не будет подключен.
  • Путь файла будет полным (вместе с http://). Как показывает практика — это более надежный вариант, т. к. у некоторых есть проблемы с путями и mod_rewrite.
  • В конце файла будут добавлены числа из даты модификации файла, чтобы стабильно обновлять кеш браузера при изменении CSS и быть уверенным на 99.9%, что у ваших посетителей всегда актуальный css в браузере.

Less/SCSS (auto build + cache)

Формат записи стилей в виде обычного CSS уже давно не актуален. Поверьте, намного удобнее использовать препроцессор, который возьмет красивый и логичный файл less/scss и «переварит» его в классический CSS формат.

Как JBlank работает c Less или SCSS?

J!Blank умеет прозрачно работать с препроцессорами CSS, при этом вам не нужно волноваться о кешировании, делать какие-то дополнительные действия вроде ручной компиляции или подключения обработчиков. Такая скучная работа давно решена за вас. Итак, используя $tpl подключите файл и все, больше ничег делать не нужно.

<?php
// Работа с Less
$tpl->css('template.less');
// или с SCSS $tpl->css('template.scss');
// или несколько разных файлов сразу // Каждое подключение будет обрабатываться отдельно! $tpl->css(array('layout.css', 'error.less', 'template.scss'));

// укажем media
$tpl->css('print.less', 'print');

Компиляция и прозрачное кеширование

Файл самостоятельно компилируется в CSS и подключается в <head> страницы. Если изменений не было, то подключится уже существующий файл из кеша — /cache/jblank/*.css . Он будет иметь статическое имя, которое генерируется на основе используемой библиотеки. Если less/scss изменился, то файл автоматически(!) будет обновлен. Так же в конце адреса CSS добавится дата модификации для 100%-ого сброса кеша в браузере.

Таким образом, компиляция происходит только один раз и при обновлении кода сайта не нужно чистить кеш и делать любые дополнительные действия! Сайт сам обновит все CSS при первом же входе.

Относительно Less…

На данный момент существуют две популярные PHP-библиотеки для компиляции less файлов от разных авторов — gpeasy.com, leafo.net и оригинальный less js. Все по-своему хороши. Выбрать нужную можно в настройках шаблона.

Версии leafo и gpeasy имеют дополнительную приятную фичу — конвертирование мелких картинок в строку base64, что может ускорить загрузку вашего сайта. Как это работает?

// base64 example
.example-smallImage-to-base64 {
  background: url('../images/test.png'); // пути относительно less файла превратятся в полные http -test1-background: data-uri('../images/test.png'); // файл из images для конвертации в base64 -test2-background: data-uri('..images/inner/test.png') 0 50% no-repeat; // вложенный в папку файл // -test3-background: data-uri('not-exists-image.gif'); // выдаст фатальную ошибку }

Важно знать о некоторых нюансах при работе с data-uri

  • Файлы размером более 32кб не конвертируются, т.к. IE есть с этим проблемы.
  • Работает только с PHP-библиотеками.

Версия lesscss.org добавляет в браузер специальный скрипт, который компилирует стили на ходу. Т.е. вы можете на одном мониторе открыть браузер, а на другом открыть редактор. Сразу после сохранение в редакторе браузер обновит CSS и вам даже не придется жать F5. Файлы проверяются раз в 1–2 секунды и, если что-то изменилось, то стили обновляются. Использовать такой live-JS особенно удобно во время разработки, но противопоказано на продуктивном сервере. Внимание, ведите разработку в режиме отладки, иначе вы не увидите ошибок и для просмотра изменений придется обновлять страницу.

Рекомендую использовать компилятор gpeasy, он стабильный и наиболее удобный.

Относительно SCSS…

На данный момент компиляция прекрасно работает, но, тем не менее, решение является, на мой взгляд, экспериментальным. Для сборки используется библиотека от leafo.net

Примечания

  • ВАЖНО! Ниже обязательно прочитайте про режим отладки.
  • Оператор импорта по умолчанию настроен на папку jblank/less или jblank/scss.
  • Если в результате компиляции будет пустой файл, то он не подключится.
  • Каждое подключение через $tpl->css() компилируется отдельно, поэтому импорт из первого файла во втором виден не будет. Подключены они будут так же, как отдельные файлы CSS из кеша.
  • Рекомендую использовать оператор импорта (@import)
  • Сжатие реализовано на уровне компилирующей библиотеки, а не JBlank.

JavaScript

Для включения JavaScript файла в документ используйте одноименный метод. Файлы берутся из папки /js/

<?php
// один файл
$tpl->js('template.js');
// или несколько файлов
$tpl->js(array(
'libs/jquery.min.js',
'template.js'
));

template.js

Файл создан специально для ваших собственных нужд и заранее содержит необходимый минимум практически для любого сайта.

  • Проверка существования jQuery и переопределение переменной $ только для этого файла без использования $.noConflict()
  • Функция для отладки dump() — короткая обертка вокруг длинного console.log(). Показывает тип переменной и проверяет существование объекта console на случай, если она не существует (для старых браузеров).
  • Сокрытие сообщений Joomla (крестик в углу из bootstrap).
  • Убирает класс no-js и добавляет js-ready. Удобно отслеживать раннюю загрузку страницы ДО инициализации JS. Также можно стилями выделить отключенный JavaScript.

Примечания

  • Файлы подключаются как есть, без модификации.
  • Если файл пуст или не существует, он не подключится.
  • В конце ссылки на JS добавится дата модификации для антикеша в браузере.

Исключаем CSS & JS (эксп)

Экспериментально на уровне шаблона JBlank можно отключать стили и скрипты, которые добавляют прочие компоненты и модули Joomla. Фича работает не всегда, т.к. некоторые «кривые» расширения подключают свою статику в обход API Joomla либо делают это с помощью плагинов уже после того, как сработает шаблон. Тем не менее, на простых сайтах это позволяет упростить работу со скриптами и включать их именно в том порядке, как вам нужно.

JS и CSS файлы отключать можно, указав имя файла, а лучше — регулярное выражение.

<?php
$tpl
->excludeCSS(array(         'jbzoo\.css', // некоторые предпочитают верстать сами     ))
    ->excludeJS(array(         'mootools', // убираем mootools         'media\/jui\/js' // убираем стандартные скрипты Joomla     ));

Внимание! ИСПОЛЬЗУЙТЕ ИСКЛЮЧЕНИЯ С УМОМ! Скрипты и стили подключаются не от хорошей жизни, а для какого-то функционала на страницах front-end. Таким образом, можно легко сломать работу сайта.

Мобильные устройства

Для работы с мобильными устройствами у меня запасено пару удобств.

CSS3 Media Queries

Обычное дело для адаптивного дизайна — написать несколько условий для разных расширений. Для этого в файлах *.css и *.less подготовлены места, где вы можете написать стили для своего дизайна. Особенно это удобно делать в less файлах, т.к. они импортируются в основной и лежат отдельно.

Заранее подготовлены такие файлы-пустышки, как:

  • media/print.less — Для печатных устройств.
  • media/768.less — Телефоны и старые планшеты с разрешением 768px и выше.
  • media/992.less — Десктопы и планшеты с нормальным разрешением 992px и выше.
  • media/1200.less — Десктопы и планшеты с высоким разрешением 1200px и выше.
  • media/retina.less — Для устройств с экраном-ретина.

Экраны разрешением менее чем 768px будут использовать стили сайта по умолчанию.

PHP MobileDetect

Практика показывает, что не всегда media query «решает». Иногда хочется кардинально изменить разметку для оптимизации загрузки сайта или более удобной верстки. Переменная $tpl внутри себя содержит популярную библиотеку MobileDetect, которая на основе заголовка http_user_agent умеет определять тип устройства.

С помощью функций isAndroidOS / isMobile / isTablet / isiOS можно более-менее определить тип устройства. Кстати, на основе их работы формируются названия классов c постфиксом yes/no в теге body

  • device-ios-* — Устройства iOS.
  • device-android-* — Устройства с OS Android.
  • device-mobile-* — Мобильное ли устройство это.
  • device-table-* — Говорит, что это планшет, но исключает мобильное устройство.

Более тонкие проверки

Полный список функций смотрите на официальном сайте.

<?php
// произвольная проверка if ($tpl->mobile->isOpera()) { // разметка для оперы }

Примечания относительно мобильных устройств

  • Каждый из двух способов хорош по-своему. Первый наиболее нативный, но второй позволяет менять разметку сайта.
  • Не стоит доверять mobileDetect на 100%, т.к. useragent легко подделать и он может измениться proxy-сервером.

Произвольный meta в head

Зачастую для верификации сайта или иконок apple используются теги meta внутри head. Иногда их нужно показывать «по случаю». Есть простейшее API для работы с этими тегами.

<?php
$tpl->meta('<meta http-equiv="X-UA-Compatible" content="IE=edge" />');
// или несколько сразу $tpl->meta(array( '<meta name="viewport" content="width=device-width, initial-scale=1">', '<meta name="google-site-verification" content="... google verification hash ..." />', ));

При подключении проверяется уникальность, поэтому два одинаковых тега не будут включены.

Переменные и методы $tpl

Как было замечено выше, $tpl в виде публичных свойств агрегирует в себе разные полезные переменные и функции. Это может заметно сократить привычный php код в шаблонах и избавить вас от рутины.

Переменные

  • app (JApplicationSite) — один из главных и важнейших объектов Joomla.
  • baseurl (String) — по факту, это путь до главной страницы сайта в браузере с учетом директории.
  • config (Joomla\Registry\Registry) — основные настройки Joomla.
  • css (String) — http-путь до папки css.
  • cssFull (String) — абсолютный путь до css.
  • dir (String) — направление языка (ltr, rtl).
  • doc (JDocumentHTML) — объект генерируемого HTML-документа.
  • img (String) — http путь до папки картинок.
  • imgFull (String) — абсолютный путь до картинок.
  • js (String) — http путь до папки JavaScript.
  • jsFull (String) — абсолютный путь до JavaScript.
  • lang (String) — текущий язык.
  • langDef (String) — язык по умолчанию.
  • less (String) — http-путь до папки стилей less.
  • lessFull (String) — абсолютный путь до стилей less.
  • menu (JMenuSite) — меню вашего сайта.
  • mobile (JBlankMobileDetect) — библиотека mobileDetect.
  • params (Joomla\Registry\Registry) — ссылка на настройки шаблона JBlank.
  • partial (String) — абсолютный путь до подшаблонов.
  • path (String) — http-путь до корневой папки шаблона.
  • pathFull (String) — абсолютный путь до папки шаблона.
  • request (Joomla\Registry\Registry) — полезные переменные из внешнего запроса к сайту.
  • scss (String) — http путь до папки scss.
  • scssFull (String) — абсолютный путь до scss.
  • url (JUri) — текущий http-адрес сайта.
  • user (JUser) — текущий пользователь Joomla.

* этот список не претендует на полноту. Все зависит от версии J!Blank — делайте дамп $tpl.

Прочие функции $tpl

Перечислять те, что были выше, нет никакого смысла, поэтому ниже только те, что остались без внимания.

  • generator — установит имя генератора сайта, если указать null, то это отключит вывод.
  • html5 — режим документа HTML5. Меняет вывод некоторых системных тегов в head.
  • isAndroidOS / isMobile / isTablet / isiOS — алиасы соответствующих функций библиотеки mobileDetect.
  • renderHead — используется только для шаблона error.php, т.к. Exception полностью чистит шапку и накопленные настройки.
  • request — доступ к внешним переменным сайта на основе Joomla API.
  • isDebug — показывает, включен ли режим отладки Joomla.
  • isError — показывает, есть ли сообщения Joomla для специальной позиции type=message
  • isFront — текущая страница главная или нет (на основе пункта меню Joomla с меткой «по умолчанию»).
  • debug — насильно включить или отключить режим отладки шаблона (передать true/false).

Режим отладки

Режим отладки нужен для удобства при разработке. Включается он вместе с отладкой Joomla (в основных настройках). Что это нам дает на практике?

Если включена отладка, то

  • Файл CSS на выходе не будет сжат (т. е. иметь красивые переносы и отступы).
  • Компилятор less pgEasy добавит мапинг стилей. Предварительно нужно включить фичу в хроме.
  • Шаблон error.php будет показывать системную информацию вместо пользовательского текста (красивый backtarce и текст ошибки).
  • Joomla подключит дополнительные файлы CSS и JS для того, чтобы оформить системный профайлер.

В режиме отладки шаблон error.php может показать вам дамп некоторых системных переменных, таких как $_GET, $_POST, $_SESSION. Значения этих переменных полностью управляются фреймворком Joomla, но мой опыт подсказывает, что иногда полезно знать, что творится в оригинальном реквесте, дабы понять корень зла ошибки.

Переменные выводятся с помощью JBDump (моя версия замены print_r), поэтому рекомендую подключить этот класс.

Если отладка выключена, то

  • Файл css на выходе будет иметь сжатый вид для дополнительной экономии трафика.
  • Страница ошибок будет показывать обыденный текст Joomla (мол, проверьте ссылку в браузере и расскажите администратору).

Внимание! Не включайте режим отладки Joomla на продакшене! Это может сильно замедлить ваш сайт и не только от препроцессора CSS, но и других установленных расширений.

Связанные проекты

Конечно же, не все в JBlank написано с чистого листа. Ниже попробую пересказать список сторонних проектов, чей опыт я использовал у себя. JBlank — это собирательный образ, который понахватал разных мелочей из разных проектов, поэтому только перепишу набор ссылок без конкретики. Кому любопытно — пущай ковыряют.

Другие интересные сторонние и полезные наработки можете посмотреть на нашем форуме.

FAQ

Какие системные требования?

Шаблон JBlank должен стабильно работать, если

  • Joomla CMS 2.5.x или 3.x
  • PHP 5.3.x и выше (требования библиотек + Joomla)
  • У PHP есть доступ на запись к папке /cache/
  • Желательно, но не обязательно использовать mbString.

Эти условия выполняются на большинстве современных хостингов. Если это не так, то поздравляю! У вас музейный экспонат, а не сервер ;)

Это быстрый шаблон?

О, да! Быстрее не бывает! Он же чистый!

Тестирования показали, что инициализация $tpl и последующая работа с шаблоном через его методы занимает примерно 5–15 миллисекунд. Никаких запросов в базу данных. По сравнению с остальным кодом Joomla и прочими любыми расширениями — это можно приравнять к нулю.

Я не учитываю компиляцию Less и SCSS, т.к. если вы затолкаете весь оригинальный bootstrap + uikit + compas — все будет дичайше тормозить по очевидной причине вашего слабоумия. Используйте готовые min файлы =)

Почему шаблон пустой?

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

Планируется ли демо верстка?

Пока что нет, т.к это в корне ломает идею чистого шаблона. НО если чего-то не хватает — предлагайте!

Скорее всего, никаких дополнительных стилей, вроде сетки или колонок, не будет. Вопрос решается подключением любого CSS фреймворка и нескольким тегами с классами. Тем не менее все обсуждаемо — предлагаейте, holywarModeOn.

Как обновить?

По умолчанию, обновления не предусмотренны.

  • Если вы хотите обновиться с версии 2.2.0 до 3.x, то боюсь что не получится. Разница слишком велика.
  • Если речь идет о версиях 3.x, то в основном стоит обратить внимание на папку /php/libs/*.php. Конретную разницу можно увидеть на GitHub (щелкаем по уникальному номеру ревизии).

Есть ли адаптивная верстка?

Нет. Только удобства для создания своего адаптивного дизайна. RTFM, plz.

Есть Bootstrap или UIkit ?

Без проблем. Скачиваете последнюю версию нужной библиотеки (желательно min.css) и подключаете с помощью метода css().

<?php
$tpl->css('uikit.min.css');
// либо хардкорный вариант с less
$tpl->css('bootstrap/bootstrap.less');

Этот сайт сделан именно так — ничего лишнего, поэтому легко поддерживать в будущем.

Как добавить новую позицию?

Откройте файл templateDetails.xml и добавьте внутрь тега positions свой тег

<positions>
    <position>my-position</position>
    <position>top</position>
    ...
<positions>

Далее в нужном месте шаблона index выведите позицию

<jdoc:include type="modules" name="my-position"/>

Подробности читайте в документации Joomla

Прочая лабуда

Лицензия и дисклаймер

Это проект Open Source GNU GPL. А значит, распространяется бесплатно, «как есть» и каким угодно способом. Только чур мои копирайты не затирать — это будет пошло и мерзко с вашей стороны. Гарантирую, что они вам никак не помешают. Код открытый, меняйте что хотите. Прошу только ссылаться на меня как изначального автора и кому-нибудь рекомендовать.

Скорее всего, там есть баги и я их исправлю. Когда? Как только появится свободная минутка и желание. Но если баги вам что-то поломали, мне будет ой как стыдно… но не более… Так что используйте НА СВОЙ СТРАХ И РИСК!

Изначально я делал шаблон для себя и поэтому не закладывал в него никакого злого умысла — «зуб даю»!

Хоть я ниже призываю всех к донату, но на самом деле мне вполне хватает того, что я им сам пользуюсь. Просто решил поделиться наработками и оформить все эстетично. Этот момент позволяет мне решать/игнорировать ваши проблемы по своему желанию и обновлять скрипт на свое усмотрение.

Кто есть автор?

Зовут меня Денис Сметанников (ога, такая вот вкусная и добрая русская фамилия). В интернетах наиболее известен как SmetDenis (sm_denis). По совместительству главный бармалей в JBZoo CCK — проект, который я начал как «JustForFun», а потом понеслось и сейчас зафиксировано более 40 000 инсталяция и более 5 000 реально работающих.

Помимо Joomla видал много всякого, программировал много разного и сложного, тыкал языки программирования со школы (даже писал прошивки для микросхем на ASM’е). Сайтами занимаюсь с далекого-лохматого 2005 (друг подсадил меня на них на первом курсе ФизФака). Довольно долго работал старшим разработчиком в Sibirix.ru, где в основном занимался нетривиальным хардкором на Zend, Yii и, прости меня хосподи, 1C-Bitrix.

А еще мне иногда помогают очень хорошие ребята из команды JBZoo. Ну и морально поддерживают — все кому не лень. В этом плане отдельное спасибо моей супруге Катрине =)

Ваша поддержка — награда

Если вам понравились мои старания, то

  • Форкайте и добавляйте в избранное на GitHub
  • Кидайте ссылку другим разработчикам сайтов.
  • Кликайте лайки, рекомендуйте другим и все такое в этом духе.
  • ---
  • А если вы напишите о J!Blank где-нибудь обзор хотя бы в 2 предложения — для меня это будет просто невероятный праздник и лучше всего остального вместе взятого!

J!Blank.pro — это некоммерческий проект, а значит:

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

Любая помощь — это добрый шаг с вашей стороны, вы становитесь хотя бы немного, но соавтором проекта и непосредственным образом влияете на него. Именно ваши отзывы играют роль.

Тем, кто хочет поддержать разработку и боевой дух не только морально, но и материально — переводите любые символические суммы и любым методом ниже, либо приобретайте наш конструктор контента :)

  • Yandex. Money
    • 410011049429166
  • WebMoney
    • WMR — R209068737073
    • WMU — U729558192154
    • WMZ — Z429092735408
    • WME — E398649663546

Есть вопрос? Давай-давай!

Если вы нашли баг или хотите предложить фичу, или у вас есть любой другой вопрос по J!Blank, то

Не гарантирую, что отвечу, но прочитать — обещаю.