Альтернативный макет пункта меню ч.3

Теперь давайте рассмотрим другой вариант создания альтернативного макета с привязкой к пункту меню. Идем в директорию – /templates/ваш шаблон/html/com_content/categoty и создаем копию файла blog.xml и далее переименовываем на (в моем случае) myblog.xml. Теперь давайте откроем данный файл. В начале файла мы увидим структуру следующего вида:

<layout title="COM_CONTENT_CATEGORY_VIEW_BLOG_TITLE" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION"><help key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG" /><message><![CDATA[COM_CONTENT_CATEGORY_VIEW_BLOG_DESC]]></message></layout>

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

COM_CONTENT_CATEGORY_VIEW_BLOG_TITLE
COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION
JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG
COM_CONTENT_CATEGORY_VIEW_BLOG_DESC

Я назвал их следующим образом:

COM_CONTENT_CATEGORY_VIEW_MYBLOG_TITLE
COM_CONTENT_CATEGORY_VIEW_MYBLOG_OPTION
JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_MYBLOG
COM_CONTENT_CATEGORY_VIEW_MYBLOG_DESC

Идем в менеджер языков и создаем переопределения констант для области панель управления с нужным вам языком. Мне хватило создать переопределения для двух констант: COM_CONTENT_CATEGORY_VIEW_MYBLOG_TITLE и COM_CONTENT_CATEGORY_VIEW_MYBLOG_DESC.

Создаем новый пункт меню, выбираем тип “Материалы” и видим, что там появился новый тип созданного нашего альтернативного макета. Я назвал его “Альтернативный макет блога категории”.

Теперь вывод статей в данном пункте меню будет отображаться в соответствии с созданным макетом.

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

Стиль модуля

Давайте вернемся к нашим модулям и посмотрим, что еще там можно сделать, чтобы упростить нам жизнь. До сих пор мы разбирали внутренние макеты каждого расширения, говорили о том, что их можно переопределить, но у модулей есть как бы еще и внешняя оболочка, которая была нам недоступна при вышесказанных методах. Что это за оболочка такая? Это, например, блок с классом moduletable, который окутывает каждый модуль со стандартным стилем вывода xhtml. Также сюда можно включить еще и заголовок модуля, который по умолчанию выводится в теге H3. Теперь представьте ситуацию – вам нужно одному из модулей, вернее его заголовку изменить тег H3 на обычный div-блок с определенным классом, скажем, класс moduleTitle, + еще добавить внутрь данного блока тег span, т.е. обрамить заголовок еще дополнительным тегом span. Это касалось отдельного модуля. А что, если вам нужно вывести таким образом все модуля в определенной модульной позиции?

Давайте будем разбираться. Мы можем создать уникальную обертку и назначить ее любому модулю. Для этого создаем файл modules.php в папке вашего шаблона, а именно полный путь выглядит так – /templates/ваш шаблон/html/modules.php. Открываем данный файл и вставляем в него следующий код:

<?php/** * @package Joomla.Site * @subpackage Template.system * * @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt */defined('_JEXEC') or die;/* * xhtml */function modChrome_xhtml($module, &$params, &$attribs) { if (!empty ($module->content)) : ?> <div class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>"> <?php if ((bool) $module->showtitle) : ?> <h3><?php echo $module->title; ?></h3> <?php endif; ?> <?php echo $module->content; ?> </div> <?php endif;}

Но не спешите сохранять, нам надо его еще отредактировать, а если быть точнее создать уникальный стиль модуля, иначе на сайте выскочит ошибка в виде белого экрана (при отключенном отображении ошибок), т.к. данный стиль уже существует. Нас интересует функция “modChrome_xhtm” дадим ей уникальное имя, я назвал так – “modChrome_myStyle”. Все, теперь содержимое функции можно подредактировать так, как нам это нужно. В результате, если осуществить задуманное я модернизировал код следующим образом:

<?php/** * @package Joomla.Site * @subpackage Template.system * * @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt */defined('_JEXEC') or die;/* * myStyle */function modChrome_myStyle($module, &$params, &$attribs) { if (!empty ($module->content)) : ?> <div class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>"> <?php if ((bool) $module->showtitle) : ?> <div class="moduleTitle"><span><?php echo $module->title; ?></span></div> <?php endif; ?> <?php echo $module->content; ?> </div> <?php endif;}



Теперь можно сохранить данный файл. Следующее, что мы сделаем, идем в менеджер модулей и открываем на редактирование нужный модуль. Переходим на вкладку “Дополнительные параметры”, спускаемся вниз и в последнем фильтре “Стиль модуля” видим, что у нас появился дополнительный стиль – у меня это myStyle.

Выбираем данный стиль и наблюдаем результат. Если проинспектировать Firebug’ом видим, что вместо обычного заголовка H3 у нас появился div-блок с классом moduleTitle, содержащий еще и внутренний тег span.

Эта особенность назначать уникальный стиль каждому модулю появилась в joomla 3. 

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

<jdoc:include type="modules" name="header" style="layout_xhtml" />

name=”header” – вместо header вводите свое название модульной позиции.

Если вы заметили в данной позиции выводится стандартный стиль – xhtml. Заменим его на наш созданный – myStyle, т.е. вот так:

<jdoc:include type="modules" name="header" style="layout_myStyle" />

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

Дополнительные возможности

Если вы заметили в той же вкладке модуля “Дополнительные параметры” помимо полей “Альтернативный макет” и “Стиль модуля” присутствуют также такие поля, как, “Суффикс CSS-класса модуля”, “Кэширование”, “HTML-тег модуля”, “Размер Bootstrap”, “HTML-тег заголовка”, “CSS-класс заголовка”. Ну, поле “Кеширование” к шаблонизации отношения не имеет, поэтому пока его опустим. Рассмотрим остальные поля.

Суффикс CSS-класса модуля – добавляет суффикс к блоку с классом moduletable. Дополнительный класс можно задать, как через пробел, так и через дефис или вовсе написать слитно. Таким образом, мы можем уникализировать класс блока модуля и писать для него такие стили, какие хотим.

HTML-тег модуля – работает, если мы выберем стиль модуля html5. Данный стиль создан по умолчанию. Опция позволяет заменить стандартный div-блок на один из выбранных элементов html5 – section, nav, article и т.д.

Размер Bootstrap – работает при выбранном стиле модуля html5. Данная опция актуальна только в том случае, если вы в своем шаблоне сайта используете фреймворк Twitter Bootstrap. Указывает размер модуля, выбирая соответствующую цифру. Например, если выберем цифру 2, то в наш блок с классом moduletable добавится через пробел класс span2. Если вы знакомы с данным фреймворком, то знаете что блок с классом span2 имеет свою определенную ширину и данная ширина адаптируется в зависимости от размера экрана окна браузера.

HTML-тег заголовка – работает при выбранном стиле модуля html5. Если помните, по умолчанию тег заголовка у модуля – H3. Так вот, данный тег можно переопределить уровнем заголовка от H1 до H6 или выбрать тег параграфа – p.

CSS-класс заголовка – также, данная опция будет работать при выбранном стиле html5. Задает класс заголовку модуля.

Вот в принципе и все, что я знаю о шаблонах joomla и о чем я вам хотел рассказать. Если всплывет еще что то, то обязательно добавлю в данную статью.

Напоследок напомню – всегда переопределяйте стандартные шаблоны при верстке шаблона, иначе рискуете потерять все изменения при обновлении движка или расширений!