Albireo CMS 2025.01.17
© Albireo CMS, 2020-2025

Модульная сетка в шаблоне Albireo CMS

Модульные сетки размещаются в каталоге шаблона layout. В шаблоне может быть множество модульных сеток.

  • default.php — «стандартный» вывод без сайдбара
  • sidebar.php — правый сайдбар
  • sidebar-float.php — «плавающий» сайдбар
  • sidebar-left.php — левый сайдбар
  • full-width.php — полная ширина браузера
  • landing.php — подходит для лендингов (нет шапки и подвала)
  • clean.php — вывод без шапок и подвалов
  • empty.php — здесь выводится только содержимое страницы
  • doc1.php и doc2.php — для документации

Переключение модульной сетки происходит с помощью поля layout, например:

layout: sidebar.php

Как работает шаблон в Albireo CMS

Прежде чем двигаться дальше, нужно объяснить как именно осуществляется вывод данных в Albireo.

После загрузки ядра системы и определения какой именно файл страницы отвечает за текущий URL, система передаёт управление в layout-файл. По сути это обычный php-файл, который подключает файл страницы. Например layout-файл empty.php состоит из одной строчки:

require getVal('pageFile');

То есть важно понять, что Albireo CMS не выполняет файл страницы отдельно. Вместо этого она формирует только информацию об этом файле, которая подключается обычным require в layout-файле.

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

Для удобства layout-файл разделён на три части:

  • _start.php — начальная часть HTML (секция HEAD, шапка и т.п.)
  • _content.php — контекстная часть, где подключается файл страницы
  • _end.php — завершающая часть HTML, подвал и т.п.

Это сделано для того, чтобы не дублировать код в разных модульных сетках. Например сетка default.php:

require __DIR__ . '/_start.php';
templateModules('headers'); // шапки

// этот контейнер ограничивает ширину контента
echo '<div class="layout-center container-content">';
    require __DIR__ . '/_content.php';
echo '</div>';

templateModules('footers'); // подвалы
require __DIR__ . '/_end.php';

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

  • Формирование секции HEAD
  • Формирование начальной секции BODY
  • Вывод произвольных данных в начале BODY
  • Формирование шапки
  • Подключение файлов из parts/content-start
  • Формирование ARTICLE и подключение в нём файла страницы
  • Подключение файлов из parts/content
  • Вывод произвольных данных после контента
  • Формирование подвала
  • Заключительный вывод в конце BODY

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

Шапка. Контент. Подвал

Практически любой сайт в Интернете строится по одной схеме: шапка + контент + подвал. С точки зрения HTML-вёрстки есть несколько подходов к созданию этой структуры. «Старая школа» часто предполагает объединение всего содержимого в единый DIV-контейнер. Но это ошибка, поскольку правильный подход будет таким:

  • Блоки шапки располагаются каждый в своём контейнере.
  • Блоки контента размещаются в своём контейнере.
  • Блоки подвала располагаются каждый в своём контейнере.

В простом виде для шаблона с сайдбаром это может быть так:

...
<body> 
modules/headers/header1.php - внутри его свой контейнер
modules/headers/header2.php - внутри его свой контейнер

<div class="layout-center-wrap">
    <div class="layout-wrap container-content">
        <div class="flex flex-wrap-tablet">
            <div class="w70 w100-tablet"><article> контент </article></div>
            <aside class="w25 w100-tablet container-sidebar"> сайдбар </aside>
        </div>
    </div>
 </div>

modules/footers/footer1.php - внутри его свой контейнер
modules/footers/footer2.php - внутри его свой контейнер
</body> 
...

Если же сайдбар не нужен, то код будет чуть проще, но с тем же смыслом:

...
<body> 
modules/headers/header1.php - внутри его свой контейнер
modules/headers/header2.php - внутри его свой контейнер

<div class="layout-center-wrap">
    <div class="layout-wrap container-content">
            <article> контент </article>
        </div>
    </div>
 </div>

modules/footers/footer1.php - внутри его свой контейнер
modules/footers/footer2.php - внутри его свой контейнер
</body> 
...

Такой подход позволяет решать практически все задачи вёрстки.

Секция HEAD

Для управлением этой секцией можно использовать поля страницы:

  • head[]
  • head-meta[]
  • head-lang[]
  • http-equiv[]

Как правило в HEAD прописываются подключениям css/js от сторонних модулей, которые не входят в комплект системы.

Подключение CSS и JS рассматриваются в другом разделе документации.

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

Для подключения в секцию HEAD используются файлы parts/head. Эти файлы автоматически подключаются шаблоном, а их управление ложится на поля страницы.

Например вот так организовано подключение IM Fonts:

// use.imfont: +
if (checkStr(getPageData('use.imfont', false)) === true) 
    echo '<link rel="stylesheet" href="' . RESOURCES_URL . 'imfont/imfont.css">';

Здесь используется поле use.imfont, Если оно отмечено, то формируется html-код для подключения файла шрифта из каталога ресурсов.

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

Если подключение нужно для всего сайта, то никакие проверки не нужны. Скажем файл parts/head/counter.php использует сниппет для вывода счетчика гугла:

echo snippet('counter');

Таким образом, когда стоит задача подключиться к HEAD, то это можно сделать с помощью полей или parts-файла.

Секция BODY

Для тэга BODY можно использовать поле body, где можно указать например css-класс:

body: class="bg-gray100"

Поле lazy[] используется для вывода произвольных данных в конце BODY.

Также можно вывести данные с помощью parts-файлов. Для этого они располагаются в parts/lazy. Например так подключается библиотека «anime.js»:

// use.animejs: +
if (checkStr(getPageData('use.animejs', false)) === true) {
    echo '<script src="' . RESOURCES_URL . 'animejs/anime.min.js"></script>';
}

Произвольные модульные сетки

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

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