Создание шаблона Joomla. Часть 5 – область контента и позиции модулей

В предыдущей статье мы начали верстать шаблон Jommla 3 с шапки сайта, сегодня речь пойдет о другой немаловажной составляющей любого шаблона – области контента. Конечный результат у нас должен получиться таким:

Макет шаблона сайта который мы будем верстать

Как мы уже знаем, за вывод контента (основного содержимого страницы) отвечает специальная конструкция <jdoc:include type="component" />. Но если посмотреть на макет шаблона, то можно заметить что в центральной части страницы помимо основного контента расположены дополнительные блоки, в которых при помощи модулей будет выводиться определенная информация.

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

  • Верхнюю часть выделить под некие новости и объявления;
  • Правую часть отвести под модули (популярные материалы, дополнительное меню для навигации и так далее);
  • Самый большой блок будет отведен под контент.

Кроме того необходимо выделить место для модуля навигации (хлебные крошки), а так же для системных сообщений.

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

<div id="content"><!-- Основной контент -->
 <div class="left col-xs-12 col-md-9">
  <div class="news "><p>Блок для новостей</p></div>
  <div class="brhrumbs"><p>Навигатор - хлебные крошки</p></div>
  <div class="sys-msg bg-success"><p>Системные сообщения</p></div>
  <div class="main-content"><p>Основной контент</p></div><!--Статья-->
 </div>
 <div class="right-menu col-xs-12 col-md-3">Позиция для модулей в правой части страницы</div><!--меню-->
</div>

В разметке мы использовали классы, описанные в Bootstrap. Если кратко, то выглядеть это будет так – на маленьких устройствах все содержимое будет расположено по всей ширине страницы, а на компьютерах область контента будет занимать 9/12 частей страницы, правая область с модулями 3/12.

Теперь для наглядности применим к данным блокам стили оформления:

#content{border:3px solid #34ccff;}
.left, .right-menu {height: 515px;}
.news{height: 127px; border: 3px solid #ec008c;}
.sys-msg{height: 30px;}
.main-content {height: 330px; border: 3px solid #ec008c;}
.right-menu{border: 3px solid #ec008c;}

После проделанных манипуляций переходим на сайт и смотрим на результат:

Для наглядности применяем HTML разметку и стили оформления чтобы иметь представление о конечном результате

Блоки размечены, теперь необходимо наполнить их контентом. Как я и говорил, для этих целей мы будем использовать конструкцию jdoc:include. Но прежде чем это делать, давайте представим следующую ситуацию – на определенных страницах сайта Вы решили не использовать правое меню (не выводить никаких модулей), а вместо этого отвести всю ширину страницы под контент. Все бы ничего, но исходя из нашей разметки, несмотря на то будет ли модуль в правой части или нет, она все равно будет фиксированной ширины (3/12 части области контента).

Тут должен возникнуть вполне законный вопрос - как сделать так чтобы при отсутствии модуля в определенной позиции не выводился предназначенный для неё блок? Сделать это можно при помощи языка php и определенного условия:

<div id="content"><!-- Основной контент -->
 <?php if ($this->countModules('position-2')) : ?> <!-- Если модуль имеется тогда выводим его в правом блоке -->
  <div class="left col-xs-12 col-md-9">
   <div class="news "><p>Блок для новостей</p></div>
   <div class="brhrumbs"><p>Навигатор - хлебные крошки</p></div>
   <div class="sys-msg bg-success"><p>Системные сообщения</p></div>
   <div class="main-content"><p>Основной контент</p></div><!--Статья-->
  </div>
  <div class="right-menu col-xs-12 col-md-3">Позиция для модулей в правой части страницы</div><!--меню-->
 <?php else: ?><!--Иначе правый блок не выводим -->
  <div class="left col-xs-12">
   <div class="news "><p>Блок для новостей</p></div>
   <div class="brhrumbs"><p>Навигатор - хлебные крошки</p></div>
   <div class="sys-msg bg-success"><p>Системные сообщения</p></div>
   <div class="main-content"><p>Основной контент</p></div><!--Статья-->
  </div>
 <?php endif; ?> <!-- Конец условия -->
</div>

Условие простое, мы проверяем, есть ли модуль в определенной позиции (position-2), если модуль есть, то выводим предназначенный для него блок, если нет, тогда блок не выводится. Попробуйте поэкспериментировать, установите модули на определенных страницах сайта и посмотрите, как поведут себя определенные блоки. Результат должен получиться таким:

Правый блок выводится в зависимости от того имеется ли в нем модуль

Ну вот, теперь можно приступить к самому главному – наполнению блоков. Для этого вместо обычного текста вставляем в наши блоки конструкцию jdoc:include с определенными параметрами (Подробнее о данной конструкции мы говорили в данной статье). Код будет таким:

<div id="content"><!-- Основной контент -->
 <?php if ($this->countModules('position-2')) : ?> <!-- Если модуль имеется тогда выводим его в правом блоке -->
  <div class="left col-xs-12 col-md-9">
   <div class="news "><jdoc:include type="modules" name="position-3"/></div>
   <div class="brhrumbs"><jdoc:include type="module" name="breadcrumbs" title="Навигатор"/></div>
   <div class="sys-msg bg-success"><jdoc:include type="message"/></div>
   <div class="main-content"><jdoc:include type="component"/></div><!--Статья-->
  </div>
  <div class="right-menu col-xs-12 col-md-3"><jdoc:include type="modules" name="position-2" style="xhtml"/></div><!--меню-->
 <?php else: ?> <!--Иначе правый блок не выводим -->
  <div class="left col-xs-12">
   <div class="news "><jdoc:include type="modules" name="position-3"/></div>
   <div class="brhrumbs"><jdoc:include type="module" name="breadcrumbs" title="Навигатор"/></div>
   <div class="sys-msg bg-success"><jdoc:include type="message"/></div>
   <div class="main-content"><jdoc:include type="component"/></div><!--Статья-->
  </div>
 <?php endif; ?> <!-- Конец условия -->
</div>

Отдельно хочу обратить внимание на следующую строку кода:

jdoc:include type="module" name="breadcrumbs" title="Навигатор"/>

Если вы читали статью «Конструкция jdoc:include для отображения контента» то наверняка уже знаете её суть, если же нет, тогда я вкратце постараюсь объяснить, за что она отвечает. Благодаря данной строчке мы выводим в указанном месте шаблона хлебные крошки (навигатор сайта). Но тут есть один момент, чтобы все работало, в настройках данного модуля для него не должна быть выбрана никакая позиция. Кроме того в title конструкции jdoc:include необходимо прописать точное название модуля, а точнее его заголовок.

Блоки наполнили, теперь если ранее не были созданы необходимые модули, создаем их, размещаем каждый в своей позиции и смотрим на результат:

Результат использования конструкции jdoc:include - сайт наполнился контентом

Структура создана, контент отображается правильно, по желанию в правой части можно выводить дополнительное меню. Осталось лишь добавить определенные стили оформления, чтобы добиться точного соответствия с макетом шаблона.

Но как ни крути, добиться этого при помощи одних только стилей не получится. Ведь в правой колонке по задумке в модулях совместно с текстом должны отображаться изображения статей. Чтобы этого добиться, можно найти уже готовое расширение, но это не наш метод ведь нам надо научиться делать все самостоятельно. Для решения подобных задач мы будем переопределять шаблоны различных стандартных компонентов системы и в частности модулей. Как переопределить модули последних и популярных материалов, чтобы добавить изображение совместно с названием материла, подробно написано в статье «Переопределение в Joomla 3». А если Вы хотите узнать, как изменить внешний вид материалов в блоге категории, тогда прочтите статью «Переопределение макета блога категории в Joomla 3».

На этом данная, уже пятая статья на тему «Как создать шаблон Joomla 3» подошла к концу, в следующей части мы продолжим создание шаблона и поговорим о том, как создать красивый футер для своего сайта.

Добавить комментарий


Комментарии   

Ника
0 #1 Ника 07.04.2019 19:33
Благодарю за ваши материалы! Очень нужные и полезные. Особенно по созданию шаблона. Буду изучать!
Цитировать