Любопытно и поучительно посмотреть дефолтные данные дистрибутива Joomla 2.5. В только что установленном сайте, в открывшейся главной странице сайта, в главном меню This Site кликнем на пункте Sample Sites. Читаем:

" Дефолтные данные дистрибутива Joomla 2.5 содержат образцы данных, разработанных так, чтобы показать вам некоторые варианты для создания вашего сайта. В дополнение к информации о Joomla! есть два образца "сайтов внутри сайта" разработаных так, чтобы помочь вам начать работу с создания собственного сайта.

Первый сайт Australian Parks - это простой сайт об австралийских парках. Он показывает, как можно быстро и легко создать Персональный сайт используя готовые "строительные" блоки, которые являются частью Joomla. Он включает в себя персональный блог, веб-ресурс, и очень простую Галерея изображений.

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

 При создании своего сайта вам захочется либо поменять стиль сайта, или что-то совершенно другое, вы, вероятно, захотите добавить расширения, либо создать или приобрести свой собственный шаблон.

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

Посмотрим, каким образом это сделано в демоданных.

Внутренний сайт Australian Parks

Еще раз посмотрим на категории материалов в дефолтной поставке Joomla 2.5:

Uncategorised
Sample Data-Articles
|— Joomla!
|—|— Extensions
|—|—|— Components
|—|—|— Modules
|—|—|—|— Content Modules
|—|—|—|— User Modules
|—|—|—|— Display Modules
|—|—|—|— Utility Modules
|—|—|—|— Navigation Modules
|—|—|— Templates
|—|—|—|— Atomic
|—|—|—|— Beez 20
|—|—|—|— Beez 5
|—|—|— Languages
|—|—|— Plugins
|— Park Site
|—|— Park Blog
|—|— Photo Gallery
|—|—|— Animals
|—|—|— Scenery
|— Fruit Shop Site
|—|— Growers
|—|— Recipes

Нам интересно посмотреть категории Park Site и Fruit Shop Site. В этих категориях будет содержаться контент, относящийся к двум внутренним сайтам.

Интересно так же посмотреть на типы пунктов меню, которые указывают на эти категории!: В меню Top (верхнее горизонтальное) и в меню Main Menu есть пункт "Sample Sites". При клике на этот пункт, мы попадем на страницу, в которой расположена статья, рассказывающая о двух внутренних сайтах, созданных внутри основного сайта.

Кроме этой статьи на странице больше ничего нет, кроме шапки сайта и позиций модулей, то есть всю остальную "картину" определяет шаблон сайта. Для того, чтобы увидеть расположение позиций в шаблоне сайта, наберем такой адрес: /joomla/index.php/sample-sites/?tp=1

Мы видим, что в позиции position-5 находится таблица с вкладками, в которой содержатся два меню. Эти меню осуществляют навигацию по двум внутренним сайтам, которые мы хотим рассмотреть - Australian Parks и  Fruit Shop.

Два модуля типа меню и position-5

Зайдем в менеджер модулей. Здесь нас интересуют модули, расположенные в позиции position-5 имеющей шаблон beezTabs: Наберем в фильтре менеджера модулей эту позицию и увидим, что в эту позицию выведено два модуля:

- Australian Parks  (position 5) - привязан к меню  Australian Parks (ко всем пунктам) и пункту Sample Sites меню Main Menu.
- Fruit Shop (position 5) - привязан к меню  Fruit Shop (ко всем пунктам) и пункту Sample Sites меню Main Menu.

Здесь благодаря тому, что эта позиция position-5 выведена в стиле beezTabs, расположенные в этой позиции модули типа меню будут выведены в виде таблицы со вкладками! Сколько модулей, столько вкладок:

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

Шаблон стиля beezTabs находится: joomla\templates\beez5\html\modules.php имеет такой код:

/**
 * beezTabs chrome.
 *
 * @since       1.6
 */
