Методика создания шаблона

Начиная с MaxSite CMS 0.90 используется новый подход к созданию шаблонов. Почему новый? Тут сразу несколько факторов. С этой версии мы отказались от старых «хвостов». Они больше не нужны. Во-вторых — поддержка только новых браузеров. Это открывает совершенно потрясающие возможности верстки. В третьих — быть в тренде мирового вебстроительства. А это уже целый букет: и css-фреймворки, и адаптивный дизайн, и модные js-плюшки и т.п., и т.п.

Другим ключевым моментом будет то, что MaxSite CMS берет на себя многочисленную рутину, избавляя вебмастера от множества «обезъянней» работы. Все эти вещи мы отрабатывали несколько лет: они взялись не с потолка, а есть результат большой проделанной работы.

Строго говоря только с версии 0.93 можно говорить об окончательном переходе к новой методике создания. Это связано с измененным алгоритмом заданий опций шаблона. С 0.93 они индивидуальны, а раньше были общими.

Публикуя эту методику, сразу хочу оговорить, что это лишь один из возможных вариантов. Смысл всех этих переделок как раз и состоит в том, чтобы вебмастер мог делать шаблоны по своим наработкам. Например используя свой css-фреймворк.

Но, вместе с тем, вебмастер, впервые взглянув на код default-шаблона, окажется в полном недоумении: где сложный php-код? Где сложный css-код? Почему так мало файлов? Откуда вообще всё берётся? В других CMS, как правило, шаблон представляет собой большую кучу php, css-файлов, в которых элементарно запутаться...

И вот чтобы разобраться в этих вопросах, нужно хотя бы в общих чертах представлять схему работы шаблона в рамках MaxSite CMS.

Схема работы шаблона в MaxSite CMS

Точка входа и единственный обязательный файл любого шаблона — файл index.php. Больше никаких требований к шаблону нет. Таким образом, после того, как MaxSite CMS прошла инициализацию, система просто подключает файл index.php.

Подключение остальных файлов со стороны MaxSite CMS будет происходить, только в случае наличия предопределенного файла. Этот подход часто используется в системе: если нужно подключить какой-то php-код, просто кидаем его в файл с предопределенным именем.

Например файл functions.php автоматически подключается и уже в нём — остальные php-файлы с функциями шаблона.

В index.php выполняется т.н. диспетчеризация — подключается нужный type-файл. Именно в этих файлах и происходит получение текстов и прочих данных для вывода. Но, в шаблоне type-файлов может не быть. В таком случае система автоматически использует файл из каталога shared/type. Он содержит файлы под типовой вариант вывода данных. Например вывод главной, одиночной записи и т.п.

Структура каталогов shared/type и type-каталога шаблона полностью совпадает. Это значит, что достаточно скопировать из shared ровно такие же файлы и они автоматом будут подключаться из каталога шаблона. Таким нехитрым способом можно поменять любой типовой вывод.

Многие type-файлы состоят из нескольких, т.н. unit-файлов. Например page-comments-article-tmpl.php содержит код вывода комментария (обратите внимание как в файле используется php-шаблонизатор).

Задача type-файла — получить и сформировать данные для вывода. Например для одиночной записи это заголовок, служебная информация, сам текст, комментарии и какие-то дополнительные блоки в зависимости от настроек.

Готовый результат type-файла автоматически сохраняется в глобальную переменную $CONTENT_OUT и управление передаётся в main-файл для непосредственного вывода в браузер.

Main-файл — это модульная сетка

Именно здесь вебмастер формирует HTML-каркас шаблона и размечает где что выводится. Как правило любой сайт содержит шапку, контент, сайдбар и подвал. Файл main/main.php относится к разряду обязательных (будем так считать), да и без него шаблон теряет смысл.

Файл устроен таким образом, чтобы вынести сложный php-код в отдельный каталог blocks, оставив только HTML-код с короткими и понятными php-вставками.

В шаблоне может быть несколько модульных сеток. Все они располагаются в отдельных подкаталогах и выбираются в Настройках шаблона или при редактировании записи в опции Шаблон записи.

Main-файл по сути последняя точка отработки шаблона в MaxSite CMS. Но именно в main-файле происходит подключение других частей шаблона: компоненты, HEAD-секция, сайдбары и т.п.

Компоненты

Шапка и подвал шаблона определяются в Настройках шаблона в Компонентах.

Файлы компонентов располагаются в каталоге шаблона components.

Компоненты могут иметь свои опции в файле options.ini. Таким образом он может настраиваться прямо из админ-панели. Код компонента может быть произвольным. Очевидно, что шаблон будет иметь свою особенную шапку и подвал. Поэтому говорить о каком-то типовом варианте не имеет смысла. В шаблоне default для вывода шапки используется компонент top1. В этом компоненте формируется html-разметка, css-классы и используются свои опции.

Компоненты — неотъемлемая часть шаблона, поэтому верстка компонентов должна соответствовать верстке самого шаблона. Вебмастеру нужно продумать какие компоненты будет поддерживать его шаблон. Универсальные компоненты, где нет html-разметки (например: any1, any2, footer_any1) не требуют особой поддержки, но если речь идет именно об уникальном шаблоне, то верстка шапки и подвала неминуемо переместится на уровень компонента.

Количество компонентов шаблона может быть любым — это определяет вебмастер. Точно также как и настройки компонентов. Вполне допустима ситуация, когда шаблон будет поддерживать только один компонент для шапки и один для подвала и не иметь собственных опций.

Type_foreach-файлы

Частая задача — поменять вывод небольшого блока или добавить свой блок в стандартный вывод. Менять из-за этого целый type-файл не самая лучшая идея. Для этого как раз и существуют type_foreach-файлы. Самый используемый info-top.php, где формируется заголовок записи, её рубрики, метки и т.п.

