Короткий огляд Webflow CMS: створення бази даних з нуля
У цьому матеріалі розглянемо Webflow CMS, яка дає тобі повний контроль над структурою твого контенту і тим, як цей контент оформлений у твоєму проєкті – і все це, не потребує написання коду.
Що таке Webflow CMS?
CMS (Content Management System) – це місце, де зберігається і підтримується весь динамічний контент сайту. Веб-сайт посилається на цей динамічний контент на різних сторінках. Таким чином, кожен раз, коли ти або твій клієнт створюєте або змінюєте будь-який контент в CMS, він миттєво оновлюється на всіх сторінках, де на нього посилається сайт.
"Візуальна" система управління контентом – Webflow CMS дозволяє створювати бази даних, дизайн на основі цих баз даних і оновлювати контент – при цьому без написання коду.

Ось так виглядає колекція CMS у Webflow; база даних, яка містить твої контейнери даних, з відповідними полями та інформацією, яку ти потребуєш для стоврення свого дизайну
Створення колекції (бази даних)
Все починається зі створення Колекції `<Collection>`. Це може бути колекція дописів блогу, членів команди, продуктів, вакансій – все, що завгодно.
Створити колекції CMS можна в панелі CMS. Колекції електронної комерції створюються автоматично в панелі електронної комерції.

Налаштування колекції
Щоб завершити створення нової колекції, дай їй ім'я, вибери слаг для структури URL-адреси та створи структуру даних, вибравши шаблон або додавши власні поля колекції.
Шаблони колекцій
Якщо ти не впевнений, яка структура бази даних тобі потрібна для колекції, ти можеш скористатися одним з готових шаблонів Webflow для початку. Кожен з цих шаблонів має власний набір полів, які ти можеш додавати або видаляти за потреби.

ВАЖЛИВО: Колекції електронної комерції постачаються з набором полів за замовчуванням, які не відображаються в структурі колекції під полями колекції. Ти можеш додати більше полів колекції, але не можеш видалити жодне з полів за замовчуванням.
Назва колекцій
Після того, як ти вкажеш назву твоєї колекції, будуть згенеровані варіанти назви, які будуть використовуватися в різних місцях твого проекту. Назва колекції може бути змінена в будь-який час.

URL колекцій
Наступним кроком є налаштування URL-адреси колекції `<slug>`, тобто назва папки, в якій будуть зберігатися сторінки колекції. Текст, який ти вкажеш тут, визначатиме структуру URL-адреси сторінок твоєї колекції – всіх сторінок, створених для кожного елементу колекції.

ВАЖЛИВО: Наприклад, якщо ти створюєш колекцію для блогу <Blog Posts>, ти можеш вказати URL-адресу колекції <blog-post>, щоб вона читалася як website.com/blog-post/blog-post-page. Або ти можеш вказати URL-адресу колекції <blog>, щоб вона читалася як website.com/blog/blog-post-article.
Перейменування URL колекції
Ти можеш перейменовувати URL-адресу колекції за власним бажанням. Однак, якщо ти вже опублікував свій сайт, тобі потрібно буде встановити 301 редирект, щоб гарантувати, що існуючі зовнішні посилання на сторінки цієї колекції будуть продовжувати працювати. Ось як ти можеш легко налаштувати редирект без необхідності перенаправляти кожну сторінку колекції:
Старий шлях: /old-collection-url/
Редирект: /new-collection-url/
ПОРАДА: Щоб налаштувати 301 редирект, перейди в Project Settings → Hosting → 301 redirects settings.
Поля колекцій
Хоча шаблони можуть бути хорошим способом швидко розпочати роботу з колекціями CMS, ти також можеш створювати свої колекції з нуля, додаючи або видаляючи поля відповідно до типу вмісту, з яким ти працюєш.
Поля колекцій не є елементами веб-сайту. Це просто поля, в яких зберігаються дані для кожного елементу колекції, на які ти зможеш посилатися в своїх проектах.
Визначення полів
Коли ти створюєш колекцію, ти повинен подумати одразу про те, яку структуру матиме кожен елемент у цій колекції. Наприклад, якщо ти створюєш колекцію "продуктів”, тобі може знадобитися `<назва>`, `<фото продукту>`, `<категорія>` тощо. Ти можеш створити поле для кожного типу контенту – у вищеописаному кейсі, це будуть поля `<plain text field>`, `<image field>`, `<plain text field>`.
Існує багато типів полів, з яких ти можеш обирати при структуруванні своєї колекції. Кожне поле перетворюється на різні види контенту, які ти включаєш в дизайн свого проекту.

Редагування колекції
Створивши колекцію, ти можеш повернутися і відредагувати її структуру та налаштування навіть після того, як проект буде опубліковано.

ВАЖЛИВО: Щоб отримати доступ до налаштувань колекції, відкрий колекцію в CMS та натисни кнопку <Settings>. Також можна натиснути на іконку налаштувань поруч з колекцією на панелі колекцій.
Ти можеш додати нове поле, відредагувати існуюче поле або взагалі видалити поле. У кожному полі можна змінити підпис і довідковий текст. Налаштувавши текст довідки, ти можеш пояснити співробітникам, для чого призначене кожне поле.

