Изменение вывода контента в Joomla 1.5

Раньше некоторые разработчики клеймили Joomlу! за то, что с системе, по их мнению, логика вывода не была достаточно отделена от представления контента, и это не давало комфортно работать с системой. Кроме того, весь HTML выводился в табличном представлении, что давно далеко от средних стандартов. И вот Joomla 1.5 дала разработчикам возможность изменять представление данных полностью автономно, и этим значительно облегчила жизнь дизайнерам. Из-за этого теперь не нужно переживать о том что важные изменения, произведенные в основном коде, могут быть потеряны при очередном обновлении системы. Если вы сможете принять новую модель представления материала в Joomla 1.5, то вы действительно будете ошеломлены ее потенциалом.

Цель данного материала состоит в том, чтобы показать как совокупность четырех различных потоков вывода контента в Joomla! может быть настроена под любые требования дизайнера или верстальщика.

MVC 101

MVC расшифровывается как «Модель-Вид-Контроллер» (Model-View-Controller). Именно концепция MVC позволила придать системе ту дополнительную гибкость, которая предоставлена в руки разработчика. Теория может показаться скучной и сложной, однако единственная, самая важная часть, о которой действительно должен хорошо знать дизайнер - это V для Вида (View, Вид). Именно эта часть модели отвечает за вывод контента.

Так устроено, что разные расширения выводят контент разными способами. Компоненты, как вы уже наверное знаете, довольно сложны и могут отображать и изменять информацию. Например, com_content в состоянии отображать отдельную статью, статьи в отдельной категории или категории в секциях. Каждый из различных типов данных (статья, или категория, или секция) называют Вид  (из расшифровки MVC). У компонентов может быть много Видов, однако Вид не выводит контент непосредственно. Это делается с помощью схемы (layout) страницы. Именно с помощью схемы вывода мы и помогаем Виду отображать контент нужным нам образом.

Главное, что здесь необходимо запомнить, это то, что компонент может иметь много Видов, а каждый Вид может иметь одну или несколько схем вывода. Каждый вид отображает набор информации, а схема вывода помогает по-разному отображать эту информацию. Например, Вид категории в компоненте com_content отображает список статей. Эти статьи могут быть показаны в виде списка или в виде таблицы (могут быть и другие варианты). Таким образом, этот Вид может иметь набор схем вывода для представления информации в виде списка или таблицы.

С модулями дело обстоит куда проще. Они выводят небольшой объем данных одним единственным способом. У модулей нет Видов, но они поддерживают клиентскую разметку. Есть способ назначить схему вывода через параметры модуля.

 

 

Шаблон и схема вывода контента

Очень важно различать роль шаблона и роль схемы вывода контента. Шаблон Joomla определяет структуру блоков, размещенных на сайте. Эта структура содержит позиции (module positions) для вывода модулей и компонента. То, как выводится содержимое модуля, зависит только от схемы вывода, в случае компонента – от комбинации Вида и схемы вывода.

Иллюстрация показывает структуру разметки шаблона rhuk_milkyway, который поставляется в комплекте с Joomla! 1.5. Для того чтобы увидеть расположение модулей нужно добавить к основному адресу сайта суффикс «?tp=1» (например, www.mysite.com/index.php? tp=1). Вы сразу сможете увидеть позиции модулей шаблона  и вывод основного контента в центральной части страницы. Однако фактическое содержимое этих областей определяется схемой вывода и Видом самого компонента или модуля.

Пользовательские изменения

Если немного абстрагироваться от MVC, то есть еще два важных момента, которые стоит отметить при создании оригинального дизайна в Joomla!.

В дополнение к разметке, модуль содержит то, что мы называем «chrome» (не путать с браузером:)). Хром (chrome) - это тип разметки, в котором должен выводиться модуль. Большинство разработчиков и вероятно некоторые конечные пользователи знакомы с различными встроенными стилями для модулей (raw, xhtml, и т.д). Также можно определить свой собственный стиль хрома для модулей. На иллюстрации можно разобрать названия используемого модулем хрома (rounded, none and xhtml).

Типы вывода компонента и изменение разметки

Чтобы понять принципы переписывания схемы вывода компонента, мы должны сначала понять его структуру файлов. В данном случае важна та часть компонента, которая находится в директории /views/. Вот частичная структура для двух из Видов в com_content:

