1. Установка шаблона JBlank
Думаю тут описывать не стоит, обычная установка все с этим справятся. Скачать шаблон как вы наверно знаете можно на сайте jblank.pro или же скачать архив из github.
2. Подготовка.
Мы установили шаблон, применили и видим его в "действии".
Теперь давайте отчистим все что сейчас выводится в шаблоне + базовый CSS.
Переходим в index.php шаблона и удаляем все что находится в теге body. Теперь главный файл шаблона имеет следующий вид.
<?php
/**
* J!Blank Template for Joomla by JBlank.pro (JBZoo.com)
*
* @package JBlank
* @author SmetDenis <admin@jbzoo.com>
* @copyright Copyright (c) JBlank.pro
* @license http://www.gnu.org/licenses/gpl.html GNU/GPL
* @link http://jblank.pro/ JBlank project page
*/
defined('_JEXEC') or die;
// init $tpl helper
require dirname(__FILE__) . '/php/init.php';
?><?php echo $tpl->renderHTML(); ?>
<head>
<jdoc:include type="head" />
</head>
<body class="<?php echo $tpl->getBodyClasses(); ?>">
</body>
</html>
Теперь подчистим базовые стили в less файле который расположен тутсайт\templates\jblank\less\template.lessУдаляем стили для body
body {
background: #F0F0F0;
margin: 0;
padding: 0;
.component-wrapper {
padding: 30px 50px 50px;
margin: 30px auto;
background: #fcfcfc;
border: 1px solid #aaa;
.size(800px, 'auto');
.box-shadow(0 3px 10px #bbb);
.border-radius(6px);
.gradient(#ddd, #fff);
}
}
Если не используем media запросы тоже удаляем их@media (min-width: 768px) {
@import "media/768.less";
}
@media (min-width: 992px) {
@import "media/992.less";
}
@media (min-width: 1200px) {
@import "media/1200.less";
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (max--moz-device-pixel-ratio: 1.5) {
@import "media/retina.less";
}
Кстати, все файлы для шаблона подключаются в init.php он расположен тут:сайт\templates\jblank\php\init.phpЕго тоже можно немного подчистить, например если не используется верстка для доп. устройств. Открываем init.php и удаляем:
// mobile detect using (just for example!)
if ($tpl->isMobile()) {
$tpl->css('media-mobile.less'); // css only for mobiles
} elseif ($tpl->isTablet()) {
$tpl->css('media-tablet.less'); // css only for tablets
}
На данный момент это нам не нужно, так зачем ему там быть. Точно так же можно сделать и с мета тегами'<meta name="google-site-verification" content="... google verification hash ..." />', '<meta name="yandex-verification" content="... yandex verification hash ..." />',Если вы подтверждаете сайты через файлы в корне сайта тогда эти 2 тега тоже можно удалить.
Так же в файле:
сайт\templates\jblank\templateDetails.xmlудаляем 2 позиции по умолчанию.
<position>pre_component</position> <position>post_component</position>
3. Подключение "дополнений"
Не стал ни чего придумывать и решил сделать немного верстки с uikit. Скачиваем архив с сайта, в архиве 3 папки.
Из папки CSS берем например файл uikit.gradient.min.css и переносим его в наш шаблон в папку:
сайт\templates\jblank\cssДалее переносим папку со шрифтами в корень нашего шаблона
сайт\templates\jblank\
После открываем файл конфигурации:
сайт\templates\jblank\templateDetails.xmlИ вписываем новую папку которую мы скопировали в шаблон - fonts
С JS файлом uikit.min.js делаем все тоже самое что и с CSS только переносим в:
сайт\templates\jblank\jsТеперь нам осталось подключить css и js файлы, для этого открываем опять init.php и делам подключение как на скриншоте:
4. Верстаем
Рассказывать о всех возможностях uikit я не буду, все сами можете прочитать на их сайте. Открываем файл index.php и вписываем в тег body следующее:
<div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">
<nav class="uk-navbar uk-margin-large-bottom">
<a class="uk-navbar-brand uk-hidden-small" href="<?= $tpl->baseurl ?>">J!Blank</a>
<jdoc:include type="modules" name="top-menu" style="no" />
</nav>
</div>
Сделали ссылку(бренд) на главную и объявили свою позицию которую нужно так же вписать в файл конфигурации:сайт\templates\jblank\templateDetails.xmlв <positions> вписываем <position>top-menu</position> и получаем
<positions>
<position>top-menu</position>
</positions>
Смотрим в браузере что у нас получилось и видим:
Теперь выведем модуль меню в нашу первую позицию и увидим что у нас беда не то что мы хотим получить
Что бы получить результат как в демо uikit. Нам нужно переопределить шаблон модуля меню, а для этого в папке
сайт\templates\jblank\htmlСоздаем папку mod_menu а в нее копируем файл из самого модуля:
\modules\mod_menu\tmpl\default.php
И переименовываем его сразу в uikit.php. Теперь открываем и дописываем ul стили:
Теперь проверяем и не видим ни какого результата т.к нужно этот шаблон выбрать в модуле меню - выбираем и сохраняем
Теперь если проверим все гуд, но ссылка не выделяется активной
нужно опять немного поправить шаблон меню uikit.php открываем его и изменяем класс как на картинке
Теперь меню имеет нормальный вид.
Теперь выведем контент и заготовим еще один блок. Открываем index.php и после тега nav вставляем следующее:
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-3-10">
<jdoc:include type="modules" name="left-block" style="xhtml" />
</div>
<div class="uk-width-medium-7-10">
<?php if ($tpl->isError()) : ?>
<jdoc:include type="message" />
<?php endif; ?>
<jdoc:include type="component" />
</div>
</div>
В файле конфигурации объявляем новую позицию и код имеет следующий вид<positions>
<position>top-menu</position>
<position>left-block</position>
</positions>
Переходим в менеджер модулей и в новую позицию выводим например форму авторизации? переходим на сайт и видим:
Сразу можно заменить маленькую проблему, если сейчас отключить модуль авторизации верстка по плывет.
Исправить это можно следующим образом - index.php имеет вид:
<?php
/**
* J!Blank Template for Joomla by JBlank.pro (JBZoo.com)
*
* @package JBlank
* @author SmetDenis <admin@jbzoo.com>
* @copyright Copyright (c) JBlank.pro
* @license http://www.gnu.org/licenses/gpl.html GNU/GPL
* @link http://jblank.pro/ JBlank project page
*/
defined('_JEXEC') or die;
// init $tpl helper
require dirname(__FILE__) . '/php/init.php';
?><?php echo $tpl->renderHTML(); ?>
<head>
<jdoc:include type="head" />
</head>
<body class="<?php echo $tpl->getBodyClasses(); ?>">
<div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">
<nav class="uk-navbar uk-margin-large-bottom">
<a class="uk-navbar-brand uk-hidden-small" href="<?= $tpl->baseurl; ?>">J!Blank</a>
<jdoc:include type="modules" name="top-menu" style="no" />
</nav>
<div class="uk-grid" data-uk-grid-margin>
<?php if ($this->countModules('left-block')) : /** Выводим этот блок если в позиции что то есть */ ?>
<div class="uk-width-medium-3-10">
<jdoc:include type="modules" name="left-block" style="xhtml" />
</div>
<?php endif; ?>
<!-- В зависимости от показа модулей в позиции left-block изменяем классы -->
<div class="uk-width-medium-<?= ($this->countModules('left-block')) ? '7-10' : '1-1'; ?>">
<?php if ($tpl->isError()) : ?>
<jdoc:include type="message" />
<?php endif; ?>
<jdoc:include type="component" />
</div>
</div>
</div>
</body>
</html>
Теперь для удобства можно воспользоваться API шаблона и вынести левый блок в отдельный шаблон.В папке:
сайт\templates\jblank\partialСоздаем файл left-block.php и ложим туда содержимое из index.php
<?php if ($this->countModules('left-block')) : /** Выводим этот блок если в позиции что то есть */ ?>
<div class="uk-width-medium-3-10">
<jdoc:include type="modules" name="left-block" style="xhtml" />
</div>
<?php endif; ?>
В index.php этот удаляем и заместо этого пишем:<?= $tpl->partial('left-block'); // Подключаем наш шаблон ?>index.php теперь выглядит так:<?php
/**
* J!Blank Template for Joomla by JBlank.pro (JBZoo.com)
*
* @package JBlank
* @author SmetDenis <admin@jbzoo.com>
* @copyright Copyright (c) JBlank.pro
* @license http://www.gnu.org/licenses/gpl.html GNU/GPL
* @link http://jblank.pro/ JBlank project page
*/
defined('_JEXEC') or die;
// init $tpl helper
require dirname(__FILE__) . '/php/init.php';
?><?php echo $tpl->renderHTML(); ?>
<head>
<jdoc:include type="head" />
</head>
<body class="<?php echo $tpl->getBodyClasses(); ?>">
<div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">
<nav class="uk-navbar uk-margin-large-bottom">
<a class="uk-navbar-brand uk-hidden-small" href="<?= $tpl->baseurl; ?>">J!Blank</a>
<jdoc:include type="modules" name="top-menu" style="no" />
</nav>
<div class="uk-grid" data-uk-grid-margin>
<?= $tpl->partial('left-block'); // Подключаем наш шаблон ?>
<!-- В зависимости от показа модулей в позиции left-block изменяем классы -->
<div class="uk-width-medium-<?= ($this->countModules('left-block')) ? '7-10' : '1-1'; ?>">
<?php if ($tpl->isError()) : ?>
<jdoc:include type="message" />
<?php endif; ?>
<jdoc:include type="component" />
</div>
</div>
</div>
</body>
</html>
Проверяем и схватываем ошибку Fatal error: Call to undefined method JBlankTemplate::countModules() inВсе дело в том что в дополнительных шаблона вместо $this нужно использовать $_this. Переходим в шаблон left-block.php
сайт\templates\jblank\partial\left-block.phpИ меняем условие и получаем следующий код шаблона:
<?php if ($_this->countModules('left-block')) : /** Выводим этот блок если в позиции что то есть */ ?>
<div class="uk-width-medium-3-10">
<jdoc:include type="modules" name="left-block" style="xhtml" />
</div>
<?php endif; ?>
Все теперь ошибка исчезла и все отлично работает. На этом пока информации хватит есть что по делать ну и конечно советую читать документацию. Чуть позже думаю будем дописывать и получим простенький патч с демо версткой для чистого шаблона.Думаю кому то эта статья по может. Есть предложения и пожелания для продолжения пишите, со временем будем разбираться.
Сообщение отредактировал SmetDenis: 27 October 2015 - 08:00
Вопрос решен
