В статье Создание шаблонов для Joomla мы поверхностно коснулись темы методов вывода контента в теле шаблона. Давайте теперь подробно разберем что это и с чем его едят. Итак, объявления метода jdoc присутствуют в каждом шаблоне Joomla и выводят в тело шаблона (то бишь на страницу сайта) ту или иную информацию. В целом объявление метода выглядит следующим образом
Данная строчка выводит на сайте информацию из компонентов, например статьи из com_content. Тип элементов вывода указывается в атрибуте.
1. type — типы элементов вывода.
- component — как писал выше, выводит основное содержание страницы. Может вызываться только один раз в шаблоне.
- head — объявляется так же один раз после открывающего тэга . Служит для вывода стилей, скриптов, и метаданных текущей страницы.
- message— выводит системные сообщения. Объявляется один раз в теле документа (body).
- installation — ничего не выводит и представляет собой «инструкцию» для установки.
- module — выводит на странице единичный модуль. Количество объявлений не ограничено.
- modules — в отличии от предыдущего типа, позволяет выводить в своей позиции не единичое число модулей.
Для первых четырех указанных типов достаточно лишь указать их на странице. В случае с типом модуля задача немного усложняется. Для того, чтобы вывести на странице модуль нам нужно сперва создать для него модульную позицию с уникальным идентификатором (название позиции модуля). Это делается при помощи атрибута name=«имя позиции» и обязательным добавлением строки:в файл templateDetails.xml. Описывая название позиции в templateDetails.xml мы обозначаем ее в системе и видим в менеджере модулей. Имена позиций могут быть произвольными, хотя name=«user3» позиция, по-умолчанию используется для отображения верхнего меню.
2. style — описание стиля вывода (mod chrome).
От указанного стиля зависит внешний вид и структура оболочки модуля. Выглядит какПо-умолчанию заложено несколько стилей вывода модулей:
- xhtml — выводит модуль в блоке с заголовком
- table — выводит модуль в верстке табличной структуры
- horz — выводит содержимое модуля в ячейке таблицы, горизонтально
- rounded — выводит модуль в нескольких вложенных блоках для сложного стилевого оформления в виде графических границ (напр. закругленных углов)
- outline — добавляет к блоку модуля предустановленные стили css
- none — аналогично не указанному вообще style. Выводит модуль без оформления и заголовка
Все предустановленные стили располагаются в файле templates/system/html/modules.php. Но мы не ограничены использованием только предоставленных вариантов, а вполне можем создавать свои собственные.
3. Создание пользовательского mode chrome.
Итак, предоставленные по умолчанию типы представления модулей не удовлетворяют текущих требований. Нужно добавить свой собственный стиль оформления. В качестве примера выберем достаточно часто повторяющуюся ситуацию. По заданию нужно вместо
поместить заголовок модуля в тэг , который является семантически нейтральным. Так же требуется поместить контентблок модуля в отдельный
Назначаем в нашу позицию модуль и смотрим результат.
В одной из предыдущих статей, когда мы говорили о верстке шаблона, мы вскользь затронули вопрос о методах вывода (отображения) контента на страницах сайта и уже знаем, что в Joomla для этих целей предусмотрена специальная конструкция jdoc:include.
Данную статью я решил всецело посвятить данному методу отображения контента, ведь понимание его сути Вам обязательно пригодиться при создании либо редактировании шаблонов Joomla 3.
Для начала давайте рассмотрим синтаксис данной конструкции:
Взглянув на синтаксис, сразу становится понятно, что данная конструкция выглядит как обычный тег, который содержит обязательный параметр type и три необязательных – name, title и style. Если говорить точнее, то данные параметры являются необязательными только в том случае если речь не идет о выводе модуля. А если нам при помощи данной конструкции необходимо вывести модули, тогда использование данных параметров уже обязательно, но с определенными правилами (их рассмотрим ниже).
Думаю то, что я написал, не каждый сможет понять с первого раза, особенно если ни разу не сталкивался с данным методом вывода контента. Поэтому для начала давайте разберем всевозможные типы элементов для вывода, и где они используются.
jdoc:include type – тип элементов для вывода
Всего существует 6 типов элементов для вывода содержимого, по крайней мере, на данный момент. Причем четыре из них выводятся однократно в шаблоне:
- head – данный тип выводится в заголовке страницы между тегами , тем самым автоматически наполняя его содержимое (подключаются скрипты, стили, мета-данные страницы и т.п.). В коде индексного файла выглядит данная конструкция следующим образом:
- message — служит для вывода системных сообщений, выводится между тегами в специально отведенных для подобных сообщений контейнерах:
- installation — данный тип сам по себе ничего не выводит на страницу сайта, представляет собой инструкцию для установки.
- Component – как и тип системных сообщений находится между тегами body и выводит основное содержимое страницы (текст, изображения, списки материалов и т.д.)
Повторюсь еще раз, данные типы используются однократно в шаблоне, повторное их использование приведет к дублированию информации, а это нам не нужно. Оставшиеся два типа можно использовать сколько угодно раз в различных местах шаблона по своему усмотрению (разумеется, между тегами body), кроме того совместно с данными типами применяются дополнительные атрибуты, такие как name, style и title:
- module – выводит единичный модуль в указанном месте на сайте, причем явное указание имени позиции в файле templateDetails.xml не требует. Пример вывода модуля может выглядеть следующим образом:
В данном примере мы вывели модуль «хлебные крошки» в блоке div с идентификатором bcrumbs. В качестве имени позиции (name) выступает имя самого модуля (mod_breadcrums, без префикса соответственно), а в качестве заголовка (title) указываем заголовок самого модуля, то есть, то самое имя, которое мы присваивали модулю в панели управления:
Точно таким же образом можно вывести совершенно любой модуль, в любом месте страницы сайта, просто изменив имя модуля в атрибуте name. Например, для модуля меню в качестве параметра атрибута name необходимо указать menu.
- modules – по названию, думаю уже все понятно, да Вы правы, данный тип служит для вывода неограниченного количества модулей в указанной позиции. Но в отличие от предыдущего типа, в качестве значения для атрибута name имя позиции должно быть задано заранее в файле templateDetails.xml. Пример использования:
jdoc:include style — стили вывода элементов
Как я и говорил, стили используются исключительно при выводе модулей, но как Вы уже могли заметить в примерах выше не был использован атрибут style. Тут нет никакой ошибки, просто если этот атрибут не указать явно, то будет использован стиль по умолчанию (style="none").
Всего существует 7 основных предустановленных стилей оформления выводимых модулей на страницах сайта при помощи метода jdoc:include. Предлагаю рассмотреть каждый из них на примере вывода простенького модуля меню:
- none – данный стиль используется по умолчанию, если явно не указан любой другой:
Можно несколько уменьшить код и не использовать стиль вовсе, результат будет точно таким же. Другими словами тот же самый код можно написать следующим образом:
В этом случае модуль выводится без заголовка и оформления:
Хочу обратить внимание на один момент, как правило, возникающий у начинающих веб-разработчиков, которые впервые пользуются данным методом вывода контента – при выводе модуля не отображается его заголовок. Думаю, Вы уже догадались, почему это произошло, правильно, стиль выводимого модуля был задан со значением none либо не задан вообще.
- xhtml – данный стиль выводит каждый модуль в отдельном блоке div, заголовок уже присутствует:
Результат получится следующий:
- table – с применением данного стиля модули будут оформлены в табличной форме:
В результате оформление, а точнее вёрстка модуля получится вот такой:
- horz – горизонтальный вывод содержимого модуля в ячейке таблицы:
- outline – выводит модуль без заголовка, но с некими предустановленными стилями. Синтаксис:
- rounded – блочный вывод модуля с серьезным таким вложением. Данный стиль оформления будет полезен для сложного оформления модулей, например для создания закругленных углов, с различным цветовым оформлением. Синтаксис:
- html5 – то же самое что и xhtml, но с незначительными изменениями.
Собственно вот и все предустановленные стили, которые существуют в Joomla версии 3.8.1. Находятся они в файле modules.php, который расположен в папке /templates/system/html.
Какой именно стиль оформления подойдет именно Вам, решайте сами, но никто не запрещает написать собственный стиль оформления. Как это сделать и для чего это может пригодиться, я расскажу в одной из следующих статей.
Это продолжение статьи. Начало здесь.
index.php
Чем на самом деле является файл index.php? Это комбинация (X)HTML и PHP, которая определяет все необходимое для отображения элементов страницы.
Сначала посмотрим на элемент, который крайне важен для создания валидных шаблонов — DOCTYPE в верхней части файла index.php. Этот фрагмент кода отображается в верхней части всех веб-страниц. На страницах нашего шаблона мы видим следующее:
Первое строчка на PHP предназначена просто для того, чтобы убедиться, что к файлу не обращаются напрямую, из соображений безопасности.
DOCTYPE веб-страницы — это один из фундаментальных параметров, на основании которого браузер решает, как ему отображать эту страницу, в частности, как браузеру интерпретировать CSS. Для лучшего понимания приведем здесь хорошую цитату с сайта alistapart.com:
[Информация на сайте W3C о DOCTYPE] составлена гиками для гиков. И когда я говорю «гики», я не имею в виду обычных профессионалов Веб, таких как я или вы. Я имею в виду тех гиков, которые заставляют нас выглядеть как Бабушку в тот день, когда Она Впервые Получила E-mail.
В любом случае, вы можете использовать разные DOCTYPE. По существу, DOCTYPE говорит браузеру, как интерпретировать страницу. С самого начала, когда появился Веб, разные браузеры имели разные уровни поддержки CSS. Так, например, Internet Explorer не поймет команду «min-width», используемую для установки минимальной ширины страницы. Для того, чтобы продублировать эффект, вам придется использовать «хаки» в CSS.
Некоторые говорят, что обработка XHTML как text/html должна считаться «вредной». Если вы действительно понимаете это утверждение, то вы находитесь далеко за пределами этого руководства. Вы можете прочитать больше на эту тему по адресу hixie.ch/advocacy/xhtml. «Strict» означает, что HTML (или XHTML) должен интерпретироваться в точности по стандартам. А «Transitional» в DOCTYPE означает, что на странице дозволены определенные отступления от стандартов.
Чтобы усложнить картину, добавим, что существует еще так называемый режим «quirks» (специальных ухищрений). Если DOCTYPE указан неверно, с неправильной датой, или вообще не указан, браузер переходит в режим «quirks». На самом деле, это попытка обеспечения обратной совместимости, так, например, Internet Explorer 6 будет интерпретировать страницу так, как это делал бы IE4.
К сожалению, люди иногда совершенно случайно переходят в режим «quirks». Обычно это происходит по двум причинам:
- Они используют декларацию DOCTYPE, копируя ее непосредственно с сайта W3C, вследствие чего конец ссылки выглядит как DTD/xhtml1-strict.dtd, в то время как это относительная ссылка на сервере W3C. Вам нужно указывать путь полностью, как в примере, приведенном выше
- Фирма Microsoft разработала свой IE6 так, чтобы он выдавал валидные страницы, пребывая при этом в режиме «quirks». Это обычно случается, когда «xml declaration» указывется до DOCTYPE.
Далее указывается следующее XML-выражение (после DOCTYPE):
Пояснения насчет режима «quirks» в IE очень важны. В этой статье мы разрабатываем шаблон для IE6+, следовательно мы должны быть уверены, что он работает в стандартном режиме. Это минимизирует необходимость хаков, которые нам придется позже применить.
ПРИМЕЧАНИЕ
Создание страниц, соответствующих стандартам, когда вы видите «valid xhtml» в нижней части страницы, не означает в действительности трудоемкой верстки или использования малопонятных тегов. Это просто означает, что разрабатываемый вами код, соответствует заявленному DOCTYPE, и ничего более.
Разработка сайта по стандартам может быть описана одной фразой как «говори, что ты делаешь, а затем делай то, что говоришь».
Что еще есть в файле index.php?
Посмотрите сначала на структуру заголовка. Мы хотим быть минималистичны, насколько это возможно, но при этом иметь все необходимое для создания работающего сайта. Мы используем следующий заголовок:
Что все это означает?
Мы уже рассказывали о значении DOCTYPE в файле index.php. Фрагмент извлекает установленный язык из глобальной конфигурации.
Следующий фрагмент включает дополнительную информацию для заголовка:
Это заголовочная информация, которая задана в глобальной конфигурации. Она включает в себя следующие теги (в инсталляции по умолчанию):
Большая часть этой информации генерируется «на лету» в соответствии с данными текущей страницы (статьи). Она включает в себя ряд мета-тегов для favicon, адресов RSS-потоков и некоторых стандартных JavaScript-файлов.
Последние строки в заголовке содержат ссылки на CSS-файлы шаблона:
Первые два файла — system.css and general.css содержат некоторые основные стили Joomla. Последний содержит все стили шаблона и называется здесь template.css. Фрагмент кода PHP возвращает название текущего шаблона. Указание его именно таким образом, вместо реального пути, делает код более переносимым. Когда вы создаете новый шаблон, вы можете просто скопировать его (включая весь заголовок), не беспокоясь о внесении исправлений.
В заголовке может быть указано любое количество CSS-файлов, например, для условных стилей, определяемых для разных браузеров. Например, следующий фрагмент определяет такую таблицу стилей для IE6:
Следующий пример показывает, как могут использоваться параметры шаблона:
Пустое тело шаблона
Создание нашего первого шаблона будет очень-очень простым! Вы готовы?
Все, что необходимо, — это использовать выражения Joomla, которые добавят содержимое всех модулей в основное тело страницы (mainbody):
В настоящий момент наш сайт не вылядит особенно впечатляюще (см.
иллюстрацию)
Шаблон содержит следующие элементы, размещенные в логическом порядке:
- название сайта
- верхний модуль
- левые модули
- основной контент
- правые модули
Что необходимо знать
По существу, шаблон просто загружает модули Joomla и mainbody (компонент). Расположение элементов и дизайн — это дело CSS, а не Joomla.
Нашей целью является как можно ближе приблизиться к семантической разметке. С точки зрения Web, это означает, что страница может быть прочитана браузером, «пауком» поисковой системы или устройством чтения с экрана. Семантическая разметка является краеугольным камнем доступности.
Примечание
На самом деле, мы имеем здесь только некий потенциал для семантической разметки. Например, если размещать случайные модули в случайных местах, то мы получим полную путаницу. Важным взглядом на CMS-сайты является то, то шаблон ровно настолько хорош, насколько хорошо его наполнение контентом. Именно поэтому так часто придираются к дизайнерам, пытаясь проверять их сайты на валидность.
Вы заметили, что мы впервые использовали набор команд, специфичных для Joomla:
PHP-выражение «echo» просто отображает строку из файла configuration.php. Здесь мы использовали название сайта, но можно, например, отобразить и другие параметры:
Выражение «jdoc» вставляет различные типы XHTML-вывода, как модулей, так и компонентов. Следующая строка вставляет вывод компонента. Какой компонент будет использован, будет определяться ссылкой в меню:
ПРИМЕЧАНИЕ
Достаточно интересно, вам кажется, что вывод компонента можно использовать несколько раз. Не уверен, что вам захочется сделать это, но я говорю вам, что это может быть ошибкой.
Эта строка вставляет вывод всех модулей, заданных для места «right»:
На самом деле, полный синтаксис такой:
Мы рассмотрим различные варианты опций для стилей в разделе о модулях позднее.
