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

Благодарим за вклад: 

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

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

Основной файл шаблона

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

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

Меняя код на строке № 24, Вы можете выбрать будет ли использоваться CSS-фреймворк «Blueprint».

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

В 48-й [в версии 1.7.2 — в 41-й] строке можно увидеть следующий фрагмент кода:

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

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

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

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

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

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

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

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

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

<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 — три файла:

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

Фреймворк «Blueprint»

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

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

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

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

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