Методы отображения контента при помощи конструкции jdoc:include

В одной из предыдущих статей, когда мы говорили о верстке шаблона, мы вскользь затронули вопрос о методах вывода (отображения) контента на страницах сайта и уже знаем, что в Joomla для этих целей предусмотрена специальная конструкция jdoc:include.

Данную статью я решил всецело посвятить данному методу отображения контента, ведь понимание его сути Вам обязательно пригодиться при создании либо редактировании шаблонов Joomla 3.

Для начала давайте рассмотрим синтаксис данной конструкции:

<jdoc:include type="Тип элементов для вывода" [name="Имя позиции модулей"] [title="Заголовок модуля"] [style="стиль отображения модуля"] />

Взглянув на синтаксис, сразу становится понятно, что данная конструкция выглядит как обычный тег, который содержит обязательный параметр type и три необязательных – nametitle и style. Если говорить точнее, то данные параметры являются необязательными только в том случае если речь не идет о выводе модуля. А если нам при помощи данной конструкции необходимо вывести модули, тогда использование данных параметров уже обязательно, но с определенными правилами (их рассмотрим ниже).

Думаю то, что я написал, не каждый сможет понять с первого раза, особенно если ни разу не сталкивался с данным методом вывода контента. Поэтому для начала давайте разберем всевозможные типы элементов для вывода, и где они используются.

jdoc:include type – тип элементов для вывода

Всего существует 6 типов элементов для вывода содержимого, по крайней мере, на данный момент. Причем четыре из них выводятся однократно в шаблоне:

  • head – данный тип выводится в заголовке страницы между тегами <head></head>, тем самым автоматически наполняя его содержимое (подключаются скрипты, стили, мета-данные страницы и т.п.). В коде индексного файла выглядит данная конструкция следующим образом:
<head>
 <jdoc:include type="head" />
</head>
  • message - служит для вывода системных сообщений, выводится между тегами <body></ body> в специально отведенных для подобных сообщений контейнерах:
<body>
 <div id="sys-msg"><jdoc:include type="message"/></div>
</body>
  • installation - данный тип сам по себе ничего не выводит на страницу сайта, представляет собой инструкцию для установки.
  • Component – как и тип системных сообщений находится между тегами body и выводит основное содержимое страницы (текст, изображения, списки материалов и т.д.)
<body>
<div id="content"><jdoc:include type="component"/></div>
</body>

Повторюсь еще раз, данные типы используются однократно в шаблоне, повторное их использование приведет к дублированию информации, а это нам не нужно. Оставшиеся два типа можно использовать сколько угодно раз в различных местах шаблона по своему усмотрению (разумеется, между тегами body), кроме того совместно с данными типами применяются дополнительные атрибуты, такие как name, style и title:

  • module – выводит единичный модуль в указанном месте на сайте, причем явное указание имени позиции в файле templateDetails.xml не требует. Пример вывода модуля может выглядеть следующим образом:
<div id="bcrumbs">
 <jdoc:include type="module" name="breadcrumbs" title="Навигатор"/>
</div>

В данном примере мы вывели модуль «хлебные крошки» в блоке div с идентификатором bcrumbs. В качестве имени позиции (name) выступает имя самого модуля (mod_breadcrums, без префикса соответственно), а в качестве заголовка (title) указываем заголовок самого модуля, то есть, то самое имя, которое мы присваивали модулю в панели управления:

Для вывода на сайт единичного модуля можно воспользоваться методом jdoc:include type="module"

Точно таким же образом можно вывести совершенно любой модуль, в любом месте страницы сайта, просто изменив имя модуля в атрибуте name. Например, для модуля меню в качестве параметра атрибута name необходимо указать menu.  

  • modules – по названию, думаю уже все понятно, да Вы правы, данный тип служит для вывода неограниченного количества модулей в указанной позиции. Но в отличие от предыдущего типа, в качестве значения для атрибута name имя позиции должно быть задано заранее в файле templateDetails.xml. Пример использования:
<div id="right-menu">
 <jdoc:include type="modules" name="position-2" />
</div>

jdoc:include style - стили вывода элементов

Как я и говорил, стили используются исключительно при выводе модулей, но как Вы уже могли заметить в примерах выше не был использован атрибут style. Тут нет никакой ошибки, просто если этот атрибут не указать явно, то будет использован стиль по умолчанию (style="none").

Всего существует 7 основных предустановленных стилей оформления выводимых модулей на страницах сайта при помощи метода jdoc:include. Предлагаю рассмотреть каждый из них на примере вывода простенького модуля меню:

  • none – данный стиль используется по умолчанию, если явно не указан любой другой:
<div id='wrap'>
 <div id="right-menu"><jdoc:include type="modules" name="position-2" style="none"/></div>
</div>

Можно несколько уменьшить код и не использовать стиль вовсе, результат будет точно таким же. Другими словами тот же самый код можно написать следующим образом:

<div id='wrap'>
 <div id="right-menu"><jdoc:include type="modules" name="position-2" /></div>
</div>

В этом случае модуль выводится без заголовка и оформления:


Метод вывода модулей jdoc:include - style="none"

Хочу обратить внимание на один момент, как правило, возникающий у начинающих веб-разработчиков, которые впервые пользуются данным методом вывода контента – при выводе модуля не отображается его заголовок. Думаю, Вы уже догадались, почему это произошло, правильно, стиль выводимого модуля был задан со значением none либо не задан вообще. 

  • xhtml – данный стиль выводит каждый модуль в отдельном блоке div, заголовок уже присутствует:
<div id='wrap'>
 <div id="right-menu"><jdoc:include type="modules" name="position-2" style="xhtml"/> </div>
</div>

Результат получится следующий:

style="xhtml"  вывод модуля в блоке с заголовком

  • table – с применением данного стиля модули будут оформлены в табличной форме:
<div id='wrap'>
 <div id="right-menu"><jdoc:include type="modules" name="position-2" style="table"/> </div>
</div>

В результате оформление, а точнее вёрстка модуля получится вот такой:

style="xhtml"  вывод модуля в табличной форме

  • horz – горизонтальный вывод содержимого модуля в ячейке таблицы:
<div id='wrap'>
 <div id="right-menu"><jdoc:include type="modules" name="position-2" style="horz"/> </div>
</div>

Результат:

style="horz" горизонтальный вывод содержимого модуля в ячейке таблицы:

  • outline – выводит модуль без заголовка, но с некими предустановленными стилями. Синтаксис:
<div id='wrap'>
 <div id="right-menu"><jdoc:include type="modules" name="position-2" style="outline"/> </div>
</div>

Результат:

style="outline" выводит модули без заголовка, но с предустановленными CSS стилями

  • rounded – блочный вывод модуля с серьезным таким вложением. Данный стиль оформления будет полезен для сложного оформления модулей, например для создания закругленных углов, с различным цветовым оформлением. Синтаксис:
<div id='wrap'>
 <div id="right-menu"><jdoc:include type="modules" name="position-2" style="rounded"/> </div>
</div>

Результат:

style="rounded" блочный вывод модулей для сложного стилистического оформления

  • html5 – то же самое что и xhtml, но с незначительными изменениями.

Собственно вот и все предустановленные стили, которые существуют в Joomla версии 3.8.1. Находятся они в файле modules.php, который расположен в папке /templates/system/html.

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

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