Joomla 2.5 + bootstrap: faq по разработке шаблонов

Тема в разделе "Создание шаблона", создана пользователем shurikkan, 15.03.2014.

?

Как вы относитесь к Twitter Bootstrap Framework?

  1. Это очень удобный и гибкий CSS-фреймворк

    44.4%
  2. Bootstrap - инструмент для быстрой штамповки "одинаковых" сайтов

    22.2%
  3. Мне по барабану, я не пользуюсь Bootstrap

    33.3%
  1. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    Всем привет.
    Думаю, тема будет полезной и в будущем мы сможем её развивать.

    Итак, для тех, кто уже знаком с Joomla 3 не секрет, что эта версия уже включает в себя инструменты для создания шаблонов под мобильные девайсы. Такая возможность появилась благодаря использованию Bootstrap, который включён уже в штатную сборку CMS.

    Ну а пока стабильная версия Joomla 3 ещё не вышла - в этой теме будем обсуждать разработку шаблонов с использованием Twitter Bootstrap на Joomla 2.5 :)
    1. Качаем Bootstrap.

    Идём на сайт разработчика и скачиваем пакет Bootstrap 2 (например, 2.3.2).
    Нам нужен обычный архив (по состоянию на 15.03.2014 - это самая левая ссылка на странице - Bootstrap).
    Так же можно взять архив на русскоязычном сайте проекта.
    2. Подключаем Bootstrap к шаблону Joomla

    Распаковываем содержимое архива, скаченного в пункте 1.
    Получаем 3 папки:
    • css - папка с основными стилями и стилями для адаптивной вёрстки
    • fonts - шрифты, используемые в шаблоне при подключении Bootstrap
    • js - скрипт для работы всплывающих окон, JS-слайдеров и т.д.

    Устанавливаем на сайт любую болванку шаблона для Joomla 2.5 (я пользуюсь своей).

    Далее нам нужно поместить файлы из архива Bootstrap в соответствующие папки нашего шаблона. Открываем каталог нашего сайта (FTP), файл index.php.

    Подключаем CSS и JS файлы Bootstrap в файл нашего шаблона: (templates/{название-шаблона}/index.php)
    Код (html):
    1. <!-- Основной файл стилей -->
    2. <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" rel="stylesheet" type="text/css" media="screen" />
    3.  
    4. <!-- Подключаем, если будет используеться адаптивная вёрстка -->
    5. <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" media="screen" />
    6.  
    7. <!-- Подключаем, если будут использоваться стандартные всплывающие окна, слайдеры и т.д. -->
    8. <script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/jquery.js" type="text/javascript"></script>

    Вуаля: теперь мы можем использовать в своём шаблоне классы из Twitter Boostrap Framework!

    3. Переопределяем шаблоны вывода

    Как мы знаем (я надеюсь, что и Вы тоже! :)), в админке Joomla можно управлять внешним видом макета блога категории, главной страницы сайта ("Избранные материалы") и т.д. В том числе, можно изменять количество колонок, в которых будют выводиться наши материалы. По умолчанию, для разбивки на колонки используются стандартные классы Joomla (cols-N, col-N...). Но раз уж мы используем Bootstrap, давайте сделаем вёрстку стандартными средствами этого фреймворка (row\row-fluid, spanN).

    3.1 Шаблон главной страницы ("Избранные материалы")

    В штатной сборке Joomla! CMS 2.5 шаблон вывода главной страницы сайта ("Избранные материалы") находится по адресу:
    Копируем этот файл в папку нашего шаблона:
    Далее ищем определение переменных $rowcount и $row. Сразу после них вписываем следующий блок:
    Код (PHP):
    1. switch($this->columns) {
    2.     case '1': $columns = ' span12';
    3.     break;
    4.     case '2': $columns = ' span6';
    5.     break;
    6.     case '3': $columns = ' span4';
    7.     break;
    8.     case '4': $columns = ' span3';
    9.     break;
    10.     case '5': $columns = ' span2';
    11.     break;
    12.     case '6': $columns = ' span2';
    13.     break;
    14.     default: $columns = ' span1';
    15. }

    Этот код берёт кол-во колонок из настроек в админке и в зависимости от этого формирует класс колонки Bootstrap (span)... Я не стал заморачиваться с расчётом точных процентов, думаю, что большинству будет достаточно и этого. Хотя, в теме можно пообсуждать и другие варианты!

    Находим начало вывода самого блока материала:
    Код (PHP):
    1. <div class="items-row cols-<?php echo (int) $this->columns;?> <?php echo 'row-'.$row ; ?>">
    2. <?php endif; ?>
    3.     <div class="item column-<?php echo $rowcount;?><?php echo $item->state == 0 ? ' system-unpublished"' : null; ?>">
    4.         <?php
    5.             $this->item = &$item;
    6.             echo $this->loadTemplate('item');
    7.         ?>
    8.     </div>
    9.     <?php $counter++; ?>
    10.     <?php if (($rowcount == $this->columns) or ($counter ==$introcount)): ?>
    11.     <span class="row-separator"></span>
    12. </div>


    И заменяем его на код:
    Код (PHP):
    1. <div class="row-fluid row-<?php echo $row ; ?>">
    2.     <?php endif; ?>
    3.     <div class="item span<?php echo $columns; ?> <?php echo $item->state == 0 ? ' system-unpublished"' : null; ?>">
    4.         <?php
    5.             $this->item = &$item;
    6.             echo $this->loadTemplate('item');
    7.         ?>
    8.     </div>
    9.     <?php $counter++; ?>
    10.     <?php if (($rowcount == $this->columns) or ($counter ==$introcount)): ?>
    11. </div>

    Теперь шаблон главной страницы сайта ("Избранные материалы") будет меняться в соответствии с настройками колонок в админке.


    Продолжение следует...
     
  2.  

Поделиться этой страницей

Загрузка...