Перейти к содержимому


Фотография
- - - - -

Верстаем J!Blank - первые шаги

рецепт шаблоны jblank рецепты документация

Сообщений в теме: 45

#1 Cheren-dow

Cheren-dow

Отправлено 09 October 2014 - 13:47

*
Популярное сообщение!

Из моего сообщения решил немного написать о Jblank + кому то это и будет являться демо версткой. В этой статье конечно все не затрону т.к сам еще всем не пользовался, но возможно кому то, все же, это будет полезно. Меньше слов - начинаем верстать с JBlank :)
 
1. Установка шаблона JBlank
Думаю тут описывать не стоит, обычная установка все с этим справятся. Скачать шаблон как вы наверно знаете можно на сайте jblank.pro или же скачать архив из github.
 
 
 
2. Подготовка.
Мы установили шаблон, применили и видим его в "действии".
hel_200x0.png
Теперь давайте отчистим все что сейчас выводится в шаблоне + базовый 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\
pma_200x0.png
 
После открываем файл конфигурации:

сайт\templates\jblank\templateDetails.xml
И вписываем новую папку которую мы скопировали в шаблон - fonts
6fz_200x0.png
С JS файлом uikit.min.js делаем все тоже самое что и с CSS только переносим в:
сайт\templates\jblank\js
Теперь нам осталось подключить css и js файлы, для этого открываем опять init.php и делам подключение как на скриншоте:
xg0_200x0.png
 
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>
Смотрим в браузере что у нас получилось и видим:
the_200x0.png
 
Теперь выведем модуль меню в нашу первую позицию и увидим что у нас беда не то что мы хотим получить
m1n_200x0.png
 
Что бы получить результат как в демо uikit. Нам нужно переопределить шаблон модуля меню, а для этого в папке
сайт\templates\jblank\html
Создаем папку mod_menu а в нее копируем файл из самого модуля:
\modules\mod_menu\tmpl\default.php
utz_200x0.png
И переименовываем его сразу в uikit.php. Теперь открываем и дописываем ul стили:
6ry_200x0.png
Теперь проверяем и не видим ни какого результата т.к нужно этот шаблон выбрать в модуле меню - выбираем и сохраняем
z79_200x0.png
Теперь если проверим все гуд, но ссылка не выделяется активной
rni_200x0.png
нужно опять немного поправить шаблон меню uikit.php открываем его и изменяем класс как на картинке
k6f_200x0.png
Теперь меню имеет нормальный вид.
 
Теперь выведем контент и заготовим еще один блок. Открываем 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>
Переходим в менеджер модулей и в новую позицию выводим например форму авторизации? переходим на сайт и видим:
mi2_200x0.png
Сразу можно заменить маленькую проблему, если сейчас отключить модуль авторизации верстка по плывет.
v9z_200x0.png
Исправить это можно следующим образом - 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

  • 11
Изображение
 

#2 SmetDenis

SmetDenis

Отправлено 09 October 2014 - 13:52

Шикарно! Спасибо!
  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#3 isay777

isay777

Отправлено 10 October 2014 - 11:13

Думаю кому то эта статья по может. Есть предложения и пожелания для продолжения пишите, со временем будем разбираться.

 
Хотелось бы увидеть пример-рецепт натяжки jbblank на какой-либо бесплатный html шаблон. Ну просто для примера натяжки на какой-нить дизайн.
  • 0
ХОСТИНГ для сайтов jbzoo (все попугаи)

#4 Cheren-dow

Cheren-dow

Отправлено 11 October 2014 - 13:37

isay777, можете дать ссылки на такие шаблоны? 


  • 1
Изображение
 

#5 isay777

isay777

Отправлено 12 October 2014 - 18:17

isay777, можете дать ссылки на такие шаблоны?

 
Ну любой который вам понравится. Я бы взял что-то вроде такого
 
или так
http://freebiesbug.c...-html-template/
http://freebiesbug.c...site-templates/
http://webdesign-fre...e-html-template