function modChrome_beezTabs($module, $params, $attribs)
{
        $area = isset($attribs['id']) ? (int) $attribs['id'] :'1';
        $area = 'area-'.$area;
        static $modulecount;
        static $modules;
        if ($modulecount < 1) {
                $modulecount = count(JModuleHelper::getModules($attribs['name']));
                $modules = array();
        }
        if ($modulecount == 1) {
                $temp = new stdClass();
                $temp->content = $module->content;
                $temp->title = $module->title;
                $temp->params = $module->params;
                $temp->id=$module->id;
                $modules[] = $temp;
                // list of moduletitles
                // list of moduletitles
                echo '<div id="'. $area.'" class="tabouter"><ul class="tabs">';
                foreach($modules as $rendermodule) {
                        echo '<li class="tab"><a href="#" id="link_'.$rendermodule->id.'" class="linkopen" onclick="tabshow(\'module_'. $rendermodule->id.'\');return false">'.$rendermodule->title.'</a></li>';
                }
                echo '</ul>';
                $counter=0;
                // modulecontent
                foreach($modules as $rendermodule) {
                        $counter ++;
                        echo '<div tabindex="-1" class="tabcontent tabopen" id="module_'.$rendermodule->id.'">';
                        echo $rendermodule->content;
                        if ($counter!= count($modules))
                        {
                        echo '<a href="#" class="unseen" onclick="nexttab(\'module_'. $rendermodule->id.'\');return false;" id="next_'.$rendermodule->id.'">'.JText::_('TPL_BEEZ5_NEXTTAB').'</a>';
                        }
                        echo '</div>';
                }
                $modulecount--;
                echo '</div>';
        } else {
                $temp = new stdClass();
                $temp->content = $module->content;
                $temp->params = $module->params;
                $temp->title = $module->title;
                $temp->id = $module->id;
                $modules[] = $temp;
                $modulecount--;
        }
}

 Если бы позиция position-5 была выведена в стиле beezDivision, то расположенные в этой позиции модули
типа меню будут выведены последовательно один под другим:

/**
 * beezDivision chrome.
 *
 * @since       1.6
 */
function modChrome_beezDivision($module, &$params, &$attribs)
{
        $headerLevel = isset($attribs['headerLevel']) ? (int) $attribs['headerLevel'] : 3;
        if (!empty ($module->content)) { ?>
<div class="moduletable">
 <h><span
        class="backh"><span class="backh2"><span class="backh3"><?php echo $module->title; ?></span></span></span></h<?php echo $headerLevel; ?>>
<?php }; ?> <?php echo $module->content; ?></div>
<?php };
}

Два меню: Australian Parks и Fruit Shop

Зайдем в менеджер меню. В нем в частности видим два меню: Australian Parks и  Fruit Shop. Ранее мы видели, что имеются два модуля типа Меню:  Australian Parks и  Fruit Shop, для каждого модуля выбрано одноименное меню, и сделана привязка ко всем пунктам этого меню, и кроме того к пункту Sample Sites меню Main Menu. Оба эти модули выведены в позиции position-5. Мы уже говорили в каком стиле (beezTabs) в шаблоне сайта выводится эта позиция:

 
    <jdoc:include type="modules" name="position-7" style="beezDivision" headerLevel="3" />
    <jdoc:include type="modules" name="position-4" style="beezHide" headerLevel="3" state="0 " />
    <jdoc:include type="modules" name="position-5" style="beezTabs" headerLevel="2"  id="3" />
 

Здесь видим так же в каком стиле выводится 7-я и 4-я позиция.

Еще раз вернемся к верхнему горизонтальному меню. В верхнем Топ-меню есть пункт "Sample Sites" он имеет тип "Псеводним пункта меню", и справа на странице редактирования этого пункта меню указан пункт меню, псевдонимом которого он является - Sample Sites. Этот пункт Sample Sites (не псевдоним) меню MainMenu имеет тип "Материалы", имя материала: Sample Sites, категория Joomla!.

Впрочем категорию материала, на который указывает пункт меню, на странице редактирования пункта меню мы посмотреть не можем. То есть пункт меню с типом "Материалы" указывает прямо на материал, не указывается категория. А категорию мы можем посмотреть на странице редактирования самого материала. Там указывается категория - Joomla.

На странице редактирования пункта Sample Sites меню MainMenu мы можем посмотреть модули, которые "привязаны" к этому пункту меню:

- Australian Parks  (position 5)
- Fruit Shop (position 5)

Наберем такой адрес, то увидим расположение позиций: /joomla/index.php/sample-sites/?tp=1

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

Типы пунктов меню

Пункты меню  Australian Parks:

Parks Home              тип: Материал         (категория -Park Site)
Park Blog                  тип: Блог категории   (категория --Park Blog)
Write a Blog Post     тип: Создать материал
Image Gallery           тип: Список всех категорий (категория --Photo Gallery)
|— Animals              тип: Блог категории   (категория ---Animals)  
|— Scenery               тип: Блог категории   (категория ---Scenery)
Park Links                 тип: Список ссылок в категории

Здесь пункт меню Write a Blog Post будет виден только зарегистрированному пользователю. На этой странице зарегистрированный пользователь сможет внести новый материал в сайт, при этом он укажет имеющуюся категорию или создаст новую.

Важно!: На всех страницах, на которые мы будем попадать, кликая по пунктам меню Australian Parks, будет использоваться новый стиль шаблона сайта, а именно стиль, специально созданный для данного внутреннего сайта. Благодаря этому пользователь сразу понимает, что попал в новый сайт! Стиль шаблона сайта определяет настроение и впечатление о сайте.

