Шаблон сайта в Albireo CMS

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

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

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

Получение данных

Поскольку Albireo CMS это система на файлах, то в ней какое-то особое получение данных не требуется.

Например, WordPress получил url-запрос, формирует внутренний «роутинг», из которого он понимает какой тип данных требуется для вывода. Это может быть одиночная запись, рубрика, метка, главная и т.п. Исходя из типа данных выполняется sql-запрос. После этого управление переходит в файл шаблона, который сразу получает готовые данные для вывода.

То есть в WordPress шаблон сам по себе не должен получать данные из базы, поскольку система уже всё сама подготовила.

В других системах на базах данных, используется плюс/минус такой же подход: на каком-то уровне происходит получение данных из базы, потом передача этих данных и управления в соответствующий type-файл.

В Albireo CMS все данные — это обычные текстовые php-файлы. То есть система понятия не имеет что именно будет выводиться: она просто подключает php-файл, исходя из входящего URL.

Поэтому в Albireo CMS нет ни типов данных, ни каких-то предопределенных действий до непосредственного вывода страницы.

«Архивные страницы» в Albireo CMS

Тогда возникает вопрос: «А как тогда страница получает и выводит другие записи?». В Albireo CMS за все эти действия отвечает непосредственно сама страница.

Albireo CMS, условно «разделяет» все страницы сайта на одиночные и архивные. Архивные — это те страницы, которые выводят множество других записей. Например рубрики, метки, главная, карта сайта и т.п. Одиночные — это страница выводится как есть. Обычно одиночная страница — это просто текст статьи, как например эта.

Скажем, вывод рубрик происходит в файле category.php, который содержит код получения записей рубрик, а также код для html-вывода. Аналогично это происходит и для других архивных страниц.

Для примера посмотрим на вывод рубрики «Астрономия»:

$rows = categoryGetPages('astronomy', 10);

if (!$rows['files']) {
    header('HTTP/1.0 404 Not Found');
    echo extras('not-found.php');
    return;
} else {
    echo tpl(data: $rows['files'], add: ['header' => getPageData('title')], tpl: TPL_DIR . 'one-column-3.php');
    echo tpl(data: $rows['pagination'], tpl: TPL_DIR . 'pagination1.php');
}

Другой пример — вывод на главной последних записей:

$rows = getPages(limit: 10);

echo tpl(data: $rows['files'], tpl: TPL_DIR . 'one-column-3.php');
echo tpl(data: $rows['pagination'], tpl: TPL_DIR . 'pagination1.php');

То есть Albireo CMS предлагает сразу несколько готовых функций для получения записей (getPages, categoryGetPages, tagGetPages и т.п.), результат которых передаётся в функцию шаблонизатора tpl().

Собственно в этом и есть ключевое отличие от других систем: Albireo CMS предлагает не просто вывод HTML страницы, а разделяет вывод на отдельные tpl-файлы.

Отличие этого вывода от других CMS

Многие CMS не имеют в своём составе tpl-шаблонизатора. Более того, многие системы очень жестко привязывают вывод данных к разным «структурам» шаблона. Например тот же WordPress строго завязывается на type-файл, в котором необходимо самостоятельно организовать цикл вывода записей в виде смеси html и php-кода.

В новых версиях WordPress предлагает некое подобие шаблонизатора через «patterns» и «parts», файлы которых представляют собой жуткую смесь из html-комментариев. Назвать это нормальным шаблонизатором не смогут даже самые горячие поклонники.

И второе важное отличие в том, что получение данных в Albireo CMS происходит строго индивидуально для каждого случая. В других системах получением данных занимается либо «ядро», либо какая-то часть шаблона, но на выходе всё равно будут предопределенные данные.

Например, если нужно изменить алгоритм получения данных в Albireo CMS, то он меняется в этом же файле. В других системах придётся провести разные манипуляции, чтобы изменить предопределенное действия системы.

Роль шаблона

В разных системах шаблон отвечает за тип выводимых данных. По сути шаблон вынужден хранить все предопределенные системой типы данных. То есть система смотрит тип данных, получает их и потом подключает нужный type-файл. Если шаблон не поддерживает тип «home», то он не сможет вывести главную. Или например если нет файла для типа «tags», то он не сможет вывести метки.

Это жесткая иерархия шаблона присутствует в большинстве CMS, поскольку исторически считалось, что именно такой и должен быть вывод в шаблоне.

Поэтому архитектурно такие шаблоны сами решают что и как выводить.

Ещё раз — не страница решает что ей нужно вывести, а шаблон, то есть некая «конечная часть» всего вывода страницы.

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

