Современная, быстрая и удобная система управления сайтом

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

Архив записейКомментарии: 2Просмотров: 17653

Начиная с 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 относится к разряду обязательных (будем так считать), да и без него шаблон теряет смысл.

Таким образом первый файл, с которым придется работать вебмастеру — это main.php.

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

Main-файл

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

Шаблон вывода

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

Пример подключения 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-файлов целиком ложится на вебмастера.

Таким образом в assets следует размещать всю оформительскую часть шаблона. Именно здесь и происходит вся css-верстка шаблона.

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

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

CSS профили

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

Профиль оформления при редактировании записи / 2015-11-08-55-000.png

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 достаточно большие, поэтому могу только посоветовать обратиться к официальному сайту фреймворка и получше его изучить.

Комментариев: 2 RSS

1Илья ЗемсковСайт08-11-2015 16:44

Отличный материал! Спасибо за труд, Максим! Как всегда лаконично и всё по делу!

Единственное, что мог бы порекомендовать - добавить в начало статьи картинку с деревом файлов дефолтного шаблона и shared-папки. Причём можно было бы сделать файлы, которые могут быть в папке шаблона, но сейчас берутся из shared-папки сделать полупрозрачными. Так было бы легче понимать о чём идёт речь в мануале.

ЗЫ: Если сам не будешь такое делать, то возьму идею на заметку и опубликую на maxhub-е.

2АлександрСайт12-11-2015 11:43

Отличный материал! Спасибо за труд, Максим! Как всегда лаконично и всё по делу!

Присоединяюсь. Жду дальнейшего развития. Как говорится, совершенству нет предела.)

Оставьте свой комментарий!

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)