AI и Albireo CMS

Система прекрасно сочетается с AI-инструментами. Вы можете использовать нейросети для генерации контента или кода для вашего сайта.

Генерация текстов

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

Как правило, ИИ создаёт тексты в формате Markdown. Albireo CMS по умолчанию работает с парсером TextSimple, который хорошо понимает md-разметку. Поэтому в большинстве случаев текст, сгенерированный нейросетью, можно использовать без изменений: TextSimple превратит его в корректную html-разметку.

В редких случаях могут потребоваться мелкие правки, поэтому желательно проверить итоговый html-код страницы. Это можно сделать нажав Ctrl+U в браузере. Если у вас FireFox, то он сразу подсветит html-ошибки красным цветом.

Если же нужен «чистый» Markdown, то в комплекте Albireo CMS он также есть в виде php-библиотеки parsedown. Включить его можно через поле parser: markdown.

Опять же, рекомендуется проверять итоговый html-код страницы, поскольку Markdown очень плохо работает с нативным HTML.

Создание изображений

В целом подход такой же: ИИ по вашему промпту создаёт изображение. Это изображение может быть сразу вставлено через текстовый редактор. Для этого исходное изображение нужно скопировать в браузере в буфер обмена Ctrl+C, а в редакторе Albireo CMS нажать вставку Ctrl+V. Albireo CMS уточнит желаемую ширину изображения (по умолчанию это 1200px) и качество (по умолчанию 80). Дальше система сама получит файл из буфера, загрузит его на сервер и в текстовом редакторе появится ссылка на это изображение. Система сама преобразует его в современный формат WebP.

Часто ИИ не может выставить правильный размер изображения, поэтому иногда проще сохранить файл на свой компьютер, отредактировать его через графическую программу, а потом просто перетащить его мышкой (или через буфер обмена) в текстовый редактор Albireo CMS. Система сама выполнит конвертацию в WebP.

Если у вас есть трудности с придумыванием промптов, то почитайте статью «Как создавать изображения с помощью ИИ»

Готовые промпты

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

Эти промпты можно использовать как заготовки для своих задач.

Шаблон для написания текстов
Адаптация поста под платформу
Генерация идей для постов
Написание поста для блога
Создание контент-плана
Анализ и улучшение контента
Создание сторис
Написание цепляющих заголовков
Ответы на комментарии
Шаблон для генерации изображений
Шаблоны для изображения по фото
Сценарий для видео/рилс

Кроме этого есть отдельная страница Анализ рубрик сайта, которая генерирует промпты на основе записей рубрик сайта:

Анализ рубрики и выявление пробелов
Генерация новых идей
Кластеризация и структура
Обновление старых статей
Оценка понятности для аудитории
План для мини-курса или гида
Предложение форматов публикаций
Улучшение заголовков и описаний

При желании все эти промпты можно отредактировать и добавить свои новые варианты. Все они представляют собой обычные страницы.

Промпты для страниц сайта

В Albireo CMS в «шапке» статьи (там где дата, рубрики и т.п.) может выводиться выпадающий блок с готовым промптами для посетителей сайта.

Проанализировать статью
Выделить главные тезисы
Объяснить простыми словами
Сделать шпаргалку
Вопросы для обсуждения
Аргументы "за" и "против"
Применение на практике

Если это админ сайта, то будут доступны ещё промпты:

Идеи для развития темы
Придумать анонсы
Улучшить текст
SEO-резюме

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

ChatGPT пока единственная нейросеть, которая умеет принимать текст промпта через URL. Сами промпты задаются в конфигурационном файле prompts-info1.php.

ИИ-приложения

При желании вы можете сделать собственное ИИ-приложение, которое можно настроить под свою задачу. Например прописать промпты, выбор опций и т.д. Сейчас многие ИИ предлагают подобный функционал. В качестве примера см. «Создание ИИ-приложений в Google AI Studio».

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

ИИ для кодинга

Современные ИИ достаточно легко создают HTML/CSS/JS/PHP-код, который можно добавить на свой сайт.

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

Поэтому Albireo CMS использует другой принцип: вместо переделки стороннего кода, предложить его лёгкую интеграцию.

Это касается всех частей системы:

Интеграция произвольного php-кода в виде отдельный файлов, функций, классов. При этом поддерживается PSR4, карта классов для библиотек вне PSR4, Composer.
Произвольный html-код. То есть Albireo CMS не накладывает на код ограничений. Это касается всех частей html-документа: head, body, html, lazy-включения и т.д.
Произвольный css-код. То есть можно использовать как свои точечные css-стили, css-файлы или css-фреймворки.
Произвольный js-код. Это свободное использование любого js-файлы, функции или js-библиотеки. При желании можно интегрировать даже такие сложные вещи как React.JS.

