Шапка и подвал сайта

Рассмотрим как изменить шапку и подвал в Albireo CMS под свою задачу.

Как подключаются модули шапки и подвала в Albireo CMS

Для начала рассмотрим схему подключения шапки и подвала, поскольку это позволит лучше понимать как правильно действовать.

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

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

templateModules('headers'); // шапки
templateModules('footers'); // подвалы

То есть поле headers хранит файлы модулей шапки, а footers — подвала. Это позволяет не менять шаблон под каждую шапку, достаточно просто указать файлы в полях страницы.

Свой каталог модулей

Скорее всего вы заходите изменить выбранную шапку или подвал. Это касается верстки, дизайна, может каких-то блоков. В Albireo CMS есть 13 шапок и ещё 9 cover-модулей, которые тоже могут быть шапками. А также 6 подвалов.

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

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

Опции для шапки/подвала/модуля

В основном шапка/подвал — это html-код с небольшим вкраплением PHP. Может случиться так, что вы заходите придумать несколько опций для модуля.

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

Например нужно сделать так, чтобы в шапке выводится title записи разными цветами, скажем red и green.

// получаем значение поля страницы
$color = getPageData('my-header.color', 'red');

// преобразуем это в css-классы
$cssClass = $color == 'red' ? 't-red600' : 't-green600' ;
?>

<div class="<?= $cssClass ?>"><?= getPageData('title', 'no title') ?></div>

Получение поля происходит с помощью функции getPageData().

То есть вы сами решаете какие именно опции будут в вашем модуле.

Layout-контейнер

В Default-шаблоне Albireo CMS используется два css-файла под разный вывод контейнера: fields.css и nofields.css.

Файл fields.css содержит специальную вставку /*! @layout.fields */, которая автоматически формируется в «признак» layout.fields, который можно использовать при формировании вёрстки.

// «признак», что используется fields
$fields = getVal('layout.fields', false);

// использование
if ($fields) ...

Скажем фон браузера может быть разным в зависимости от Layout-контейнера (см. примеры в файлах шапок и подвалов).

Вёрстка fields.css содержит тень контейнера сайта и часто нужно его учитывать при формировании шапки и подвала. В этом файле есть css-класс .b-shadow-field, который можно использовать чтобы добавить тень к блоку шапки/подвала.

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

Layout-контейнер для всего сайта задаётся в файле конфигурации page-data.php:

'css.layout' => 'fields.css', 

Либо для страницы индивидуально в виде поля:

css.layout: nofields.css

Конечно же, вы можете сделать свой вариант css-файла. То есть fields.css и nofields.css это рабочие примеры, которые вы можете скопировать и доработать под свои задачи.

css.layout: my-fields.css

Использование pursuing-меню

В Albireo CMS есть js-скрипт pursuingnavjs, который я написал для создания красивого эффекта скрытия/показа блока меню. Поведение похоже на поведение смартфонов. Когда скроллинг страницы вниз меню скрывается, а как только происходит скролл вверх, то оно появляется.

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

# подключение
use.pursuingnav: +

# классы анимации
headers.pursuing.class: animation-top animation-fast

# отступ перед срабатыванием
headers.pursuing.threshold: 100

Для того, чтобы использовать pursuing-меню нужно задать id блока, а также прописать js-код инициализации. Полные примеры есть в модулях шапки, здесь я приведу общую схему, объясняющую принцип работы.

// проверяем, что pursuing включен
// выводим js-код инициализации
// id-блока формируем автоматически на основе текущего файла, используя basename()
// функция strRemoveLF() сжимает строку для компактности вывода
if (checkStr(getPageData('headers.pursuing', false)) === true) {
    echo strRemoveLF("<script>
      document.addEventListener('DOMContentLoaded', function () {
        pursuingNav('#" . basename(__FILE__, '.php') . "-menu', {
            myclass: '" . getPageData('headers.pursuing.class', '') . "',
            threshold: " . getPageData('headers.pursuing.threshold', 0) . "
        });
      });
    </script>");
}

Далее в html-коде используем такой же id:

<div id="<?= basename(__FILE__, '.php') ?>-menu" class="..."><nav>меню</nav></div>

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