Шаблоны в 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-файлы. При желании можно разместить и другие файлы например изображения.

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

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

Расширение функционала шаблона

Может быть ситуация, когда вам нужно оставить Default-шаблон без изменений, но добавить в него несколько своих модулей. Чтобы не трогать каталог шаблона, вы можете разместить нужные файлы в каталоге website/service/my. Этот каталог специально предназначен для взаимодействием с шаблоном и повторяет его структуру:

website/service/my/
    extras/
    modules/
        footers/
        headers/
        home/
    parts/
        content/
        content-start/
        head/
        lazy/
    tpl/

Например, если вам нужно изменить шапку modules/headers/header1.php, то вы можете его скопировать из каталога шаблона в website/service/my. Система проверит наличие этого файла и подключит его автоматически. Таким образом не нужно менять подключение модуля в конфигурации сайта/страницы.

Аналогичным образом будет работать каталог extras.

Для того, чтобы подключить произвольные css-стили и js-скрипты из каталога website/service/my, можно использовать такие поля:

css.head.url[]: [SERVICE_URL]my/style.css
css.lazy.url[]: [SERVICE_URL]my/style.css

js.head.url[]: [SERVICE_URL]my/script.js
js.lazy.url[]: [SERVICE_URL]my/script.js