Такое поведение невозможно в других CMS.

Шаблон в Albireo CMS

Все эти отличия существенны. Если вы привыкли к шаблонам аля-WordPress, то это не будет работать в Albireo CMS. Поэтому шаблон здесь рассматривается как «истинная» «конечная точка» вывода станицы.

Albireo CMS использует очень простой алгоритм шаблонизации.

По входящему URL определяется какой php-файл будет подключен (но пока не подключается!).
В этом файле определяется какой именно шаблон он хочет использовать, например default.
Также смотрится какой layout-файл внутри шаблона хочет использовать страница.
В шаблоне default подключается layout-файл.
В свою очередь layout-файл подключает нужный php-файл страницы, который сам решает что нужно вывести.

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

Модульный подход

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

Поэтому есть два подхода к созданию своего шаблона.

Первый — это сделать копию «Default» и вносить все изменения уже в нём. Минусы очевидны, при обновлении системы, придётся отслеживать все изменения.

Второй — создание своих модулей в рамках «Default». Например, если нужна своя модульная сетка, то файл размещается в layout-каталоге. Если нужна новая шапка, то в каталоге modules/headers и т.д.

Фактически это означает не переделку дефолтного шаблона, а его расширение. Такой подход часто используется в программировании. Например в Obsidian нет необходимости переписывать все стили оформления, достаточно разместить только свои, отличающиеся от дефолтных.

Модульный подход в получении данных

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

Например сейчас главная страница Albireo CMS выводится одной строчкой:

module(getConfig('homeOutputModule', 'home/home1.php'));

Здесь смотрится конфигурация homeOutputModule, где хранится имя модуля вывода. Если опции нет, то будет использоваться файл modules/home/home1.php. Именно этот файл содержит всё, что нужно для вывода последних записей.

Если нужно сменить вывод главной, то в конфигурации достаточно указать другой файл модуля, например на home/home2.php.

То есть идея в том, что получение (и вывод) данных можно вынести в отдельный файл модуля, а пользователю оставить только настройку конфигурации.

TPL-шаблонизатор

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

Сейчас в Albireo CMS есть 23 tpl-файла для вывода архивных страниц (всего их 37). Это не значит, что они могут всё, но с другой стороны, где вы встретите систему, где уже предусмотрено такое количество заранее подготовленных шаблонов вывода?

Когда стоит задача поменять вывод, то достаточно поменять tpl-файл. И это не муторный суррогат как в WordPress, а нормальный полноценный шаблонизатор, как в «больших» фреймворках.

Основной CSS-фреймворк

Здесь важно понимать, что любой шаблон будет так или иначе завязан на используемый CSS-фреймворк и JS-библиотеку. В Albireo CMS используется Berry CSS и AlpineJS. И поэтому в модулях шаблона «Default» обильно используются css-классы из Berry CSS и код для Альпины. Если шаблон будет основан на другом CSS-фреймворке, то придётся переписывать все css-классы шаблона.

По другому, в общем-то, WEB и не работает. Всегда идёт привязка к css-классам. Строго говоря, в других CMS ситуация аналогична: файлы шаблона завязаны на свои css-классы.

Ресурсы

Это важное отличие Albireo CMS от других систем. Ресурсы — это сторонние библиотеки, которые могут использоваться разными шаблонами. Например если шаблон использует Bootstrap CSS, то в принципе его можно подключить одной строкой use.bootstrap5: +, поскольку этот фреймворк уже в комплекте ресурсов Albireo CMS.

Это может показаться странным, зачем вообще хранить сторонние фреймворки и библиотеки?

Но всё дело в том, что в Albireo CMS любая страница может иметь не только свой шаблон, но и свои библиотеки. Например в комплекте Albireo CMS есть 33 готовых лендинга (в сумме это 93 страницы), часть из которых использует именно Бутстрап, jQuery разных версий и т.п.

Таким образом, если страница должна быть свёрстана именно на классах Bootstrap, то решается это несколькими строчками:

use.berry: -
use.bootstrap5: +
use.jquery3: +

Поэтому, если нужно интегрировать стороннюю библиотеку (css, js, шрифты), то лучший вариант — это размещение их в ресурсах системы.

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

Иногда удобней разместить свои файлы не в каталоге шаблона, а отдельно. Для этого предусмотрен каталог service/my, который повторяет структуру шаблона «Default».

Это ещё бывает особенно удобно, когда нужно изменить существующий модуль. Он просто копируется из шаблона в service/my и система автоматом его подхватит. Ничего менять больше не требуется.

