Внедрение модуля 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& Itemid=1&format=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="http://localhost/Joomla150/feed.php?option=comfrontpage& Itemid=1&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"> </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! нами решены. Остается только заархивировать шаблон в установочный пакет.