В одной из предыдущих статей, когда мы говорили о верстке шаблона, мы вскользь затронули вопрос о методах вывода (отображения) контента на страницах сайта и уже знаем, что в Joomla для этих целей предусмотрена специальная конструкция jdoc:include.
Данную статью я решил всецело посвятить данному методу отображения контента, ведь понимание его сути Вам обязательно пригодиться при создании либо редактировании шаблонов Joomla 3.
Для начала давайте рассмотрим синтаксис данной конструкции:
<jdoc:include type="Тип элементов для вывода" [name="Имя позиции модулей"] [title="Заголовок модуля"] [style="стиль отображения модуля"] />
Взглянув на синтаксис, сразу становится понятно, что данная конструкция выглядит как обычный тег, который содержит обязательный параметр type и три необязательных – name, title и 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) указываем заголовок самого модуля, то есть, то самое имя, которое мы присваивали модулю в панели управления:
Точно таким же образом можно вывести совершенно любой модуль, в любом месте страницы сайта, просто изменив имя модуля в атрибуте 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>
В этом случае модуль выводится без заголовка и оформления:
Хочу обратить внимание на один момент, как правило, возникающий у начинающих веб-разработчиков, которые впервые пользуются данным методом вывода контента – при выводе модуля не отображается его заголовок. Думаю, Вы уже догадались, почему это произошло, правильно, стиль выводимого модуля был задан со значением none либо не задан вообще.
- xhtml – данный стиль выводит каждый модуль в отдельном блоке div, заголовок уже присутствует:
<div id='wrap'> <div id="right-menu"><jdoc:include type="modules" name="position-2" style="xhtml"/> </div> </div>
Результат получится следующий:
- table – с применением данного стиля модули будут оформлены в табличной форме:
<div id='wrap'> <div id="right-menu"><jdoc:include type="modules" name="position-2" style="table"/> </div> </div>
В результате оформление, а точнее вёрстка модуля получится вот такой:
- horz – горизонтальный вывод содержимого модуля в ячейке таблицы:
<div id='wrap'> <div id="right-menu"><jdoc:include type="modules" name="position-2" style="horz"/> </div> </div>
Результат:
- outline – выводит модуль без заголовка, но с некими предустановленными стилями. Синтаксис:
<div id='wrap'> <div id="right-menu"><jdoc:include type="modules" name="position-2" style="outline"/> </div> </div>
Результат:
- rounded – блочный вывод модуля с серьезным таким вложением. Данный стиль оформления будет полезен для сложного оформления модулей, например для создания закругленных углов, с различным цветовым оформлением. Синтаксис:
<div id='wrap'> <div id="right-menu"><jdoc:include type="modules" name="position-2" style="rounded"/> </div> </div>
Результат:
- html5 – то же самое что и xhtml, но с незначительными изменениями.
Собственно вот и все предустановленные стили, которые существуют в Joomla версии 3.8.1. Находятся они в файле modules.php, который расположен в папке /templates/system/html.
Какой именно стиль оформления подойдет именно Вам, решайте сами, но никто не запрещает написать собственный стиль оформления. Как это сделать и для чего это может пригодиться, я расскажу в одной из следующих статей.
