mancocapac 29 сен 2008 в 19:33

Создаем шаблон Joomlа по стандартам — часть 1 (продолжение)

8 мин

21K

CMS*

Перевод

Автор оригинала: Barrie North

Это продолжение статьи. Начало здесь.

index.php

Чем на самом деле является файл index.php? Это комбинация (X)HTML и PHP, которая определяет все необходимое для отображения элементов страницы.

Сначала посмотрим на элемент, который крайне важен для создания валидных шаблонов — DOCTYPE в верхней части файла index.php. Этот фрагмент кода отображается в верхней части всех веб-страниц. На страницах нашего шаблона мы видим следующее:

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

DOCTYPE веб-страницы — это один из фундаментальных параметров, на основании которого браузер решает, как ему отображать эту страницу, в частности, как браузеру интерпретировать CSS. Для лучшего понимания приведем здесь хорошую цитату с сайта alistapart.com:

[Информация на сайте W3C о DOCTYPE] составлена гиками для гиков. И когда я говорю «гики», я не имею в виду обычных профессионалов Веб, таких как я или вы. Я имею в виду тех гиков, которые заставляют нас выглядеть как Бабушку в тот день, когда Она Впервые Получила E-mail.

В любом случае, вы можете использовать разные DOCTYPE. По существу, DOCTYPE говорит браузеру, как интерпретировать страницу. С самого начала, когда появился Веб, разные браузеры имели разные уровни поддержки CSS. Так, например, Internet Explorer не поймет команду «min-width», используемую для установки минимальной ширины страницы. Для того, чтобы продублировать эффект, вам придется использовать «хаки» в CSS.

Некоторые говорят, что обработка XHTML как text/html должна считаться «вредной». Если вы действительно понимаете это утверждение, то вы находитесь далеко за пределами этого руководства. Вы можете прочитать больше на эту тему по адресу hixie.ch/advocacy/xhtml. «Strict» означает, что HTML (или XHTML) должен интерпретироваться в точности по стандартам. А «Transitional» в DOCTYPE означает, что на странице дозволены определенные отступления от стандартов.

Чтобы усложнить картину, добавим, что существует еще так называемый режим «quirks» (специальных ухищрений). Если DOCTYPE указан неверно, с неправильной датой, или вообще не указан, браузер переходит в режим «quirks». На самом деле, это попытка обеспечения обратной совместимости, так, например, Internet Explorer 6 будет интерпретировать страницу так, как это делал бы IE4.

К сожалению, люди иногда совершенно случайно переходят в режим «quirks». Обычно это происходит по двум причинам:

Они используют декларацию DOCTYPE, копируя ее непосредственно с сайта W3C, вследствие чего конец ссылки выглядит как DTD/xhtml1-strict.dtd, в то время как это относительная ссылка на сервере W3C. Вам нужно указывать путь полностью, как в примере, приведенном выше
Фирма Microsoft разработала свой IE6 так, чтобы он выдавал валидные страницы, пребывая при этом в режиме «quirks». Это обычно случается, когда «xml declaration» указывется до DOCTYPE.

Далее указывается следующее XML-выражение (после DOCTYPE):
```
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
```
Пояснения насчет режима «quirks» в IE очень важны. В этой статье мы разрабатываем шаблон для IE6+, следовательно мы должны быть уверены, что он работает в стандартном режиме. Это минимизирует необходимость хаков, которые нам придется позже применить.

ПРИМЕЧАНИЕ
Создание страниц, соответствующих стандартам, когда вы видите «valid xhtml» в нижней части страницы, не означает в действительности трудоемкой верстки или использования малопонятных тегов. Это просто означает, что разрабатываемый вами код, соответствует заявленному DOCTYPE, и ничего более.

Разработка сайта по стандартам может быть описана одной фразой как «говори, что ты делаешь, а затем делай то, что говоришь».

Ниже приведены несколько ссылок, которые помогут вам разобраться с параметром DOCTYPE и режимом «quirks»:
Что еще есть в файле index.php?

Посмотрите сначала на структуру заголовка. Мы хотим быть минималистичны, насколько это возможно, но при этом иметь все необходимое для создания работающего сайта. Мы используем следующий заголовок:
```
<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
```
Что все это означает?

Мы уже рассказывали о значении DOCTYPE в файле index.php. Фрагмент
```
<?php echo $this->language; ?>
```
извлекает установленный язык из глобальной конфигурации.