Сообщение отредактировал SmetDenis: 13 October 2014 - 09:53
Сбилась ссылка в сообщении

  • 0
ХОСТИНГ для сайтов jbzoo (все попугаи)

#6 Cheren-dow

Cheren-dow

Отправлено 13 October 2014 - 09:51

Я бы взял что-то вроде такого 

Практически то что есть сейчас выше только на uikit 


  • 0
Изображение
 

#7 SmetDenis

SmetDenis

Отправлено 15 October 2014 - 08:17

Если уж читаем первый топик, то про AJAX тут вообще ни слова.

За сим убрал этот неуместный оффтоп. ;)

PS Либо гуглим, либо создаем отдельный топик.
  • 2
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#8 rihter2001

rihter2001

Отправлено 17 March 2015 - 11:02

Денис, я наверно криворукий у меня нифига не получается прикрутить выпадающее меню на uikit   (((

<div class="uk-container uk-container-center">
<nav class="uk-navbar">
<a class="uk-navbar-brand uk-hidden-small" href="<?= $tpl->baseurl ?>"><img src="/images/logo.png" alt="" /></a>
<jdoc:include type="modules" name="main_menu" style="no" />
</nav>
</div>
<div class="">
<jdoc:include type="modules" name="slider" style="no" />	
</div>

а в mod_menu

<div class="uk-navbar-flip">
<ul class="uk-navbar-nav uk-hidden-small menu<?php echo $class_sfx;?>"<?php
	$tag = '';

	if ($params->get('tag_id') != null)
	{
		$tag = $params->get('tag_id') . '';
		echo ' id="' . $tag . '"';
	}
?>>
<?php
foreach ($list as $i => &$item)
{
	$class = 'item-' . $item->id;

	if (($item->id == $active_id) OR ($item->type == 'alias' AND $item->params->get('aliasoptions') == $active_id))
	{
		$class .= ' current';
	}

	if (in_array($item->id, $path))
	{
		$class .= ' active';
	}
	elseif ($item->type == 'alias')
	{
		$aliasToId = $item->params->get('aliasoptions');

		if (count($path) > 0 && $aliasToId == $path[count($path) - 1])
		{
			$class .= ' active';
		}
		elseif (in_array($aliasToId, $path))
		{
			$class .= ' alias-parent-active';
		}
	}

	if ($item->type == 'separator')
	{
		$class .= ' divider';
	}

	if ($item->deeper)
	{
		$class .= ' deeper';
	}

	if ($item->parent)
	{
		$class .= ' parent';
	}

	if (!empty($class))
	{
		$class = ' class="' . trim($class) . '"';
	}

	echo '<li' . $class . '>';

	// Render the menu item.
	switch ($item->type) :
		case 'separator':
		case 'url':
		case 'component':
		case 'heading':
			require JModuleHelper::getLayoutPath('mod_menu', 'default_' . $item->type);
			break;

		default:
			require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
			break;
	endswitch;

	// The next item is deeper.
	if ($item->deeper)
	{
		echo '<ul class="nav-child unstyled small">';
	}
	elseif ($item->shallower)
	{
		// The next item is shallower.
		echo '</li>';
		echo str_repeat('</ul></li>', $item->level_diff);
	}
	else
	{
		// The next item is on the same level.
		echo '</li>';
	}
}
?></ul></div>


  • 0

#9 Cheren-dow

Cheren-dow

Отправлено 17 March 2015 - 11:09

rihter2001, что именно у вас не получается? Вы в файле

сайт\templates\jblank\php\init.php 

подключили css и js uikit?


  • 0
Изображение
 

#10 Юра Мамонтов

Юра Мамонтов

Отправлено 17 March 2015 - 12:06

Доброго времени суток!

 

Подскажите, как правильно подключить стили zoo, jbzoo, widgetkit в этом шаблоне? По умолчанию ведь они все отключены?

 

неужто прописывать пути в init?


  • 0





Темы с аналогичным тегами рецепт, шаблоны, jblank, рецепты, документация

Click to return to top of page in style!