Создание нового шаблона на основе «Atomic»

Шаблон «Atomic» можно использовать в качестве основы для создания собственного. В состав «Atomic» входят следующие папки и файлы:

• Папка «atomic», расположенная в папке «templates». В ней хранятся следующие файлы:
• «component.php» — версия шаблона для печати;
• «error.php» — страница сообщений об ошибках;
• «favicon.ico» — значок сайта (статья о значках в Википедии);
• «index.html» — пустая страница, выводимая при попытке получить прямой доступ к папке. Подобные файлы являются мерой предосторожности: они не позволяют видеть содержимое папки;
• «index.php» — основной файл шаблона;
• «templateDetails.xml» — конфигурационный файл, хранящий информацию о файлах, параметрах и модульных позициях. Благодаря ему с «Atomic» может взаимодействовать менеджер шаблонов, он же нужен для создания установочного пакета шаблона;
• template_thumbnail.png — миниатюра шаблона, выводимая в таблице менеджера шаблонов;
• template_preview.png — изображение шаблона, предназначенное для предварительного просмотра.
• Папка «css», расположенная по адресу /templates/atomic/. В ней хранятся файлы CSS.
• Папка «html», расположенная по адресу /templates/atomic/. В ней хранятся файлы переопределения (override). Шаблон «Atomic» предоставляет возможность переопределения для модулей;
• Папка «images», расположенная по адресу /templates/atomic/. В ней хранятся изображения шаблона;
• Папка «js», расположенная по адресу /templates/atomic/. В ней хранятся скрипты JavaScript;
• Папка «languages», расположенная по адресу /templates/atomic/. В ней хранятся файлы со значениями языковых переменных. В исходной комплектации это англоязычные значения.

Основной файл шаблона index.php

В силу того, что Joomla! ищет встроенный тег <jdoc> и команды PHP, основной файл шаблона должен называться именно так: index.php. Вся необходимая разметка HTML с комментариями там уже содержится. Можете менять ее в соответствии с вашими потребностями.

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

24-я строка¹ [а также следующие пять — прим. перев.] содержит код загрузки CSS-фреймворка «Blueprint».

По коду в 50-й, 55-й, 61-й и пр. строках можно увидеть, что шаблон предлагает ряд модульных позиций с особыми названиями, например, «atomic-search», «atomic-topmenu» и т. д. Если в интерфейсе настройки модуля в соответствующем поле вы выберете одно из них, то модуль будет выводиться в соответствующей позиции. Изменить названия позиций можно файле «templateDetails.xml».

В 40-й строке можно увидеть следующий фрагмент кода:

echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js

Joomla «знает» значение «baseurl», а также название активного шаблона, поэтому при необходимости можно получить доступ к этим данным.

В 46-й строке можно увидеть следующий фрагмент:

echo $app->getCfg(’sitename’);

Он используется для получения названия сайта.

48-я строка содержит следующий фрагмент:

if($this->countModules(’atomic-search’))…

Он предназначен для подсчета модулей в позиции atomic-search и сообразной настройке макета.

В 50-й строке содержится следующий фрагмент:

<jdoc:include type="modules" name="atomic-search" style="none" />

Он содержит команду «jdoc», относящуюся сугубо к набору команд Joomla. Она нужна для вставки в атрибуты кода HTML определенного типа. В данном случае имеется в виду вывод всех модулей, относящихся к позиции «atomic-search». Атрибут «style» называется «module chrome» и может иметь следующие значения:

• «table» — для вывода контента в таблице;
• «horz» — контент выводится горизонтально в ячейке родительской таблицы;
• «xhtml» — контент выводиться в теге <div> в соответствии с требованиями к XHTML;
• «rounded» — вывод в формате, позволяющем использовать закругленные углы. Класс элемента переименован из «moduletable» в «module»;
• «none» — без форматирования;
• «outline» — вывод в режиме отображения модульных позиций (?tp=1);
• индивидуальный стиль шаблона. Некоторые шаблоны имеют собственные стили. Примером может служить «Beez», подробнее о котором рассказывается в главе «Шаблон Beez».

С полным перечнем «стилей» можно ознакомиться в статье [на английском] «What is module chrome», на сайте документации Joomla.

Примеры атрибута «type» команды <jdoc>:

• <jdoc:include type="head" />
• <jdoc:include type="message" />
• <jdoc:include type="component" style="none" />

У каждой страницы [выводимой Joomla] должен быть заголовок документа (head) и вывод одного компонента (component). Иногда еще нужна строка системных сообщений (message). Примером служебного сообщения может быть то, которое система выводит после успешного сохранения настроек. С типом «component» может использоваться «module chrome».

Файлы вывода сообщений об ошибках и версии для печати «работают» в точности также, как и основной файл.

Папка CSS

В папке «CSS» — три файла.

• «template.css» — файл с предварительно записанными правилами CSS. Часть из них — закомментирована и помечена. Раскомментировать их следует, если вы не хотите использовать CSS-фреймворк «Blueprint».
• «template_ie.css» — пуст. В него записываются переопределяющие стили для браузера Internet Explorer.
• «template_rtl.css» — также пуст. В него записываются переопределяющие стили для языков с направлением письма справа налево.

CSS-фреймворк «Blueprint»

«Blueprint» — это фреймворк, призванный сократить время разработки и увеличить совместимость создаваемых каскадных таблиц стилей (CSS) с разными браузерам.

Вот отрывок из файла README:

Мы рады, что вы проявили интерес к «Blueprint»! «Blueprint» — это фреймворк, призванный сократить время разработки каскадных таблиц стилей [CSS]. Он предоставляет надежный фундамент для создания собственных правил CSS. Вот, что может предложить вам исходная версия фреймворка:

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

Примеры и учебные пособия публикуются на сайте проекта [на англ.]: http://www.blueprintcss.org/.

¹ Номера строк могут отличиться от указанных.