То, какой именно стиль шаблона страницы (можно сказать сайта) будет применен для того или иного пункта меню определяется опцией "Стиль шаблона" на странице редактирования пункта меню. В данном случае применен стиль Beez2 - Park Site шаблона Beez_20.

Стили шаблона

Зайдем в менеджер шаблонов. Посмотрим стиль Beez2 - Parks Site шаблона Beez_20. Этот стиль шаблона создан путем копирования шаблона Beez_20.

Для создания копии шаблона достаточно в менеджере шаблонов перейти на вкладку Шаблоны, выбрать в списке нужный шаблон, кликнуть по его имени. Далее на открывшейстя странице редактирования шаблона в рубрике "Создать копию шаблона" ввести имя нового шаблона в поле редактирования и нажать кнопку "Создать копию шаблона". Новый шаблон - копия предыдущего будет создан.

На этой же странице редактирования шаблона предоставляется возможность изменить шаблон главной страницы и изменить css-стили.

После создания нового шаблона, надо перейти на вкладку редактирования стиля нового шаблона и у него заменяются такие опции:

- логотип (новое изображение),
- имя сайта,
- описание сайта
- цвет шаблона (выбирается из выпадающего списка - nature)

Далее делается привязка к пунктам меню, на которых будет отображаться этот стиль шаблона, в нашем случае это все пункты меню Australian Parks. То есть теперь этот шаблон создан и адаптирован специально для этого внутреннего сайта Australian Parks!

Нас опять интересует позиция position-5 потому, что в эту позицию будет выведен модуль меню Australian Parks . Мы помним, что этот модуль был привязан ко всем пунктам меню  Australian Parks и модуль опять будет выведен в стиле стиле таблицы beezTabs. И опять это определено шаблоном, инструкцией:

<jdoc:include type="modules" name="position-5" style="beezTabs" headerLevel="2"  id="3" />
 

В данном новом стиле шаблона эта позиция будет выведена в правую колонку относительно контента страницы.

Внимание!: Имена позиций, например position-5, position-7, position-8 и тд, никак не определяют и не влияют на визуальное положение этих позиций на экранной странице. Это определяется исключительно css-разметкой данного стиля шаблона.

После того, как мы в выпадающем списке выбрали Цвет шаблона - Nature поменялся не только цвет, поменялась вся разметка страницы. Потому что вместо css-файлов типа personal.css, стали применяться файлы типа nature.css.

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

  if (file_exists(JPATH_SITE . '/templates/' . $this->template . '/css/' . $color . '_rtl.css')) {
    $doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/css/'.htmlspecialchars($color).'_rtl.css');
  }
 

Вот инструкции получения параметров и подключения стилевых файлов в шаблоне главной страницы:

// get params
$color        = $this->params->get('templatecolor');
$logo        = $this->params->get('logo');
$navposition    = $this->params->get('navposition');
$app        = JFactory::getApplication();
$doc        = JFactory::getDocument();
$templateparams    = $app->getTemplate(true)->params;
$doc->addStyleSheet($this->baseurl.'/templates/system/css/system.css');
$doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/css/position.css', $type = 'text/css', $media = 'screen,projection');
$doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/css/layout.css', $type = 'text/css', $media = 'screen,projection');
$doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/css/print.css', $type = 'text/css', $media = 'print');
$files = JHtml::_('stylesheet', 'templates/'.$this->template.'/css/general.css', null, false, true);
if ($files):
  if (!is_array($files)):
    $files = array($files);
  endif;
  foreach($files as $file):
    $doc->addStyleSheet($file);
  endforeach;
endif;
$doc->addStyleSheet('templates/'.$this->template.'/css/'.htmlspecialchars($color).'.css');
if ($this->direction == 'rtl') {
  $doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/css/template_rtl.css');
  if (file_exists(JPATH_SITE . '/templates/' . $this->template . '/css/' . $color . '_rtl.css')) {
    $doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/css/'.htmlspecialchars($color).'_rtl.css');
  }
}
 

Понятно, что программист Joomla имеет возможность в установочном xml-файле шаблона сайта добавить несколько новых значений в выпадающий список "Цвет-шаблона", и под эти значения написать новые css-стили, чтобы новые стили в новых копиях шаблона выглядели по новому! Это замечательная возможность для программиста!

Но рядовой пользователь - непрофессиональный программист - будет выбирать из уже заранее приготовленных вариантов то, что ему больше понравится.

Сайт состоит из страниц

Теперь потестируем пункты меню Australian Parks и посмотрим как выглядят отдельные страницы этого внутреннего сайта.

Пункт: Parks Home