/components
¦ /com_content
¦ ¦ /views
¦ ¦ ¦ /articles
¦ ¦ ¦ ¦ /tmpl
¦ ¦ ¦ ¦ ¦ default.php (схема вывода)
¦ ¦ ¦ ¦ ¦ form.php (схема вывода)
¦ ¦ ¦ view.html.php (Вид, который отображает HTML)
¦ ¦ ¦ view.pdf.php (Вид, который выводит PDF)
¦ ¦ ¦ /category
¦ ¦ ¦ ¦ /tmpl
¦ ¦ ¦ ¦ ¦ blog.php (схема вывода)
¦ ¦ ¦ ¦ ¦ blog_items.php (дополнительная схема вывода)
¦ ¦ ¦ ¦ ¦ default.php (схема вывода)
¦ ¦ ¦ view.html.php (Вид, который отображает HTML)
¦ ¦ ¦ view.feed.php (Вид, который отображает RSS)

Заметно что каждый Вид помещен в свою директорию в папке /views/. У компонента com_content фактически есть три других Вида, не показанных в примере: archive, frontpage and section.

Виды вывода

В папке articles расположено несколько файлов. Почти всегда файл с названием view.html.php является обязательным. Файл view.html.php является файлом Вида; их может быть больше одного в зависимости от количества Видов. Для этих файлов есть общие принципы наименования, 'view.Вид.php', где Вид может быть html, feed, pdf, row или error. Это значит, что когда мы хотим вывести данные в формате html, для этого используется view.html.php. Если необходимо вывести данные в формате RSS, используется файл view.feed.php.

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

http://domain/sports.html
http://domain/sports.feed
http://domain/sports/rowing.html
http://domain/sports/rowing.pdf

Ссылки на вашем сайте, конечно, будут выглядеть совсем так как в примере, но суть в том чтобы показать, что sports.html будет использовать файл view.html.php для представления категории, и что sports.feed покажет категорию как RSS поток используя view.feed.php. Однако необходимо заметить, что вы не можете в настоящее время настраивать типы вывода, например, PDF. Вы можете настраивать только тип вывода html, а это именно то, что нам нужно.

Схемы вывода

В директории view в папке каждого компонента есть папка /tmpl/, в которой находятся файлы схем вывода. Каждый файл PHP, который не начинается с "view" в этом каталоге представляет разметку. Например, article/tmpl/default.php – схема вывода по умолчанию для статьи, article/tmpl/form.php – схема вывода формы для редактирования статьи из фронтэнда; category/tmpl/default.php - разметка по умолчанию для категории, а category/tmpl/blog.php показывает список статей в виде блога.

Отношения между Видом и схемой вывода компонента наиболее четко заметны при добавлении нового пункта меню. Ниже находится скриншот стандартной страницы создания пункта меню. При нажатии на ссылку Articles (данный пункт представляет com_content), дерево расширяется, чтобы показать список Схем вывода, доступных в каждом из Видов.

Если кликнуть по картинке, то можно заметить что в некоторых из /tmpl/-директорий есть файлы, которые отсутствуют в списке меню (например pagebreak.php в Виде статьи). Это происходит из-за инструкций в файле XML, который управляет отображением схем вывода (например, pagebreak.xml). Они скрывают некоторые схемы вывода (или Вид) из списка пункта меню.

Теперь, когда мы знакомы с основными принципами взаимодействия разметки и представления , мы готовы создасть соственну разметку, то есть переписать шаблон вывода контента.

 

 

Копирование и создание файлов схем вывода

Новая схема вывода будет работать только с активным шаблоном. Файл схемы вывода должен быть расположен в директории /html/ папки шаблона. Например, собственные шаблоны разметки для rhuk_milkyway расположены в /templates/rhuk_milkyway/html/, для шаблона JA_Purity в /templates/ja_purity/html/ и для Beez в /templates/beez/html/.
Важно: Для правильного отображения изменений в схеме вывода, название файла должно быть занесено в соответствующий раздел файла описания шаблона templateDetails.xml.

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

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

/templates
¦ /beez
¦ ¦ /html
¦ ¦ ¦ /com_content (название директории соответствует названию директории компонента)
¦ ¦ ¦ ¦ /articles (название директории соответствует названию Вида)
¦ ¦ ¦ ¦ ¦ default.php (название файла соответствует названию Схемы вывода)
¦ ¦ ¦ ¦ ¦ form.php

Структура собственной разметки вывода компонента достаточно проста:

/html/название_компонента/название_вида/название_схемы_вывода.php.

Давайте рассмотрим несколько примеров.