Видалення поля колекції
Ти можеш видалити лише ті поля, які не використовуються у твоєму дизайні, налаштуваннях сторінки колекції, налаштуваннях списку колекцій, таких як фільтри або умовна видимість.
Зміна порядку відображення в CMS колекції
Перетягуй та змінюй порядок колекцій, щоб упорядкувати найважливіші колекції та зробити їх доступними. Зміна порядку, зроблена в інтерфейсі Дизайнера, буде відображена в Редакторі, немає необхідності повторно публікувати свій сайт.
Створення айтемів CMS колекції
Айтеми (елементи) колекції – це записи бази даних у колекції, наприклад, один блог-пост, автор або продукт.
Як створити айтеми?
Створивши колекцію, ти можеш додати шаблонні айтеми, щоб швидко розпочати розробку, або створити елементи вручну, імпортувати елементи з файлу CSV чи імпортувати їх через API CMS за допомогою Zapier або веб-хуків.
Додавання шаблонних айтемів
Якщо в колекції немає жодного елементу, ти можеш додати шаблонні айтеми. Шаблонний контент дозволяє тобі негайно почати проектування і створення бази даних, навіть якщо у тебе ще немає фактичного контенту.
Створення айтемів з нуля
Ти можеш почати створювати елементи вручну, відкривши панель CMS або панель електронної комерції, вибравши колекцію і натиснувши кнопку + `<New Item>`. Кнопка називається відповідно до назви твоєї колекції.

При створенні нового айтему CMS ти можеш вибрати один з варіантів:
- Save Changes. Зберегти зміни, якщо ти ще не зовсім готовий до публікації на сайті
- Publish now. Опублікувати айтем безпосередньо на продакшен, без потреби перед тим опублікувати сайт.
- Queue to publish. Підготувати обраний айтем/ми для релізу при наступній публікації сайту на продакшен.
- Unpublish. Зняти з публікації айтем.

Генерування демонстраційних айтемів за допомогою Webflow AI
Додатковим інструментом у створенні та наповненні твоєї майбутньої бази даних може стати Webflow AI, який пропонує функцію генерування контенту на основі промпту.
Найпоширеніші кейси використання Webflow AI:
- швидке проєктування бази даних з метою валідації ідей
- тестування бази даних з контентом
- презентація бази даних з демонстраційним контентом для клієнта
- стартове наповнення бази даних напередодні запуску (якщо бракує часу чи русурсів у команді для написання блог-постів, то це може бути альтернативним рішенням)

Імпорт айтемів у колекцію
Якщо у тебе вже є база даних, структурована у файлі CSV, ти можеш легко імпортувати її айтеми до колекції та прив'язати до існуючих або нових полів.

ВАЖЛИВО: Використовуючи розширеий стейджинг айтемів з платним сайт-планом, ти можеш опублікувати до 50 айтемів Колекції. Щоб імпортувати більше 50 айтемів, тобі потрібно буде апргейднути твій сайт-план до CMS або Business, які дозволяють імпортувати до 2 000 і 10 000 айтемів Колекції відповідно. Щоб безкоштовно протестувати імпорт CSV, використовуй CSV-файл із 50 рядків або менше (рядок заголовку не враховується як елемент).
Як завантажити файл CSV
Щоб завантажити CSV-файл у визначену колекцію у Webflow зроби наступне:
1. Відкрий панель CMS
2. Вибери колекцію
3. Натисни `<Import>`
4. Перетягни файл CSV (або клацни, щоб завантажити його з комп'ютеру)
Стейджинг айтемів колекції
Створюючи, редагуючи та оновлюючи свої айтеми колекції, ти повинен знати про наступні типи стейджингу для твоїх елементів:
Save Changes. Зберегти зміни, якщо ти ще не зовсім готовий до публікації на сайті
Publish now. Опублікувати айтем безпосередньо на продакшен, без потреби перед тим опублікувати сайт.
Queue to publish. Підготувати обраний айтем/ми для релізу при наступній публікації сайту на продакшен.
Unpublish. Зняти з публікації айтем.
- Save as draft (зберегти як чернетку): перевести елементи колекції в стан чернетки, якщо вони ще не готові до публікації, і видаляє елементи з сайту при наступній публікації на сайті
- Archive (архів): витягує айтеми колекції з сайту при наступній публікації, але в тебе залишається доступ до них з панелі CMS в Дизайнері або Редакторі
Підсумок
Тепер, коли ти створив свою першу колекцію, ти можеш покликатися на її контент і підтягувати дані до своїх елементів на канвасі. Після цього, окремі частини твого вебсайту, не тільки будуть містити динамічний контент, але також це означає, що будь які зміни, які ти вноситимеш у Webflow CMS будуть автоматично з'являтись у твоєму дизайні. І все це не потребує жодного рядку коду.