Новый default-шаблон MaxSite CMS

В MaxSite CMS 0.54 появился новый default-шаблон, призванный заменить старый вариант. Пока в комплекте присутствует оба шаблона, но позже останется только один. Старому варианту три года и за это время «вебмастерская мысль» ушла уже достаточно далеко. :)

Новый шаблон выполняет несколько задач.

Первая - для простых пользователей MaxSite CMS стали доступны сразу много настроек, которые позволяют менять структуру и внешний вид сайта прямо из админ-панели. Например меню, слайдер и логотип могут тусоваться между собой в произвольном порядке. Поддержка css-профилей позволяет менять оформление, например сменить тему шаблона на dark - тёмный вариант (фотографам такие нравятся). Со временем будем добавлять новые программные компоненты и профили.

Вторая задача - обеспечить простую кастомизацю шаблона на уровне «чайника». Очень часто стоит задача немного изменить базовый шаблон. Как правило это делается несколькими строчками CSS и такие изменения вносятся в исходный css-файл, который будет затираться при обновлении. Теперь такой проблемы просто не существует: создаём свой css-файл и выбираем его в профиле шаблона - он автоматом подхватится.

Третья задача - предоставить вебмастерам, создающим сайты, возможность иметь в своём распоряжении готовый каркас для своих разработок. В шаблоне уже реализовано базовое программирование основных задач, поэтому вебмастера могут создавать сайты не только путем копирования default-шаблона (всегда так и делалось), но и добавление своих наработок в default-шаблон. Это совершенно новая возможность с очень большими перспективами.

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

Компоненты шаблона

Как показывает опыт, большинство шаблонов сайтов состоят из одних и тех же элементов: шапка, контекст, сайдбар, подвал. Строго говоря, и html-структура шаблоном может быть практически одинакова. Проблема возникает тогда, когда требуется добавить какой-то свой блок или элемент. Предположим в шапке прописан один div-блок, а клиент захотел в шапке добавить иконку rss-подписки. Очевидно, что для этого потребуется прописать ещё один div-блок и дальше уже можно заниматься css-шаманством.

При этом общая структура сайта (модульная сетка) осталась прежней - мы просто где-то в недрах отдельно взятой ячейки дописали нужный нам блок.

