Создание шаблона для Joomla 3.0 (часть 3)

Опубликовано 16 Октябрь 2012

Продолжение статьи о создании шаблона для Joomla 3.0. В предыдущих статьях мы создали простую заготовку шаблона с несколькими позициями, посмотрели как управлять их стилями. Чтобы использовать Joomla по максимуму нужно разобраться с Bootstrap! Этот CSS фреймворк (если его так можно назвать) сильно облегчает жизнь разработчику.

Шаг 5. Создание меню на основе BootStrap

Так получилось что по умолчанию модуль, который выводит верстку меню в шаблон не адаптирован под BootStrap. Этим и займемся! В папке html в нашем шаблоне можно переопределять стили модулей. Для того чтобы переопределить стиль меню нужно создать в папке html папку mod_menu и уже в ней два файла см. рисунок:

Вот код файла default.php изменения не очень большие добавился класс "nav" и "dropdown-menu".

 <?php
defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
?>
<?php // The menu class is deprecated. Use nav instead. ?>
<ul class="nav 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) {
    $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->deeper) {
    $class .= ' deeper dropdown';
  }

  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':
      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="dropdown-menu">';
  }
  // The next item is shallower.
  elseif ($item->shallower) {
    echo '</li>';
    echo str_repeat('</ul></li>', $item->level_diff);
  }
  // The next item is on the same level.
  else {
    echo '</li>';
  }
endforeach;
?></ul>

И следующий файл default_component.php это вывод ссылок меню там тоже не очень большие изменения. Листинг нужно просто скопировать и вставить на свое место.

 <?php
defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$class = $item->anchor_css ? 'class="'.$item->anchor_css.'" ' : '';
$title = $item->anchor_title ? 'title="'.$item->anchor_title.'" ' : '';
if ($item->menu_image) {
    $item->params->get('menu_text', 1) ?
    $linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" /><span class="image-title">'.$item->title.'</span> ' :
    $linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" />';
}
else { $linktype = $item->title;
}

$data_toggle = $item->deeper ? 'data-toggle="dropdown"' : '';

switch ($item->browserNav) :
  default:
  case 0:
?><a <?php echo $class; ?>href="/<?php echo $item->deeper ? '#' : $item->flink; ?>" <?php echo $data_toggle; ?> <?php echo $title; ?>><?php echo $linktype; ?><?php echo $data_toggle !== '' ? '<b class="caret"></b>' : '' ?></a><?php
    break;
  case 1:
    // _blank
?><a <?php echo $class; ?>href="/<?php echo $item->flink; ?>" target="_blank" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
    break;
  case 2:
  // window.open
?><a <?php echo $class; ?>href="/<?php echo $item->flink; ?>" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');return false;" <?php echo $title; ?>><?php echo $linktype; ?></a>
<?php
    break;
endswitch;

Меню готово, остается только подключить BootStrap в шаблон:

<?php defined('_JEXEC') or die; //верхняя строчка присутствует во всех файлах Joomla
JHtml::_('bootstrap.framework'); //подключение фреймворка
JHtmlBootstrap::loadCss(false); //отключение стандартных CSS 
$doc = JFactory::getDocument();  //добавление стилей bootstap
$doc->addStyleSheet('/templates/blank_j3/css/bootstrap.min.css');
?>

Скачать последнюю версию BootStrap можно от сюда http://bootstrap.veliovgroup.com там есть вся документация с примерами на русском языке, все очень понятно и доступно.

P.S. файл bootstrap.min.css я взял от туда и добавил в шаблон в папку css. Если возникают вопросы, пишите в комментариях, а мы ответим!

А для тех кто дочитал статью выкладываем исходники шаблона.

Продолжение статей по данной тематике. Создание шаблона для Joomla 3 (часть 4)

Понравилась статья? Возник вопрос? Вступайте в нашу группу и смело задавайте vk.com/saity74

Скачать tpl_blank_j3 v1.0