Шаблоны в Albireo CMS

Шаблон — это инструмент, с помощью которого можно отделить контекстное содержимое от визуального дизайна сайта.

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

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

Современный шаблон для сайта — это целый комплекс по решению сложных задач. Поскольку браузеры отображают сайты только на языке HTML, то обычный текст для этого не подходит, а значит перед CMS стоит задача по преобразованию пользовательского текста и его настроек в корректный HTML.

В мире есть тысячи систем управления сайтом и большинство из них имеют свою систему шаблонизации. Здесь важно отметить исторический фактор, когда системы изначально имели очень примитивные алгоритмы шаблонизации, но со временем их разработчики были вынуждены сильно усложнять шаблоны, поскольку росли и запросы пользователей. В 99% случаев это привело к значительному усложнению шаблонов и их повышенную ресурсоёмкость.

Поскольку шаблон как правило завязан на свою систему, то возникает жесткая связь, которая усложняет адаптацию сторонних дизайнов к этой системе. Поскольку шаблон это связка PHP+HTML+CSS+JS, то каждая CMS предлагает свой набор решений. И в 99% случаев эти решения имеют сильнейшие ограничения.

Albireo CMS отличается от других систем. Поскольку это совершенно новая и самая совершенная CMS в мире, то схема шаблонов строится с учётом всех сторон.

Кратко об этом

Первая задача, которая решается в Albireo CMS — это полноценная интеграция контента в «ядро» системы. То есть на уровне страницы вы можете использовать абсолютно любой код: HTML, PHP, CSS и JS. Из этой задачи вытекает другая — управление шаблоном на уровне страницы. Она также решена в рамках Albireo CMS — именно страница решает как ей выводиться: начиная от используемого шаблона, модульной сетки, компонентов шапки, подвала, сайдбары, виджеты и любые другие блоки.

В других системах подобное просто невозможно, но в Albireo CMS вы можете сделать каждую страницу уникальной.

Вторая задача — интеграция сторонних модулей. Например сторонние шрифты, css-библиотеки, js-проекты — всё это интегрируется в Albireo CMS без переделки этих модулей. Для этого создаётся некий файл «коннектор» — простой php-код, который подключает и управляет модулем. Более простой схемы вы не встретите ни в одной другой CMS.

Третья задача — это работа с CSS. Albireo CMS позволяет использовать любые css-фреймворки/библиотеки, но по умолчанию она использует утилитарный фреймворк Berry CSS. Особенность утилитарных фреймворков в том, что они содержат наборы готовых css-классов, которые потом комбинируются в html-коде, примерно как кубики Лего. С помощью Berry CSS решаются практически все задачи верстки, но при этом сохраняется великолепная семантика кода.

Четвертая задача — это реактивный JavaScript. В Albireo CMS используется Alpine JS, которую можно сравнить в Vue.js, только многократно удобнее.

Важно отметить, что шаблон в Albireo CMS — это не просто какая-то там абстракция, когда разработчик предусматривает свободу подключения, но не предлагает ничего конкретного. Здесь полностью настроенный и готовый к использованию шаблон, который покрывает 99% задач пользователя.

Общее устройство шаблона

В комплекте системы входит шаблон Default. Его можно выбрать в конфигурации сайта или на странице template: default.

Все шаблоны располагаются в каталоге templates каждый в своём подкаталоге. Собственно имя каталога и есть имя шаблона.

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

В каталоге _resources располагаются только исходные «чистые» файлы, а само их подключение происходит уже на уровне шаблона.

Внутри шаблона есть такие каталоги:

assets
extras
layout
modules
parts
snippets
tpl

Ниже приведены краткие сведения о каждом. Подробное описание см. на отдельных страницах документации.

Каталог assets

Этот каталог традиционно содержит css, sass и js-файлы. При желании можно разместить и другие файлы например изображения.

Каталог css/themes — это каталог основной темы, по умолчанию в нём только berry.css. Если вы используете другой фреймворк, то он должен подключаться из этого места.

Каталог extras

Здесь размещаются файлы, которые подключаются с помощью функции extras(). Например:

extras('info1-header.php', ['nodate' => 0])

Эти файлы используют tpl-шаблонизатор, что упрощает написание php-кода для создания HTML.

Каталог layout

Это каталог модульных сеток. Именно внутри layout-файла происходит подключение файла страницы. Поэтому layout-файл для страницы является обязательным.

Каталог modules

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

Каталог parts

Это каталог используется для подключения файлов в разных частях модульной сетки.

parts/content — после страницы
parts/content-start — перед страницей
parts/head — в секции HEAD
parts/lazy — перед закрывающим BODY

Именно в каталоге parts подключаются файлы ресурсов. Например Alpine JS подключается в секции HEAD, а иконки Bootstrap в конце BODY.

Каталог snippets

Это короткие сниппеты, которые завязаны на дизайн шаблона. Например навигация по статье (article-navigation-flat.php) использует классы Berry CSS.

Каталог tpl

Это файлы, которые используют tpl-шаблонизатор. Например вывод групп записей на главной, архивных страницах, формирование пагинации, комментарии и т.д.

Модульность шаблона

В Albireo CMS шаблон состоит из модулей с высокой степенью изоляции. Это означает то, что практически каждый файл шаблона является изолированной единицей.

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

Очень простой пример, демонстрирующий эту особенность. Откройте созданный вами ранее файл hello.php. Сейчас его страница отображается как и весь сайт.

Добавьте поле css.fstyle[]: color-green.css и обновите страницу — теперь она в зеленых тонах. Поменяйте на css.fstyle[]: color-purple.css — теперь дизайн фиолетовый. Ещё вариант css.fstyle[]: color-blue-gray.css.

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

То же самое касается и модулей шапки и подвала, подключений сторонних библиотек, tpl-файлов, сниппетов и extras-файлов.