У шаблона rhuk_milkyway нет собственной разметки для компонентов. Если мы хотим переписать разметку по умолчанию для вывода материала (article), сначала мы должны скопировать следующий файл /components/com_content/views/article/tmpl/default.php в соответствующую ему папку согласно структуре, описанной выше. Если директории отсутствуют, их нужно создать. Конечный файл: /templates/rhuk_milkyway/html/com_content/article/default.php

Если бы мы хотели переписать схему вывода блога при отображении категории, то мы скопировали бы этот файл:

/components/com_content/views/category/tmpl/blog.php

в:

/templates/rhuk_milkyway/html/com_content/category/blog.php

После того как файлы скопированы, их можно изменить под свои нужды.

Дополнительные схемы вывода

В некоторых Видах можно увидеть что в некоторых из схем вывода используются файлы, которые начинаются с названия схемы вывода. Вид категории (category) и Вид Главной страницы (frontpage) содержат примеры этих файлов. Схема вывода Блог в представлении категории в общем состоит из трех частей.

blog.php  (основная схема вывода)
blog_item.php (дополнительная схема вывода)
blog_links.php (дополнительная схема вывода)

Найти, где эти дополнительные схемы вывода загружаются в файле blog.php, можно с помощью метода loadTemplate. Найдите в файле схемы вывода одну из следующих строк:

echo $this->loadTemplate('item');

или

echo $this->loadTemplate('links');

При загрузке дополнительной схемы вывода, Вид уже знает используемую схему вывода; таким образом, в переменных метода не нужно указывать префикс дополнительной схемы вывода  (загружается только 'item', а не 'blog_item').

Важно отметить, что вы можете, например, переписать только дополнительную схему вывода, не копируя весь набор файлов. Если вас устраивает схема вывода блога Joomla! по умолчанию, но вы хотите изменить только дополнительную схему вывода  item, вы можете скопировать только:

/components/com_content/views/category/tmpl/blog_item.php

в:

/templates/rhuk_milkyway/html/com_content/category/blog_item.php

Когда Joomla! анализирует состав Вида, она будет знать, что нужно загрузить blog.php по умолчанию из com_content, а для вывода части шаблона blog_item – использовать тот файл, который находится в /templates/rhuk_milkyway/html/com_content/category/.

 

 

Изменение схемы вывода модуля

Модули как и компоненты, имеют свойственную только им структуру директорий.

¦ /modules
¦ ¦ /mod_latest_news
¦ ¦ ¦ /tmpl
¦ ¦ ¦ ¦ default.php (схема вывода)
¦ ¦ ¦ ¦ helper.php (логика схемы вывода)
¦ ¦ ¦ ¦ mod_latest_news.php  (файл модуля)
¦ ¦ ¦ ¦ mod_latest_news.xml (XML файл описания модуля)

Как и у компонента, в корневой директории модуля (в примере - mod_latest_news) есть директория /tmpl/. Обычно для модуля создается только один файл разметки, но автор модуля может создать и другие.

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

/templates
¦ /beez
¦ ¦ /html
¦ ¦ ¦ /mod_latest_news (название  директории соответствует названию модуля)
¦ ¦ ¦ ¦ default.php (название файла  соответствует названию файла в модуле)

В целом структура собственной схемы вывода модуля выглядит весьма просто: /html/mod_имя_модуля/схема_вывода.php.

Копирование или создание файлов разметки для модуля

У шаблона rhuk_milkyway нет собственной разметки для модулей. Если мы хотим изменить  разметку по умолчанию для модуля новостей (mod_latest_news), то надо скопировать файл

/modules/mod_latest_news/default.php

в директорию

/templates/rhuk_milkyway/html/mod_latest_news/default.php.

Если какие-то папки отсутствуют, их нужно создать. К изменению разметки модуля нужно подходить вдумчиво, так как есть несколько способов вывода модулей. Каждый из них нужно рассматривать индивидуально.

Хром (Chrome) модуля

Joomla! 1.0 уже содержала несколько фиксированных способов отображения модулей на странице. Они были представлены числами, которые являлись вторым параметром в функции mosLoadModules('position', -2):

0	вывод модуля вертикально в таблице
1	вывод модуля в таблице
-1	вывод модуля без разметки
-2	вывод модуля в совместимом XHTML формате с названием в теге H3
-3	вывод модуля серией вложенных DIV-ов, которые давали возможность создать закругленные углы

Система была хорошей за исключением двух вещей:

Никто не мог запомнить, какое число что означало
Создать новые стили было нельзя.

В Jooomla 1.5 числа были заменены на понятные всем слова. Также был изменен синтаксис вывода позиции модуля в шаблоне. Следующий код выводит модуль в левой позиции в стиле xhtml:

 

Доступные встроенные стили в Joomla 1.5:

• table (был 0 и остается по умолчанию)
• horz (был 1)
• none (был -1)
• xhtml (был -2)
• rounded (был -3)
• outline (Новый. Используется для просмотра позиций модуля в шаблоне (как на скриншоте в начале статьи)

В коде эти стили упоминаются как chrome. Файл стиля модуля по умолчанию находится в системном шаблоне Joomla!:

/templates/system/html/modules.php

Это один из основных файлов, поэтому не стоит изменять стиль модуля непосредственно в нем так как вы можете потерять свои правки при обновлении системы.

Чтобы создать новый chrome или стиль модуля, нужно создать файл modules.php в папке templates/ваш_шаблон/html/ (та же папка, где мы сохраняли схему вывода компонента). В шаблоне rhuk_milkyway содержатся дополнительные стили хрома, например стиль вывода slider. Он описан в файле /templates/rhuk_milkyway/html/modules.php

Создать новый стиль вывода в общем несложно. Рассмотрим пример стиля вывода модуля в виде списка определений (теги DL, DT и DD).
Для начала просто добавьте написанную ниже функцию в файл /html/modules.php в директории вашего шаблона (создайте папку html если еще не сделали этого).

/*
* Module chrome that wraps the module in a definition list
*/
function modChrome_dlist($module, &$params, &$attribs) { ?>

showtitle != 0) : ?>
  

title; ?>
  


  

content; ?>
  

 

Назовем этот стиль "dlist", а название функции будет modChrome_dlist.

Функции нужно предоставить три аргумента:

объект модуля ($module), параметры  модуля (&$params) и  а атрибуты jdoc XML ($attribs).

Нам интересны три главных свойства объекта module:

showtitle (показывать название модуля или нет)
title (название модуля)
content (контент модуля включая схему вывода)

Это простой пример, и вы можете создать намного более сложные стили, используя собственные атрибуты в XML.

 

 

Изменение схемы вывода постраничной навигации

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

В шаблоне rhuk_milkyway есть хорошо прокомментированный пример переписывания схемы вывода постраничной навигации. Файл /templates/rhuk_milkyway/html/pagination.php

При вызове постраничной навигации, Joomla! будет искать этот файл в шаблонах по умолчанию. Если файл будет найден, он будет загружен и будут использованы те функции, которые в нем содержатся. Могут использоваться четыре функции.

pagination_list_footer	Выпадающий список с числом материалов, которые будут показаны на странице
pagination_list_render	Список ссылок на номера страниц и ссылок "В начало", "В конец", "Предыдущие" и "Следующие"
pagination_item_inactive	Ссылки на номера страниц кроме текущей страницы
pagination_item_active	Номер текущей страницы, обычно без гиперссылки

Вкратце

В этой части на примере шаблона rhuk_milkyway приведено краткое резюме тех принципов, которые мы рассмотрели выше.

Измененние схемы вывода компонента

Чтобы изменить схему вывода компонента com_content Вида «по умолчанию» нужно скопировать:

/components/com_content/views/article/tmpl/default.php

в:

/templates/rhuk_milkyway/html/com_content/article/default.php

Измененная схема вывода модуля

Чтобы переписать разметку модуля mod_latest_news  ив шаблоне rhuk_milkyway, скопируйте:

/components/mod_latest_news/default.php

в

/templates/rhuk_milkyway/html/mod_latest_news/default.php

Добавление новых стилей модуля

Чтобы добавить новые стили модуля (chrome), создайте файл modules.php в папке templates/ваш_шаблон/html/ и добавьте в него код.В примере это файл /templates/rhuk_milkyway/html/modules.php

Вывод постраничной навигации

Чтобы настроить селектор выбора количества материалов на странице и цепочку постраничной навигации, измените файл

/templates/rhuk_milkyway/html/pagination.php

Заключение

Joomla! 1.5, с помощью концепции MVC значительно расширила возможности и гибкость изменений для разработчика веб сайта. Используя нескольких простых способов, таких как копирование определенных файлов в определенные места в папке шаблона, и их изменение, позволяют разработчику изменить почти любой аспект вывода контента в Joomla!.