Всё это меня привело к идее использования компонентов (components) шаблона. Технически это обычные php-файлы, которые подключаются в структуре шаблона. То есть базовая html-структура шаблона достаточно проста - есть несколько обрамляющих блоков для каждой содержательной части. В каждой из этих частей делается подключение указанных в опциях компоненты (по сути файла). Сама же компонента может быть сколь угодно сложна (для delphi'стов - аля VCL). Например есть компоненты меню и слайдер. В шаблоне получаем значения первого и второго блоков и от того подключается нужный файл.

HTML-структура шаблона

HTML-код шаблона очень прост и подходит под большинство задач. Вот немного упрощённый код между BODY (файл main.php).

<div class="all"><div class="all-wrap">
<div class="section header-main">
 
<div class="header"><div class="header-wrap">
	компоненты шапки
</div><!-- div class="header-wrap" -->
</div><!-- div class="header" -->
 
<div class="section article main"><div class="main-wrap">
	<div class="content"><div class="content-wrap">
		компонет
		вывод содержимого страницы
		компонент
	</div><!-- div class="content-wrap" --></div><!-- div class="content" -->
 
	<div class="aside sidebar sidebar1"><div class="sidebar1-wrap">
	сайдбар
	</div><!-- div class="sidebar1-wrap" --></div><!-- div class="aside sidebar sidebar1" -->
 
	<div class="clearfix"></div>
</div><!-- div class="main-wrap" -->
</div><!-- div class="section article main" -->
</div><!-- div class="section header-main" -->
 
<div class="footer-do-separation"></div>
 
<div class="footer"><div class="footer-wrap">
	компоненты подвала
</div><!-- div class="footer-wrap" -->
</div><!-- div class="footer" -->
 
</div><!-- div class="all-wrap" --></div><!-- div class="all" -->

Как видите, html-код примитивный. Обрамляющие блоки «all» и «header-main» служат для задач, когда требуется использовать (или не использовать) всю ширину браузера. Блоки header и footer идентичны: содержат по пять блоков для вывода компонентов. Причём никакой привязки стилей к css-классам родительских блоков не должно быть, потому что пользователь может задать вывод компонента menu как в шапке, так и в подвале. Компонент - цельный законченный блок и должен выводиться где угодно.

Блок content выводит содержимое type-файла. Блок sidebar - сайдбар.

Файлы шаблона

Главный файл - стандартный index.php - здесь подключаются разные типы данных. Файл main-start.php включает буферизацию вывода перед type-файлом.

Файл main-end.php получает результат вывода в переменную $MAIN_OUT и подключает файл main.php. В файле main.php содержится html-структура шаблона. Здесь же подключаются нужные компоненты и прочие файлы, хуки, выводится $MAIN_OUT т.п.

Файл header.php содержит секцию HEAD. Здесь же запрограммировано подключение стилей и скриптов. (Пояснение: в 0.59 для вывода секции HEAD используется функция шаблона mso_default_head_section, которая подключается в main.php.)

Файлы options.ini и options.php отвечают за работу с опциями шаблона. В ini-файле опции объявляются, в php-файле обеспечивается их обслуживание. Файл options-template.ini является дополнительным файлом опций, которые относятся только к текущему шаблону. Стандартно options.ini дефолтного шаблона автоматически подключаются к остальным шаблонам и, чтобы не мешать эти опции сделано разделение на два файла. В своих шаблонах деление на два файла не имеет смысла, поэтому можно использовать как обычно options.ini.

Файл meta.ini объявляются дополнительные поля для записей.

Каталоги шаблона

Каталог components содержит php-файлы компонент. Поскольку это php-файл, то в нём можно выводить как исполняемый код, так и произвольный HTML. Важно только следить, чтобы каждый компонент обрамлялся своим css-классом.

В каталоге components находятся пустые заготовки для предопределённых файлов, которые не задаются в опциях админки, а подключаются в случае их наличия.

Обратите внимание, что файлы имеют префикс «_», а чтобы шаблон стал их подключать, префикс следует удалить. Таким образом, вебмастер может использовать предопределённый файл, не опасаясь, что он будет затёрт при обновлении MaxSite CMS. Данное правило действует и в других частях шаблона.

Каталог css содержит css-файлы. Логика подключения css-файла находится в header.php (или функции mso_default_head_section): если есть css.php, то подключается он. Если его нет, то проверяется существование my_style.css. Если и его нет, то подключается style-all-mini.css. «Mini» означает сжатый формат файла. Для сжатия используются различные утилиты. Если style-all-mini.css нет, то подключается style-all.css. Если нет и этого файла, то будут подключены стили default-шаблона default/css/style-all-mini.css.

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

Если нужно полностью заменить существующий style-all.css, то создаётся файл my_style.css - он полностью на откупе вебмастера.

Если же стоит задача лишь дополнить или поменять некоторые стили, то используется add_style.css.

В каталоге css/profiles находятся css-профили. Список находящихся в этом каталоге css-файлов отображается в настройках шаблона (опция «Дополнительные профили»). Профили подключаются после основных css-файлов и призваны изменить ранее определенные стили. В комплекте шаблона: dark-theme.css (тёмная тема оформления), no-sidebar.css (скрывает сайдбар), left-sidebar.css (отображает сайдбар слева), green-theme.css (зелёная тема оформления), font-segoe.css (основной шрифт Segoe UI), font-georgia.css (основной шрифт Georgia). Профили можно комбинировать, просто отмечая их в админ-панели.

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

Каталог custom служит для хранения специальных файлов, расширяющих возможности стандартных. Например в my_meta.ini можно задать свои дополнительные поля. В my_options.ini - свои опции и т.п.

В каталоге images размещены изображения. Подкаталоги служат для каких-то однотипных файлов: логотипы, шапки, иконки т.п.

Каталог js предназначен для хранения js-скриптов. Если разместить файл my.js, то он автоматом подключится в head страницы.

Каталог language содержит языковые файлы перевода.

Каталоги type и type_foreach имеют стандартное назначение для любого шаблона - произвольно менять вывод данных.

Как подключаются компоненты

В main.php для подключения компонентов используется функция get_component_fn(). В принципе вебмастеру нет надобности о этом заботиться, поскольку всё программирование уже выполнено. Но для общего понимания описываю схему работы:

• Каждый блок компонентов имеет свою опцию, которая описана в options.ini. Значение опции выбирается как выпадаюий список (select), а сам список формируется из php-файлов каталога components. Таким образом можно сопоставить произвольные компоненты произвольному блоку.
• Функция get_component_fn() по указанной опции возвращает файл, который выбрал пользователь.
• Этот файл и подключается в main.php обычным require().

Если нужно сделать свой компонент, то просто создаётся php-файл с необходимым функционалом. Система сама его подхватит и обеспечит необходимые подключение.

Если компонент использует свои js и css

Проще всего сделать подключение js-скриптов прямо в теле компонента. По правилам HTML подключать js-скрипты можно в любом месте страницы, а не только в секции HEAD, как многие ошибочно считают. Тоже самое правило распространяется и на STYLE.

Для лучшего порядка, js-файлы компонентов можно разместить в components/js.

Если компонент использует свои css-стили, то файл можно разместить в components/css - система автоматом подхватить все файлы и выведет их в секции HEAD.

Если компонент использует свои опции

Для этого служит каталог components/options. В нём следует разместить одноименный ini-файл с опциями. Если ini-файл использует php-вставку (функции), то рядом следует разместить одноименный php-файл с нужной функцией. При выводе опций, система самостоятельно подключит как php-файл, так и ini-файл.

Дополнительные вставки

В шаблоне я прописал вывод ушек в секции head, body_start (сразу после объявления BODY), google_analytics и body_end перед закрывающим BODY. Это наиболее востребованные места шаблона, где требуется выводить свои вставки.

Кроме того предусмотрены служебные вставки в виде файлов из components и custom. Например если нужно выводить блок рекламы прямо после блока основного текста, можно использовать служебный файл custom/main_out_end.php. По возможности, конечно лучше попытаться решить задачу другими способами, например через хуки, но пусть будет и такой вариант.

Сайдбар

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

Использование HTML5 и CSS3

Полноценному использованию новых технологий мешает браузер IE. Если версия 9 более-менее сносно работает, то с 8-й и 7-й много сложностей. Поэтому поддержка IE7 гарантируется только на уровне «внешне почти похоже». Скажем задать тень, которую не понимает IE7 можно только через графику. Конечно это неприемлемый вариант, ведь остальные браузеры сделают это «из коробки». Чтобы как-то обучить IE новым возможностям в комплекте MaxSite CMS будет поставляться библиотека PIE.htc, которая на сегодняшний день наиболее продвинута. Понятно, что это большой костыль, но других вариантов обеспечить поддержку IE я не вижу.

Также обратите внимание, что вся html-разметка выполена на class, а не id. Это принципиальное решение, позволяющее после без проблем мигрировать на тэги HTML5. Сейчас же они добавлены как классы.

Сколько вообще займёт переход на чистый HTML5 и CSS3 сказать очень сложно. Проблема здесь в старых версиях IE и тех, кто ими пользуется.

Замена формата вывода

В MaxSite CMS появилась новая возможность менять формат вывода для некоторых блоков. Например, стандартно заголовок виджета обрамляется в h2.box. Можно переопеределить его на свой вариант. Делается это в functions.php функцией mso_set_val().

CSS-стили

Файл style-all.css (style-all-mini.css) содержит все стили, относящиеся как непосредственно к шаблону, так и к плагинам. Структурно в файле содержится:

• reset - сброс стилей
• default - базовые стили
• plugins - стили плагинов
• struct - структура шаблона
• helpers - небольшие помощники

Строго говоря для нового MaxSite CMS-шаблона можно взять за основу style-all.css с которым и работать. Здесь находится самый полный комплект стилей для MaxSite CMS.

Если удалить style-all-mini.css и style-all.css из своего шаблона, то будет подключение style-all-mini.css из дефолтного. Таким образом базовые стили вашего шаблона будут всегда актуальными и не требующими обновления.

Особые благодарности

Прежде всего моим клиентам, которые заставляют включать мозги. Cпасибо участникам форума поддержки, которым не безразлична MaxSite CMS. Отдельная благодарность Юре (ака Cuprum) с которым мы отлаживали и передолатили кучу кода, большинство из которого и вошло в новый шаблон.

ps В каталоге шаблона находится файл readme.txt, в котором содержится последняя информация о default-шаблоне.