Рабочий стек Albireo CMS

Базис системы это:

PHP 8+.
SQLite (для кэша и динамических данных).
Berry CSS.
AlpineJS.
Прочие ресурсы, которые могут использоваться точечно.

Ресурсы — это возможность получить нужную функциональность сразу в рамках единой комплектации системы. Например в комплекте есть jQuery 2/3, Bootstrap Icons, Bootstrap CSS, Google-шрифты, FontAwesome-шрифты и т.д. Многие ресурсы не используются в шаблоне Albireo CMS, но могут использоваться как раз при интеграции со сторонними библиотеками.

Например часто в лендингах используется Bootstrap CSS и jQuery. Поскольку они уже есть в комплекте системы, то нет необходимости заниматься их подключением.

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

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

Berry CSS

Berry CSS - основной css-фреймворк, на котором выполняется вся вёрстка. Поскольку Berry CSS фреймворк атомарного уровня и обладает прекрасной семантикой классов, то он легко изучается и применяется. Кроме того есть подробная документация для разработчиков.

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

Обратите внимание, что не все ИИ могут прочитать и обучиться по такому большому файлу (примерно 100Кб), поэтому ИИ часто начинает галлюцинировать и выдавать несуществующие классы и верстку. Поэтому перед тем как давать задачу нейросети, убедитесь, что она корректно обучилась верстать в классах Berry CSS. Иначе вы получите верстку, не имеющую к Berry CSS никакого отношения.

Сторонние css-фреймворки

Часто ИИ предлагает вёрстку в классах Tailwind CSS. Это тоже фреймворк атомарного уровня и некоторые его классы похожи на классы Berry CSS, но в целом они имеют разный подход к пониманию семантики.

Tailwind CSS имеет «грязный» код и множество ненужных классов, которые делают его очень большим (более 2Мб), поэтому Tailwind CSS обычно используется в JS-разработке, где можно его кастомизировать и сделать так, чтобы он выдавал только необходимые css-классы. В обычной web-разработке (HTML/CSS) этого сделать невозможно, поэтому часто предлагается просто подключить весь его css-файл (огромный).

Плюсом такого подхода будет то, что ИИ хорошо обучены на таких классах, а значит могут выдавать рабочий html-код с меньшими ошибками.

Поэтому если стоит задача использовать не Berry CSS, а сторонний css-фреймворк, то делается это путем добавления его css-файлов через поля страниц (см. документацию на этом сайте).

При этом Berry CSS можно отключить через поле use.berry: -. Но здесь важно понимать, что если это сайт, например с блоговым выводом, то необходимо добавить недостающие css-классы из Berry CSS в сторонний фреймворк (в виде своего css-файла). Либо не отключать Berry CSS, возможно, что классы не будут между собой конфликтовать (обычно проблем и нет, кроме более высокого трафика).

Подобным образом можно подключать любые css-фреймворки. В комплекте Albireo CMS уже есть Bootstrap CSS 4/5, то есть даже не нужно ничего скачивать, чтобы сразу верстать на этом фреймворке.

Стек JavaScript

Albireo CMS использует AlpineJS в качестве основной библиотеки JavaScript. В большинстве случаев нет необходимости от неё отказываться, поскольку она работает в пределах изолированных блоков и никак не влияет на сторонний js-код.

Это позволяет без труда добавлять любые js-библиотеки на сайт. Делается это с помощью полей записи в самых разных вариантах, зависящих от задачи.

ИИ прекрасно понимает как использовать AlpineJS, поэтому его код можно вставлять в файл без каких-либо переделок. При этом не нужно ничего дополнительно подключать, поскольку AlpineJS автоматически подключается для всех страниц.

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

Поэтому ИИ можно сразу предложить использовать AlpineJS в качестве основной библиотеки.

Web-билдеры для генерации сайтов/лендингов

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

В большинстве случаев, такие сервисы работают в своём кодовом стеке: это собственные js-файлы и css-стили. Даже если такой сервис использует ИИ для своей работы, то он всё равно обучен именно на своём коде и своих шаблонах.

Поэтому нет никакого смысла пытаться его обучить или попросить создать лендинг на классах Berry CSS с использованием AlpineJS, он всё равно не сможет этого сделать: будет очень много ошибок.

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

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

Более подробно об этом написано в статье «Создание лендингов».

Если создание таких страниц поставлено «на поток», то можно продумать промпт, который заставит ИИ создавать страницы по заданным правилам. Например в каждый файл добавлять секцию полей Albireo CMS или даже использовать мастер-шаблон. Для url-путей можно использовать php-вставки, например с UPLOADS_URL и т.д.