Этот пункт имеет тип Материал (простая страница) и к нему привязана непосредственно статья Australian Parks, которая принадлежит категории Park Site. Эта страница играет роль "Главной" (домашней) страницы сайта.

Тип пункта меню Материал позволяет установить многочисленные параметры для отображения: материала, страницы, ссылки, метаданных, а так же посмотреть привязку модулей к данному пункту меню, а следовательно к данной странице. Мы видим, что модуль Australian Parks, расположенный в правой колонке, действительно привязан к данному пункту меню и потому мы видим этот модуль на данной странице.  

Пункт: Park Blog

Этот пункт имеет тип Блог категории и привязан к категории Park Blog (смотрим категории материала). Этот тип пункта меню так же имеет множество параметров. Мы можем указать:

- уровни подкатегорий
- количество материалов в категории

Можем редактировать макет вывода блога категорий - расположение и количество колонок, включать или нет материалы подкатегорий, сортировку и еще многое. Ну и как обычно можно посмотреть привязку модулей к данному пункту меню. Вообще форма вывода материала в виде блога - очень удобна и широко распространена. Потому этот пункт меню можно назвать Блог сайта! Итак у нас уже есть главная страница и блог сайта.

Пункт: Image Gallery

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

На страницу списка категорий кроме самого списка можно вывести так же картинку и текст через вставку их в поле ввода и редактирования контента страницы для списка всех категорий при помощи встроенного редактора или без такового.

Здесь надо сказать, что тип пункта меню определяется не просто так. Тип пункта меню подразумевает, что материал будет выводиться в определенном макете. Компонент com_content как и ранее расмотренный компонент com_weblinks (см. "Слоеный пирог и com_weblinks  Joomla") имеет несколько предопределенных шаблонов (макетов) в которых будет выводиться материал. Тип пункта меню указывает системе на этот макет, в котором должен быть выведен материал.

Типы пунктов меню для компонента com_content:

    Материалы (com_content)
            Архивные материалы (archive)
            Материал (article)
            Список всех категорий (categories)
            Блог категории (blog category)
            Список материалов категории (category)
            Избранные материалы (featured)
            Создать материал (form)

Своим названием тип пункта меню фактически указывает на имя шаблона своего типа компонента. А шаблоны компонентов находятся в каталогах views (вид):

joomla\components\com_content\views\archive
joomla\components\com_content\views\article
joomla\components\com_content\views\categories
joomla\components\com_content\views\blog category
joomla\components\com_content\views\category
joomla\components\com_content\views\featured
joomla\components\com_content\views\form
 

Как видим имена типов ссылок в меню и имена шаблонов в каталогах vews совпадают. Разработчик имеет возможность создавать новые нестандартные шаблоны (макеты) для компонентов. Эти новые макеты так же будут отражаться в качестве новых типов меню в окне выбора типов меню. Это отдельная тема.

Пункты: Animals и Scenery

Этот пункт является подпунктом меню Photo Gallery и имеет тип Блог категории. Этот тип мы уже рассматривали. В данном случае интересен факт, что контент данной категории состоит исключительно из ссылок и изображений, а так же краткого описания. При выводе в две колонки это создает впечатление галлереи изображений, что в данном случае очень уместно - коллекция изображений категории Animals и коллекция изображений категории Scenery. По такому принципу можно было создать например коллекцию картин художника такого-то и художника такого-то.

Пункт: Park Links

Этот пункт меню имеет тип Список ссылок в категории. Связан с категорией Park Links. Эта категория принадлежит компоненту com_weblinks, о котором шла речь в предыдущей статье (см. "Слоеный пирог и com_weblinks  Joomla").

Список ссылок в категории выводится в виде таблицы, второй столбец - хиты (макет category). Изображение задается в основных параметрах редактирования категории ссылок.

Мы рассмотрели все пункты меню данного внутреннего сайта. Во всех пунктах меню, кроме Park Home и Image Gallery центральная картинка выводится при помощи ссылки, указанной в основных параметрах.

А на "Главной странице", то есть Park Home и в и Image Gallery картинка вставлена непосредственно в текст статьи. Такое поведение определено макетами статей, категорий, списков категорий, блога категорий.

Рассмотрение второго внутреннего сайта Fruit Shop сделаем в следующей статье.

Резюме

Прочитав эту статью мы поняли как встроенными средствами, не написав ни единой строки кода, создать сайт (или два!) внутри сайта. Причем эти внутренние сайты будут обладать всеми теми возможностями, какими обладает и "внешний" сайт а именно - имеют свой собственный шаблон, определяющий дизайн сайта. Имеют разветвленное дерево категорий контента, которое отражает структуру сайта. Имеют разные типы страниц, модулей помогающих донести до посетителя концепцию и цель сайта.

Это замечательная встроенная возможность CMS Joomla!