Внедрение модуля Joomla!

Внедрение модуля Joomla!

Внедрение модуля Joomla! проводится с помощью команд, встроенных в HTML код. Это могут быть и старые команды Joomla! 1.0.x или Mambo 4.5.x, или новые команды patTemplate. Класс patTemplate служит для дифференцирования PHP и HTML кода. Для интеграции в шаблон различных элементов, Joomla! использует объект типа jdoc. Если, вместо тега <title>, вы вставите в заголовок файла index.php следующую строку, в окне веб обозревателя при загрузке вашего сайта корректно отобразятся иконка сайта, заголовок страницы и символ источника новостей (Newsfeed symbol):

<head>

<jdoc:include type="head" />

</head>

Рис. 5: Иконка сайта и заголовок страницы

Если вы откроете исходный код этой страницы, то заметите, что Joomla! копировала все метаданные, введенные через панель администратора в HTML код. В дополнение к этому источники RSS также были интегрированы в страницу в виде тегов ссылок, отображаемых как символы источников новостей (Newsfeeds) в веб обозревателях, поддерживающих данную технологию (Firefox, Opera и т.д.).

Листинг 4: Метаданные Joomla!

<head>

<title>Joomla 1.5.0 – Home</title>

<meta name="generator" content="Joomla! 1.5" />

<meta name="description" content="Joomla! – the dynamic portal engine and content management system" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="robots" content="index, follow" />

<meta name="keywords" content="joomla, Joomla" />

<link href="http://localhost/Joomla150/feed.php?option=comfrontpage&amp; Itemid=1&amp;format=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />

<link href="http://localhost/Joomla150/feed.php?option=comfrontpage&amp; Itemid=1&amp;format=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />

<link href="favicon.ico" rel="shortcut ico" rel="shortcut icon" type="image/x-icon" />

</head>

Если данный фрагмент кода работает, можно перейти к другим важным объектам jdoc.

Например, команда <jdoc:includetype="modules"name="top"style="-1" /> получает тип вставляемого объекта в качестве параметра (в данном случае это “modules”). Параметр “name” определяет положение модуля. (top, right, left, user1 и т.д.). Установить положение модуля можно также в административной части Joomla! (Extensions | Module Managers, категория Position). Список всех возможных позиций можно посмотреть в Extensions | Templates | Module Positions. Последний параметр “style” содержит значение, которое определяет тип HTML кода, передаваемый модулем. Например, значение –1 передает «чистый» HTML без использования контейнерных тегов <div>.

Параметр   Отображение

     1     Горизонтальное меню

    -1     «Чистое» отображение без использования начального и замыкающего тегов <div>

    -2     Отображение в виде XHTML

    -3     форматирования круглых углов

Таблица 1: Параметры модуля

Описание возможных вставок в index.php объектов jdoc можно увидеть в следующем листинге:

Листинг 5:index.php сjdoc вставками

<html>

<head>

<jdoc:include type="head" />

<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />

<link rel="stylesheet" href="templates/{TEMPLATE}/css/template.css" type="text/css" />

</head>

<body bgcolor="#FFFFFF" text="#000000">

<table width="780" border="1">

<!– Section 1 –>

<tr>

<!– Part 1 –>

<td colspan="2" height="89" bgcolor="#F5C228">&nbsp;</td>

<!– Part 2 –>

<!– Section 3 –>

<tr bgcolor="#FFCC33">

<!– Part 7 –>

<td colspan="3" height="40">

<jdoc:include type="modules" name="footer" style="-1" />

</td>

</tr>

</table>

</body>

</html>

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

Конечно, до визуального совершенства еще далеко, но сайт уже работает:

Рис. 6: Шаблон с динамическими данными

Теперь перейдем к CSS форматированию, чтобы улучшить внешний вид нашего сайта.

Копируйте следующий код в файл template.css. В данном фрагменте кода мы определяем, что шрифтом по умолчанию будет Arial, ссылки не будут подчеркиваться, а при наведении на них курсора изменят цвет и толщину букв.

Листинг 6: template.css

body {

font-family: Arial, Helvetica, Sans Serif;

}

a:link, a:visited {

color: #ff6600;

text-decoration: none;

font-weight: bold;

font-size: 15px;

}

a:hover {

color: #C43C03;

text-decoration: none;

font-weight: bold;

font-size: 15px;

}

Эти изменения значительно улучшат внешний вид нашего сайта. На рисунке внизу курсор мыши указывает на ссылку «More About Joomla», шрифт при этом меняет цвет и толщину:

Рис. 7: Шаблон с CSS файлом

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

Более 800 000 книг и аудиокниг! 📚

Получи 2 месяца Литрес Подписки в подарок и наслаждайся неограниченным чтением

ПОЛУЧИТЬ ПОДАРОК