В зарубежном Интернете сейчас происходит интересная тенденция отказа от сложных CMS в пользу «чистых» и очень простых сайтов. Множество блогеров переходят от CMS в static-сайты, где нет сложной навигации, панели управления, нет базы данных. Всё это очень напоминает движение Web 1.0, которое закончилось лет 10 назад.
Помимо статичных сайтов, часто блогеры выбирают какие-то простые системы, полностью отказываясь от WordPress (в основном претензии именно к нему). Таких простых CMS очень много. Меня заинтересовала Pure Blog.
Посмотрите его сайт, будет понятно о чём пойдёт речь дальше.
Сейчас вокруг этой CMS «крутится» несколько десятков (сотен?) сайтов, и мне стало интересно, почему же люди выбирают именно Pure Blog. Я не могу выделить эту систему с технической точки зрения, таких «примитивных» CMS очень много и по сути она напоминает мой LPF десятилетней давности. Но, при всём этом, именно техническая простота для конечного пользователя играет особую роль.
В основном блогеры жалуются на слишком сложный WordPress: многие в разочаровании из-за того, что для простого блога нужна огромная система, хотя по сути требуется только вывести примитивные html-странички.
Другая причина — это сложность дизайна блогов. Я даже был удивлён тем, что до сих пор есть такая потребность.
Опять же, посмотрите на Pure Blogroll — там много блогов, которые выполнены в стиле Web 1.0. Или даже загляните на UberBlogr — это немецкоязычное «кольцо сайтов», но будет понятно какие именно блоги сейчас активны.
Конечно же мой интерес связан с Albireo CMS, которую я также позиционирую в первую очередь для простых сайтов и блогов. Правда я думал, что блогеру важно иметь достаточно высокую функциональность, сравнимую с тем же WordPress. Но PureBlog, наоборот, показывает что людям интересны очень простые сайты.
Поэтому я хочу показать, как использовать Albireo CMS для создания чего-то подобного.
С чего начать?
Поскольку в Albireo CMS любая страница может быть индивидуальной, то для примера я покажу как сделать «PureBlog» именно на отдельной странице. Если вы хотите сделать весь сайт в подобном выводе, то настройки страницы прописываются в общем конфигурационном файле (page-data.php).
Основные задачи
Определимся с тем, что именно мы хотим получить в итоге. Фактически мы можем сделать любой сайт, но для примера возьмём скажем этот rausgerufen.de. В целом же, можно использовать любые готовые цветовые решения, которые приведены на pureblog.org/themes.
На что особенно нужно обратить внимание:
- Контейнер сайта: он просто центрируется в браузере.
- Ширина контента 720px.
- Ширина шапки и подвала 960px.
- Отсутствие сайдбара.
- Простая шапка и подвал.
- Навигация через меню и метки (у нас еще есть и рубрики).
- Используются крупные шрифты.
Для сразу вы можете посмотреть итоговый вариант.
Основные поля
Albireo CMS поставляется с уже готовым выводом и примерами, поэтому часть полей страницы нужно просто переопределить под нашу задачу.
Сделаем новую страницу, например pure.php с произвольным текстом и такими начальными полями:
# титул title: Sample PureBlog on Albireo CMS # можно отдельно указать заголовок статьи header: Sample PureBlog # описание и анонсы description: [announce] announce: Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur # для ИИ, если нужно # llms: # тип записи type: blog # дата в произвольном формате date: 2026-04-27 12:00 # комментарии можно включить по желанию comments: - # каталог записи images-dir: [UPLOADS_URL] # изображение записи, если есть image-large: [UPLOADS_URL]default.webp # метки tags: Lorem, ipsum, dolor # рубрики category: Lorem, ipsum, dolor
Это типовые поля, которые есть почти в каждой записи.
Настроим основной вывод
Вначале нужно отключить сайдбар.
layout: default.php
После этого выберем сетку без полей-теней:
css.layout: nofields.css
И отключим верхнюю навигацию (хотя можно и оставить):
nav-top: -
Пока можно отключить вывод шапки и подвала:
headers: footers:
Потом отдельно их настроим.
Модульная сетка
Модульная сетка настраивается через css-переменные:
css.root[layout-max-width]: 960px
css.root[layout-wrap-padding]: 30px
css.style[]: .container-content {max-width: 720px; padding: 0 20px;}
Здесь css-переменная --layout-max-width ограничивает контент на 960px, и мы сразу устанавливаем внутренний (левый и правый) отступ в 30px. Это нужно для того, чтобы на телефонах сайт не «прилипал» к краям экрана. То есть через эти настройки вы можете подредактировать желаемую ширину сайта.
Класс .container-content используется внутри только для основного контента и здесь мы используем обычные css-стили.
Типографика
В целом Berry CSS уже имеет достойную типографику, поэтому мы изменим только основной текст и h2-заголовок.
css.root[body-size-base]: 19px css.root[h2-font-size]: 2.5rem css.root[headings-font-weight]: bold use.font[exo2]: + css.root[body-font-family]: "Exo 2"
В Albireo CMS уже есть готовые шрифты — достаточно просто выбрать, что понравилось. Всего их 22 штуки.
Особо хочу отметить, что часто блогеры выбирают шрифты без кириллицы, поэтому когда их сайты смотрятся через google-переводчик (это стандартный перевод браузера), то такие шрифты заменяются на другие, часто плохо подходящие. Поэтому всегда используйте шрифт с кириллицей!
Primary-палитра
Теперь самое интересное — изменим цвета сайта.
В комплекте Albireo CMS 21 цветовая палитра. Но, если мы хотим подобрать что-то близкое к «rausgerufen.de», то можем выбрать палитру на странице «Подбор цветов Berry CSS». На самом деле Primary-палитра нам нужна для того, чтобы использовать её градации, может быть ссылки и т.п.
В нашем случае задача чуть-чуть сложней, поскольку есть фон браузера, а значит Primary-палитра будет акцентной по отношению к нему. Поэтому можно вначале выставить фон и текст браузера, а потом подобрать подходящую палитру. В данном случае, как мне кажется что brown.css отлично подходит (либо однотонная orange.css).
# Primary-палитра
css.theme: brown.css
# цвет фона браузера
css.root[body-bg]: #f5edd6
# цвет текста
css.root[body-color]: #3b2f1e
# стили для dark-режима
css.style[]: .dark {--body-bg: var(--primary900); --body-color: var(--primary200);}
Почему в 90% случаев Primary-палитра из Berry CSS вам подойдёт? Всё просто — она охватывает весь цветовой круг, а значит всегда есть близкий оттенок к искомому цвету. Поэтому вы почти всегда сможете получить готовую монохромный палитру любого цвета. Кроме того, Berry CSS использует профессиональные RAL-цвета.
Начало записи
Обычно в начале записи выводится заголовок (это поля header или title). Потом идёт строка с датой публикации. После записи выводятся метки (и рубрики).
Сделать вывод можно хоть вручную, но мы поступим по взрослому: сделаем отдельные extras-файлы, чтобы они автоматом подключались.
extras.start[pure-header.php]: + extras.end[pure-footer.php]: +
Здесь два файла, которые размещаем в website/service/my/extras — это каталог имеет тоже значение, что и в шаблоне Default.
Файл pure-header.php:
<?php if (!defined('BASE_DIR')) exit('No direct script access allowed'); ?>
<!-- nosimple -->
{@isset $header}
<h1>{{ $header }}</h1>
{@elseisset $title}
<h1>{{ $title }}</h1>
{@endisset}
<div class="mar30-b">
{@check $draft}
<span title="{@lang Publication status}" class="pad3 pad10-rl rounded t-red100 bg-red700 mar10-r"><i class="bi-bell-slash-fill"></i>Draft</span>
{@endcheck}
{@empty $nodate}
{@isset $date}
<span class="mar10-r" title="{@lang Date of publication}"><i class="bi-calendar3"></i>{{ convertDate($date, 'd-m-Y') }}</span>
{@endisset}
{@empty! $date_edit}
<span class="mar10-r" title="{@lang Last modified date}"> / {{ convertDate($date_edit, 'd-m-Y') }}</span>
{@endempty}
{@endempty}
{@if checkUserAccess(['admin']) }
<a class="mar10-r bi-card-text" href="{{ $link_for_edit }}">Edit</a>
{@endif}
</div>
<!-- /nosimple -->
Здесь используется tpl-шаблонизатор. Здесь мы выводим заголовок, дату и служебную информацию.
Файл pure-footer.php:
<?php if (!defined('BASE_DIR')) exit('No direct script access allowed'); ?>
<!-- nosimple -->
<div class="mar30-tb">
{@empty! $category}
<div class="mar10-r bi-bookmark" title="{@lang Categories}">{{ categoryLinks($category) }}</div>
{@endempty}
{@empty! $tags}
<div class="mar10-r bi-tags" title="{@lang Tags}">{{ tagLinks($tags) }}</div>
{@endempty}
</div>
<!-- /nosimple -->
Здесь ещё проще, поскольку просто выводим рубрики и метки на отдельных строках.
Шапка
Шапку мы разместим в website/service/my/modules/headers/header-pure.php.
<?php if (!defined('BASE_DIR')) exit('No direct script access allowed');
$title = getPageData('headers.title', '');
$subtitle = getPageData('headers.subtitle', '');
$menu = checkStr(getPageData('menu', true)) === true;
?>
<div class="layout-center-wrap">
<div class="layout-wrap pad35-t pad10-b t-center bor1 bor-solid-b bor-primary400">
<div class="t350 t200-tablet t-primary700 dark:t-primary300 lh100 t-georgia links-no-color pad20-b t-bold"><a class="hover-no-underline hover-t-primary750 dark:hover-t-primary500" href="<?= SITE_URL?>"><?= $title ?></a></div>
<?php if ($subtitle) : ?><div class="t-primary500 pad10-b"><?= $subtitle ?></div><?php endif ?>
<?php if ($menu) : ?><div class="lh100 mar10-tb"><nav><?= menu1() ?></nav></div><?php endif ?>
</div>
</div>
Это довольно типовой вариант, где получаются данные из текущей записи, а потом последовательно выводятся. Всего в Albireo CMS 13 вариантов шапок + несколько cover-блоков. Варианты можно посмотреть в документации.
Теперь прописываем поля:
headers: headers/header-pure.php headers.title: Sed lacinia purus headers.subtitle: Dolorem ipsum quia dolor sit amet menu: menu-pure.php menu.design: menu-design2.php
Меню
Что касается меню, то здесь используется поле menu, где указывается файл с пунктами меню. Он располагается к конфигурационном каталоге сайта: website/config. В данном примере я сделал отдельное меню, хотя мы можем использовать и стандартное из menu.php.
return [
[
'name' => '',
'link' => SITE_URL,
'icon' => 'bi-house icon0',
'attr' => 'title="Home"',
],
[
'name' => 'Hobby',
'link' => SITE_URL . 'hobby',
'icon' => 'bi-archive',
],
[
'name' => 'Tags',
'link' => SITE_URL . 'tags',
'icon' => 'bi-tags',
],
[
'name' => 'Categories',
'link' => SITE_URL . 'category',
'icon' => 'bi-bookmark',
],
[
'name' => 'Theme',
'raw' => '<span x-data="{isDark: localStorage.getItem(KEY_THEME_DARK) === \'dark\'}" @click="isDark = toggleThemeDark();" :class="isDark ? \'bi-moon\' : \'bi-sun-fill\'" class="b-inline icon0 t90 pad10 cursor-pointer [[top.class]]" title="Dark/Light"></span>',
'show' => true,
],
];
То есть здесь меню задаётся отдельно от основного и вы уже сами решаете что именно там будет находиться.
Что касается поля menu.design, то это указание на то, какой дизайн меню будет использоваться. В комплекте Albireo CMS два варианта: один из них рассчитан на темный фон сайта, другой на светлый. Поскольку нас светлый фон, то указываем menu-design2.php.
Dark-режим
Сайт автоматически поддерживает темный режим, который реализуется через классы Berry CSS. Нам потребовалось только дополнительно указать фон и текст для класса .dark через css.style[]. Всё остальное уже прописано в nofields.css.
Переключение dark-режима — это часть Albireo CMS, но саму кнопку-иконку мы вынесли в меню. Здесь используется AlpineJS. Код «стандартный», по сути достаточно просто его скопировать и всё будет работать.
Подвал
В качестве подвала я сделал просто:
footers: footers/footer6.php
Этот файл из комплекта Albireo CMS, но вы можете взять любой другой, скопировать в website/service/my/modules/footers и поправить под свою задачу. Я разместил по центру и добавил верхний бордюр. Поскольку, скорее всего, у вас будет свой вариант, то я не буду приводить исходный код.
Использование page-data-файла
Если вы хотите использовать эти настройки для других страниц сайта, или даже как основной вывод, то есть смысл вынести эти поля в page-data-файл. Тогда всё сводится к единственной настройке:
file-page-data: pure.php
Вывод архивных записей
Теперь рассмотрим то, как следует выводить архивные страницы, например метки или рубрики. Здесь есть несколько подходов.
Первый — это использовать стандартный вывод, как это уже сделано в Albireo CMS.
Второй вариант, если нужно вывести записи как-то особо. Тут уже многое будет зависеть от того, как именно будут организованы данные.
Например если использовать рубрики, то можно вывести все записи таким образом:
// например это страница сайт/astronomy
// рубрика астрономия
$rows = categoryGetPages('astronomy', 7);
if ($rows['files']) {
echo tpl(data: $rows['files'], tpl: TPL_DIR . 'one-column-2.php', add: ['header' => 'Astronomy']);
// если нужна пагинация
echo tpl(data: $rows['pagination'], tpl: TPL_DIR . 'pagination2.php');
}
Или вот так можно вывести метку:
// например это страница сайт/astronomy
// метка Астрономия
$rows = tagGetPages('Астрономия', 7);
if ($rows['files']) {
echo tpl(data: $rows['files'], tpl: TPL_DIR . 'one-column-2.php', add: ['header' => 'Метка «Астрономия»']);
}
Эти варианты хороши тем, что используется типовой вариант с рубриками и метками, а значит получение записей достаточно простая задача.
Если записи располагаются по подкаталогам, то можно их в таком же виде и вывести:
// вывод всех записей
$rows = getPages(
limit: 0, // все записи
where: 'draft = 0 AND type = :type',
order: 'subdirs ASC, date_unix DESC',
bindValue: [':type' => 'blog'],
);
if ($rows['files']) {
echo tpl(data: $rows['files'], tpl: TPL_DIR . 'folders.php');
}
Если нужно ограничиться выводом только одного подкаталога, то используется такой вариант:
// каталог demo/astronomy
$rows = getPages(
limit: 0,
where: 'draft = 0 AND type = :type AND subdirs = :dir',
order: 'subdirs ASC, date_unix DESC',
bindValue: [':type' => 'blog', ':dir' => 'demo/astronomy'],
);
if ($rows['files']) {
echo tpl(data: $rows['files'], tpl: TPL_DIR . 'folders.php');
}
Вывод записей на сайте происходит в два этапа. Первый — это получение записей, а второй непосредственный вывод через tpl-шаблонизатор.
В зависимости от задачи, можно использовать разные выводы. Например:
one-column-2.php, где нет вывода изображения записи,columns-6.php, это вывод в колонках,folders.php, специально рассчитанный на вывод в виде подкаталогов.
То есть, когда станет задача поменять формат вывода, то нужно скопировать подходящий файл в website/service/my/tpl и там его поправить.
Итого
Вот здесь вы можете посмотреть итоговый вариант.
Конечно, я не стремился повторить один в один, поскольку это потребует множество мелких правок. Я хочу лишь показать насколько просто и быстро можно кастомизировать Albireo CMS под свои задачи. Заметьте, насколько мало правок было сделано по CSS, а HTML - это только шапка и extras-файлы.