Вариативность вывода

Самая «привязанная» к css-классам часть шаблона это tpl. И это понятно, именно здесь происходит формирование HTML-кода.

Остальные части шаблона, в принципе можно назвать «универсальными», то есть не требующими особого вмешательства.

Но, я хочу особо отметить, то вывод через tpl-файл не обязательное условие. Так просто удобней и проще по коду, но в принципе легко заменяется на обычный php-цикл, что-то вроде такого:

$rows = getPages(limit: 10);

foreach ($rows['files'] as $fname => $data) {
    ... тут произвольный вывод ...
}

// пагинация, если нужна
echo tpl(data: $rows['pagination'], tpl: TPL_DIR . 'pagination1.php');

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

Вывод на уровне страницы

Как показано выше, вывод можно полностью организовать на уровне страницы. Например нужно сделать несколько вариантов главной. С одной стороны можно сделать их на уровне модулей, а с другой, всё оформить прямо в файлах страниц (home1.php, home2.php и т.п.)

Поскольку вывод будет прямо в файле, то будет меньше зависимостей от файлов шаблона. Таким образом, пользователю будет достаточно просто выбрать нужный файл. Это касается всех архивных и служебных файлов. Например карта сайта sitemap.php сделана именно таким образом, поскольку у неё довольно сложный вывод и проще сделать это прямым php-кодом.

Создание шаблона для Albireo CMS

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

Поэтому, если стоит задача создания именно отдельного шаблона, то первой задачей будет решение об используемом CSS-фреймворке. Если это Berry CSS, то тогда шаблон может строиться как расширение Default.

Но если нужен другой CSS-фреймворк, тогда лучше всего сделать копию «Default» и внести свои правки по CSS и HTML.

Если шаблон «Default» в принципе устраивает, то тогда задача сводится только к модулям, которые нужно добавить в шаблон. Это касается любых его частей: от css/js-файлов и модульных сеток до своих tpl-файлов и parts-подключений.

Я могу предложить следующий алгоритм по созданию шаблона/сайта для Albireo CMS.

Выбор модульной сетки (layout). Если нет подходящей модульной сетки , то лучше начать именно с неё. Это может затронуть и создание своих css-стилей, которые можно разместить в отдельном css-файле в каталоге assets/css.

Выбор цветового дизайна. Часто сайты имеют какой-то один предопределенный базовый цвет. В Berry CSS это делается через настройку primary-оттенка. Лучше сразу выбрать ближайший цвет, поскольку потом будет проще подстраивать цвета шапки, подвала, сайдбара и т.п.

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

Шапка. Как правило шапка — это отдельный модуль, который содержит всю логику и html-вывод. Если шапка поддерживает опции, то нужно вынести их отдельным файлом, чтобы пользователь мог сам им управлять. Обычно в шапке выводится главное меню сайта, поэтому нужно решить как именно это будет сделано. В Albireo CMS за меню отвечает два конфигурационных файла, один за ссылки, другой за оформление. Сам вывод делается через функцию menu1().

Подвал. Это тоже отдельный модуль, только есть смысл использовать часть «стандартных» опций.

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

Главная страница. Тут нужно решить какой именно нужен вывод главной, поскольку он будет завязан на tpl-файлы. Если эти файлы нужны только для главной (их не получится использовать на других страницах), то можно оформить вывод прямо в файле страницы. Оптимально, если это будет несколько вариантов главной, тогда пользователь может сам выбрать подходящий вариант.

Главная как лендинг. Это отдельный случай, поскольку скорее всего лендинг нужно будет не сколько создавать, сколько интегрировать уже существующий. То есть сам лендинг можно сделать где угодно: от многочисленных сервисов и каталогов до использования нейросетей. После этого задача будет только в интеграции к Albireo CMS. Об этом есть раздел в документации, просто отмечу, что можно интегрировать любой сторонний лендинг.

Архивные страницы. Обычно это рубрики и метки. Для их изменения нужно редактировать страницы в комплекте Albireo CMS.

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

Основной подход к изменению шаблона в Albireo CMS будет строиться в первую очередь на изменении и дополнении «Default». Если в других CMS вебмастер просто вынужден создавать шаблон с нуля, то в Albireo CMS он сразу получает многофункциональный и очень мощный шаблон. Это отличает Albireo CMS от других систем: здесь вебмастеру достаточно вносить лишь точечные изменения, чтобы получить что-то новое. Ему не нужно проходить полный цикл создания шаблона, а можно сосредоточиться только на необходимых изменениях, при этом не теряя существующий функционал.