Следующий фрагмент включает дополнительную информацию для заголовка:
```
<jdoc:include type="head" />
```
Это заголовочная информация, которая задана в глобальной конфигурации. Она включает в себя следующие теги (в инсталляции по умолчанию):
```
<title>Welcome to the Frontpage</title>  
<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />  
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />  
<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="/component/content/?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />  
<link href="/component/content/?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />  
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/mootools.js"></script>
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/caption.js"></script>
```
Большая часть этой информации генерируется «на лету» в соответствии с данными текущей страницы (статьи). Она включает в себя ряд мета-тегов для favicon, адресов RSS-потоков и некоторых стандартных JavaScript-файлов.

Последние строки в заголовке содержат ссылки на CSS-файлы шаблона:
```
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
```
Первые два файла — system.css and general.css содержат некоторые основные стили Joomla. Последний содержит все стили шаблона и называется здесь template.css. Фрагмент кода PHP
```
<?php echo $this->template ?>
```
возвращает название текущего шаблона. Указание его именно таким образом, вместо реального пути, делает код более переносимым. Когда вы создаете новый шаблон, вы можете просто скопировать его (включая весь заголовок), не беспокоясь о внесении исправлений.

В заголовке может быть указано любое количество CSS-файлов, например, для условных стилей, определяемых для разных браузеров. Например, следующий фрагмент определяет такую таблицу стилей для IE6:
```

```
Следующий пример показывает, как могут использоваться параметры шаблона:
```
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />
```
Пустое тело шаблона

Создание нашего первого шаблона будет очень-очень простым! Вы готовы?

Все, что необходимо, — это использовать выражения Joomla, которые добавят содержимое всех модулей в основное тело страницы (mainbody):
```
<body>
<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
</body>
```
В настоящий момент наш сайт не вылядит особенно впечатляюще (см.
иллюстрацию)

Шаблон содержит следующие элементы, размещенные в логическом порядке:
- название сайта
- верхний модуль
- левые модули
- основной контент
- правые модули
Что необходимо знать

По существу, шаблон просто загружает модули Joomla и mainbody (компонент). Расположение элементов и дизайн — это дело CSS, а не Joomla.

Нашей целью является как можно ближе приблизиться к семантической разметке. С точки зрения Web, это означает, что страница может быть прочитана браузером, «пауком» поисковой системы или устройством чтения с экрана. Семантическая разметка является краеугольным камнем доступности.

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

Вы заметили, что мы впервые использовали набор команд, специфичных для Joomla:
```
<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
```
PHP-выражение «echo» просто отображает строку из файла configuration.php. Здесь мы использовали название сайта, но можно, например, отобразить и другие параметры:
```
The name of this site is <?php echo $mainframe->getCfg('sitename');?><br />
The administrator email is <?php echo $mainframe->getCfg('mailfrom');?><br />
This template is in the <?php echo $this->template?> directory<br />
The URL is <?php echo JURI::base();;?>
```
Выражение «jdoc» вставляет различные типы XHTML-вывода, как модулей, так и компонентов. Следующая строка вставляет вывод компонента. Какой компонент будет использован, будет определяться ссылкой в меню:
```
<jdoc:include type="component" />
```
ПРИМЕЧАНИЕ
Достаточно интересно, вам кажется, что вывод компонента можно использовать несколько раз. Не уверен, что вам захочется сделать это, но я говорю вам, что это может быть ошибкой.

Эта строка вставляет вывод всех модулей, заданных для места «right»:
```
<jdoc:include type="modules" name="right" />
```
На самом деле, полный синтаксис такой:
```
<jdoc:include type="modules" name="LOCATION" style="OPTION" />
```
Мы рассмотрим различные варианты опций для стилей в разделе о модулях позднее.

CSSTemplateTutorialStep1

В настоящий момент у нас получился совсем голый шаблон. Мы сделали инсталлируемый вариант, который доступен в библиотеке Compass. Вы можете скачать его по ссылке: www.compassdesigns.net/downloads/file/21-csstemplatetutorials1-4.html

Шаблон, созданный на шаге 1, состоит только из двух файлов, index.php и templateDetails.xml. Я убрал ссылки на все остальные файлы, чтобы показать «голое» отображение, без CSS. На самом деле, это хороший диагностический шаблон, который позволяет установить его и отслеживать ошибки, которые возникают в компоненте или в модуле.

Оригинал статьи на английском можно прочитать здесь:
www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html?start=2

Продолжение здесь

Теги:

Хабы:

Создаем шаблон Joomlа по стандартам — часть 1 (продолжение)

index.php

Что еще есть в файле index.php?

Что все это означает?

Пустое тело шаблона

Что необходимо знать

CSSTemplateTutorialStep1

Публикации

Истории

Ближайшие события