Если в шаблоне требуется поменять стандартный вывод, нужно использовать именно этот файл.

Для вывода разных заголовков записи используется специальный каталог type_foreach/info-top, который содержит разные варианты заголовков. Эти варианты доступны при редактировании записи:

Более того, заголовок записи можно задавать и по типам данных. Например info-top-page.php будет использоваться для одиночной записи, а info-top-category.php для страницы рубрики.

Type_foreach-файлов очень много. Документации по ним нет и не будет — это просто нереально сделать. Поэтому, если требуется поменять типовой вывод, то вебмастеру следует обратиться к соответствующему type-файлу, где и найти подходящий type_foreach-файл.

Как правило это функция mso_page_foreach().

Каталоги custom и options

Каталог custom содержит какие-то собственные файлы шаблона без четкой тематики. В этом каталоге можно разместить предопределенные файлы. Например дополнительные meta-опции записи в my_meta.ini. Дополнительные опции в my_options.ini.

Каталог options используется для дополнительных опций шаблона. Этот каталог достаточно специфичный, поскольку все опции на самом деле хранятся в shared/options в ini-файлах и имеет связь с админ-панелью. В 99% случаях все персональные файлы шаблона лучше хранить в каталоге custom/my_options.ini.

Каталог assets

Основная цель — выделить оформительскую часть от программной. Каталог assets, как раз и содержит всю оформительскую часть.

• css содержит готовые css-файлы
• fonts — шрифт fontawesome
• Картинки хранятся в images
• скрипты в js
• в less — исходные css-стили.

Это «типовая» и «современная» структура каталогов, к которой уже привыкли многие верстальщики. Для формирование CSS мы используем LESS. Компиляция less-файлов целиком ложится на вебмастера.

Следует отметить несколько особенностей.

Любой css-файл будет автоматически подключен в секцию HEAD, если его разместить в каталоге css. Подключение файлов происходит в алфавитном порядке. Каталог css/profiles соджержит небольшие css-профили, выбрать которые можно в админ-панели.

Эти же профили можно применить к отдельной записи:

JS-файлы также можно подключить автоматически если разместить в js/autoload. В этом случае подключение будет в секцию HEAD. Если же нужно подключить к конце BODY, то js-файлы следует разместить в js/lazy. Подключение также происходит в алфавитном порядке.

Если шаблон использует свою версию jQuery, а не стандартную из MaxSite CMS, то файл можно разместить как assets/js/jquery.min.js.

Предварительный итог: с чем работать вебмастеру

Теперь, понимая назначение каталогов и файлов, кратко резюмируем:

• Модульная сетка — main/main.php.
• Шапка и подвал — компоненты: каталог components
• Дизайн — каталог assets
• Мелкие вставки — каталог type_foreach

В этом разрезе можно написать простой чек-лист на создание шаблона.

• Дизайн сайта. Делать шаблон, не имея готового дизайна, большой риск. Верстальщик должен понимать, что именно ему делать. Дизайн — это две составляющие: структура и оформление. Имея структуру (взаимное расположение блоков/элементов), уже можно начинать верстку. Если структуры нет, то верстку начинать нельзя.
• Начальные css-стили. Не нужно пытаться охватить сразу всю вёрстку. Начинать нужно с самых базовых вещей: сброс normalize, основной шрифт, типографика. Обычно все эти вещи уже есть в css-фреймворке, поэтому вся работа сводится по сути только его подключению.
• Модульная сетка. Если у сайта успользуется общий контейнер, например для тени, бордюра и т.п., то это будет другая верстка, нежели каждый блок отдельно. Этот момент нужно учитывать изначально. В целом же сайт делится на 4 части: шапка, контент, сайдбар и подвал. Каждая часть верстается отдельно.
• Контент и сайдбар. Как правило это один блок, поэтому нужно выставить взаимную ширину, отступы и т.п. Здесь уже можно подумать над адаптивным дизайном.
• Шапка и подвал. На начальном этапе выставляется пустой компонент, например any1. Постепенно происходит детализация: добавляется логотип, название сайта, меню и т.д. таки образом формруется код компонентов.
• Детализация. Обычно требуется изменить info-top и ещё какие-то небольшие вставки. Тут используем type_foreach-файлы.

На этом этапе используется только типовой вариант вывода MaxSite CMS, то есть без смены type-файла. Не нужно пытаться сразу делать особый вывод, например главной. Стандартный вывод сделать будет проще и быстрей. Особый вывод главной делается на основе unit.php в конце создания шаблона, когда отлажены остальные страницы.

Верстка с UniCSS

В default-шаблоне используется css/less-фреймворк UniCSS. Вебмастер может использовать любой другой, но я бы посоветовал хотя бы попробовать поработать с UniCSS на начальном этапе изучения шаблонов. Этот фреймворк атомарного уровня, который позволяет сильно сократить написание css-кода и перенести её на уровень html в виде class'ов.

Использование UniCSS накладывает особый отпечаток на процесс и методику верстки. Новички не сразу понимают откуда берутся классы и как их менять. Основная идея — это перенос верстки в одно место — в html-код (файл, опции, ушки, текст записи и т.п.). Традиционно, вебмастер вынужден вначале создать html-разметку и проименовать блоки уникальными css-классами и после этого переключиться на less/css-файл, прописать стили, дождаться less-компиляции и только после этого увидеть результат. С UniCSS — просто указываются css-классы в html-коде.

Предопределенные html-блоки MaxSite CMS, где у вебмастера нет возможности указать css-классы, оформляются уже в assets/less/main/my-template.less. Здесь же оформляются плагины и виджеты.

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