В маркетинге часто нужно быстро запускать лендинги под разные продукты, предложения, акции и не только. Для этого необходимо постоянно обновлять контент и создавать кастомные страницы с любой структурой. Растущая популярность конструкторов сайтов показала, что высокой скорости можно добиться если дать возможность всем управлять контент-менеджерам без привлечения разработчиков. И ряд популярных CMS тоже предлагают свои решения этой задачи. В этой статье мы разберем почему лучше всего для этого подходит Strapi.
Как работает Strapi
Для понимания того, как можно динамически изменять структуру страницы сайта из админки Strapi без привлечения разработчиков, нужно напомнить основную схему его работы.
Strapi — headless CMS, что означает, что он имеет дело только с контентом, отдавая его отдельному клиентскому приложению по API. Контент может быть двух типов: коллекции и единичные типы. Единичные типы описывают уникальные структуры данных — например, это хедер или футер, одинаковые для всех страниц сайта. Коллекции описывают наборы сущностей с одинаковой структурой данных — например, список пользователей, магазинов, товаров или типовых страниц сайта.
Каждый элемент — как единичный, так и элемент коллекции — может иметь одно или несколько полей разного типа. В Strapi есть предустановленный список типов данных, из которого можно выбирать: Text (простой текст), Rich text (текст с поддержкой форматирования), Number (число), Email и т.д. Разработчик или администратор задает структуру будущих данных — список коллекций и единичных типов, а также из каких полей какого типа они должны состоять. После этого контент-менеджер создает экземпляры единичных типов и элементов коллекций и присваивает уже конкретные значения их полям.
Пример без динамической зоны
Для наглядности упрощенный пример: разработчик создал в разделе админки Content-Type Builder коллекцию страниц Pages. Для элементов этой коллекции задал такую структуру:
- Заголовок страницы: поле title типа Text;
- Путь к странице: поле slug типа Text;
- Содержимое страницы: поле content типа Rich text.
А контент-менеджер в соответствующем разделе административной панели — Content Manager — может добавить конкретные элементы этой коллекции и для каждого элемента (страницы) задать свой конкретный заголовок, путь и содержимое:
А теперь перейдем к проблеме динамического изменения структуры страниц. Допустим, контент на разных страницах отличается не только по содержанию, но и по формату: на одной странице между фрагментами текста нужно вставить слайдер, на другой добавить баннер, на третьей поменять элементы внутри блока и т.д.
В изначальном примере содержимое страниц у нас имеет тип Rich text, т.е. форматированный текст. Для заполнения этого поля контент-менеджеру доступен визуальный редактор, который поддерживает простое форматирование текста и даже вставку изображений, но для вставки сложных элементов типа слайдера или баннера его будет недостаточно.
Решить проблему поможет использование другого типа данных вместо Rich text — а именно Dynamic zone в сочетании с Component.
Компоненты и динамические зоны в Strapi
Компоненты (Components) и динамические зоны (Dynamic zones) — это особые типы данных в Strapi, которые можно присваивать полям сущностей, наряду с такими полями, как Text, Email и др.
Компоненты создаются разработчиком в разделе админки Content-Type Builder и могут включать одно или несколько полей. Например, можно создать компонент Slider с единственным полем files типа Media, т.е. в качестве значения контент-менеджер может загрузить несколько медиафайлов. Названия и структура компонентов могут быть любыми, в т.ч. компоненты могут состоять из других компонентов.
Динамическая зона — это тоже тип данных поля. Когда разработчик создает поле с типом данных Dynamic zone, он должен выбрать компоненты, которые будут доступны в рамках динамической зоны. Контент-менеджер при создании экземпляра сущности, имеющей поле типа Dynamic zone, может выбирать в рамках этой зоны любые доступные в ней компоненты в любом порядке и количестве и задавать свои значения полям этих компонентов.
Пример с динамической зоной
Допустим, разработчик создал в разделе Content-Type Builder несколько компонентов, которые могут быть включены в контент страницы: слайдер, аккордеон, текстовый блок, изображение и пр.
В коллекции страниц Pages вместо поля Content с типом Rich text нужно создать поле Content с типом Dynamic zone:
Выбрать какие компоненты из ранее созданных в админке будут доступны в рамках динамической зоны:
В данном примере для динамической зоны content выбраны доступные компоненты Slider, TextBlock, Quote, Media, Banner и Accordion.
Структура данных для элементов коллекции Pages теперь выглядит так:
Теперь контент-менеджеру при создании новой страницы (элемента коллекции Pages) для каждой создаваемой страницы доступно добавление нужных компонентов в динамическую зону content:
Можно выбрать сколько угодно из доступных вариантов компонентов и расположить их в любом порядке:
Пример созданной контент-менеджером страницы, контент которой включает текстовый блок, после него идет слайдер, затем еще один текстовый блок и в конце баннер:
Содержимое каждого компонента можно раскрыть и отредактировать. Также можно удалять компоненты, изменять порядок их следования простым перетаскиванием и добавлять новые компоненты из списка доступных.
У других страниц из этой же коллекции состав блока Сontent может отличаться — например, можно создать страницу, где сначала будет идти картинка, затем — текстовый блок, затем слайдер, затем еще один текстовый блок и в конце аккордеон с часто задаваемыми вопросами и ответами.
Если в дальнейшем потребуется размещать на страницах и контент другого типа, которого пока нет в админке (например, блоки УТП, преимуществ и т.п.), то администратор сможет создать соответствующие компоненты, добавить их в динамическую зону «content», и они будут доступны для выбора контент-менеджеру.
Сравнение Strapi dynamic zones с популярными альтернативами
Dynamic zones в Strapi позволяют гибко управлять структурой контента через компоненты — переиспользуемые блоки с предопределенным набором полей. При этом разработчики определяют типы и структуру компонентов, а также логику их отображения на фронтенде. Рассмотрим, как похожие задачи решаются в других популярных CMS.
Альтернатива: Tilda zero blocks
Конструктор сайтов Tilda позволяет добавлять на страницы сайтов так называемые нулевые блоки, полностью кастомизируемые блоки с собственным дизайном. Создание и редактирование нулевого блока похоже на работу с графическим редактором.
При добавлении на страницу нулевого блока пользователю становиться доступен встроенный редактор, с помощью которого он может добавлять, удалять, редактировать и форматировать содержимое блока. Для добавления доступны стандартные элементы Tilda: текст, изображение, фигура, форма, видео и пр. После добавления элемента пользователь может разместить его в нужном месте экрана (доступно выравнивание по сетке) и изменять размеры, шрифт (для текста), цвет и прочие параметры.
Тильда также позволяет создать уникальный дизайн и сверстать по нему шаблон с привлечением программистов, и потом этот шаблон добавлять на свою страницу, и уже в нем менять порядок блоков, менять в них контент.
Основное отличие нулевых блоков от динамических зон в том, что в случае с первыми пользователь редактирует не только сам контент, но и его визуальное представление. В Strapi пользователь добавляет только данные, а клиентское приложение, фронтенд, отрисовывает страницы с ними самостоятельно, на основании изначально заложенной в него разработчиками логики.
Альтернатива: WordPress ACF
Advanced Custom Fields (ACF) — это вордпрессовский плагин, который позволяет добавлять дополнительные поля при редактировании контента.
В ACF есть кастомное поле с типом Flexible content. По сути это поле представляет собой обертку для группы так называемых макетов (layouts), состоящих, в свою очередь, из других полей. При настройке поля типа Flexible Content задается условие, в каких шаблонах такое поле будет доступно (например, в шаблонах всех страниц, или всех постов, или конкретных страниц, удовлетворяющих какому-то условию и т.п.).
При переходе в соответствующий шаблон для редактирования страницы или поста пользователь может в рамках поля Flexible Content добавить на эту конкретную страницу или в пост любые макеты и заполнить их поля. Например, если при настройке поля Flexible Content был добавлен макет Image (название может быть любым), включающий два поля — для загрузки изображения и текстовое поле для подписи к нему, то пользователь, редактируя шаблон конкретной страницы, может добавить один или несколько макетов типа Image, загрузив для каждого свою картинку и указав подписи к этим картинкам. Если при настройке поля Flexible Content были добавлены и другие макеты, пользователь выбирать также и их в любых количествах (если ограничения по количеству не прописаны при настройке Flexible Content, т.к. такая возможность тоже есть) и сочетаниях.
Механизм работы очень похож на механизм работы Dynamic zone в Strapi. Можно провести следующую аналогию:
- поле типа Flexible Content — аналог поля типа Dynamic zone в Strapi;
- макеты (layouts) — аналог компонентов (components);
- поля макетов — аналог полей компонентов.
Такой способ кастомизации страниц можно использовать и в обычном режиме работы WordPress, и используя WordPress в качестве headless cms. В первом случае значения полей для страниц, использующих Flexible Content, передаются непосредственно в шаблон, содержащий html-разметку. Во втором случае они передаются по API — REST или GraphQL — на фронтенд, который рендерит страницы с использованием этих данных. WordPress во втором случае, аналогично Strapi, отвечает только за предоставление контента, но не за его отображение на странице.
В данном случае Strapi выигрывает тем, что полностью работает на javascript и не требует для выполнения задач координацию бекенд и фронтенд-разработчиков — все выполняет один специалист.
Альтернатива: MODX ContentBlocks
По умолчанию в MODX CMS отсутствует функциональность, аналогичная той, которую обеспечивают Dynamic zones в Strapi. Но похожего эффекта можно добиться с помощью платного плагина ContentBlocks (€79 за каждый сайт).
ContentBlocks позволяет контент-менеджерам создавать страницы с произвольным содержимым, частично управляя и визуальным отображением контента за счет использования макетов (layouts). В ContentBlocks под макетом понимается не то же самое, что в ACF (группа полей, аналог компонентов в Strapi), а способ размещения контента на странице: в одну колонку, в две, три и т.п. В настройках каждого такого макета задается его шаблон с разметкой обертки. Разработчики также могут добавить свой кастомный макет, настроив для него шаблон.
На одной странице можно добавлять несколько макетов — например, сначала блок содержимого в одну колонку, потом — в две, потом — снова в одну. Т.е. макет относится не обязательно к странице целиком, а к блоку ее содержимого. Такие макеты после добавления на страницу можно менять местами, редактировать и удалять.
После выбора шаблона, допустим двухколоночного, контент-менеджер может добавлять контент отдельно в каждую его колонку. Плагин предоставляет достаточно большой список встроенных компонентов для добавления, а также разработчики могут создавать свои кастомные компоненты, которые потом также могут быть использованы контент-менеджерами.
Также в ContentBlocks есть возможность создавать шаблоны для однотипных страниц. Шаблон представляет собой набор макетов для страницы с уже выбранными компонентами для каждой колонки каждого макета. Таким образом, при выборе такого шаблона контент-менеджер должен только заполнить значения полей компонентов.
MODX позволяет разрабатывать REST API поверх MODX, поэтому эту CMS можно использовать и как headless. Но для этого нужны дополнительные доработки, в то время как Strapi предоставляет такую функциональность из коробки.
Сравнительная таблица
| Характеристика | Strapi | Tilda | WordPress ACF | MODX ContentBlocks |
|---|---|---|---|---|
| Тип системы | Headless CMS | Конструктор сайтов | Традиционная CMS + плагин | Традиционная CMS + плагин |
| Разделение контента и представления | ✔ | ✖ | ϟ (возможно) | ϟ (возможно) |
| Гибкость структуры страниц | Высокая | Средняя | Высокая | Средняя |
| Кастомные компоненты | ✔ | ✔ | ✔ | ✔ |
| Доступность визуального редактирования | Полная | Полная | Полная | Ограниченная |
| Необходимость дополнительных плагинов | ✖ | ✖ | ✔ | ✔ |
| Стоимость | Бесплатно | Платный | Платный | Платный |
Заключение
Таким образом, многие CMS могут предложить возможность собирать страницы сайтов по принципу конструктора. Однако если изначально предполагается использование отдельного клиентского (фронтенд) приложения, а от CMS требуется только предоставление контента, целесообразно из перечисленных вариантов выбрать Strapi. Так как он изначально является headless CMS и поддерживает описанную функциональность без необходимости установки дополнительных плагинов, а использование исключительно Javascript позволяет все задачи выполнять силами одного разработчика.
