Контент і структура

У нашій системі контент можна оформляти гнучко та зручно - від простих текстових матеріалів до складних візуальних секцій. Це не випадкове рішення, а наша власна розробка, заснована на великому досвіді роботи з контентом сайтів, перекладами та мультимовними проєктами.

Ми добре розуміємо, що одна з головних проблем звичайних сайтів - це не тільки створення сторінок, а також їх подальше оновлення, переклад і розвиток. Особливо це помітно в мультимовних проєктах, де контент часто доводиться дублювати, дробити на дрібні елементи і вручну збирати заново для кожної мови.

Тому в нашій системі контент влаштований так, щоб із ним було зручно працювати і на старті проєкту, і після запуску.

Для статей, описів послуг, інструкцій та інформаційних сторінок зручно використовувати X-MD-блок. Він перетворює звичайний MD-текст на акуратно оформлений контент на сайті.

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

Такий підхід дозволяє не обмежуватися одним форматом. Десь достатньо чистого тексту з красивою типографікою, а десь краще показати інформацію яскравіше: через банер, картки, список переваг, візуальне порівняння або окремий інтерактивний елемент.

Завдяки цьому кожна сторінка може бути простою в підготовці, але при цьому виглядати професійно, цілісно та сучасно.

Текст через X-MD

Для звичайного текстового контенту ми використовуємо спеціальний блок X-MD. Він бере простий MD-формат і перетворює його на красиво оформлений текст на сайті: із заголовками, абзацами, списками, посиланнями та зображеннями.

Це особливо зручно, тому що MD-формат добре розуміють GPT-чат та інші AI-інструменти. Текст можна швидко підготувати, покращити, перекласти або структурувати за допомогою AI, а потім вставити в X-MD-блок без складної ручної розмітки.

У підсумку контент швидше створюється, легше редагується і акуратно відображається на сторінці. А під час роботи з кількома мовами це особливо важливо: можна перекладати не розрізнені маленькі фрази, а цілісні змістові блоки, зберігаючи структуру сторінки, стиль подачі та логіку контенту.

Наприклад, ми можемо написати контент так:

＜x-md＞

# Великий заголовок сторінки
## Заголовок розділу
### Невеликий підзаголовок

Звичайний текстовий абзац, який можна використовувати для опису послуги, статті, інструкції або пояснення для клієнта.

**Важливу думку можна виділити жирним текстом**, щоб вона одразу привертала увагу.

*Додатковий акцент можна оформити курсивом*, якщо потрібно м’яко виділити частину тексту.

- Перший пункт списку
- Другий пункт списку
- Третій пункт списку

> Коротка цитата або важлива думка, яку потрібно візуально відокремити від звичайного тексту.

＜/x-md＞

На сайті це відображається вже не як сирий текст, а як акуратна секція: з картинками, медіавставками, красивими заголовками, списками, виділеннями, цитатами та читабельною структурою.

Посилання всередині тексту

Всередині X-MD-блока посилання пишуться звичайним MD-форматом:

Для внутрішніх сторінок сайту посилання завжди починаємо з /. Так посилання не залежить від того, на якій сторінці воно розміщене.

Наприклад:

[Текст посилання](/page-path)

[Зображення](/features/images)

Посилання на головну сторінку: [Головна](/)

Посилання можна використовувати не тільки у вигляді окремих рядків, а також прямо всередині абзаців.
Наприклад, можна написати так: [Текст посилання](/page-path) і посилання буде працювати прямо всередині абзацу.

Також працюють зовнішні посилання, наприклад, ось посилання на [Google](https://google.com), зовнішні посилання будуть відкриватися в новій
вкладці та не будуть заважати навігації сайтом.

Система сама додасть поточну мову до внутрішнього посилання. Тобто, перебуваючи на англійській версії сайту, посилання /technologies відкриє /en/technologies, а на головній версії сайту це саме посилання відкриє /technologies.

Красиві дизайнерські блоки

Якщо потрібен не просто текст, а виразна секція, ми створюємо готові візуальні блоки.

Наприклад, невеликий елемент у контенті сторінки може перетворюватися на красивий банер на головній сторінці сайту:

＜x-design.hero_particles
title="Розробка сайтів, Telegram-ботів та AI-інструментів"
subtitle="Створюємо проєкти, які можна розвивати: від простої сторінки до системи із заявками, замовленнями, адмін-панеллю,
Telegram mini-app та автоматизацією."
badge="SiteLab Studio"
/＞

Для клієнта це виглядає як повноцінний красивий банер: з великим заголовком, описом, візуальним фоном та акуратною подачею.

При цьому не потрібно щоразу створювати дизайн заново. Ми просто змінюємо текст, а зовнішній вигляд блока залишається єдиним і професійним.

Зручно перекладати

Така структура дуже зручна для мультимовності. Перекладається не вся технічна частина сторінки, а тільки змістовний контент: заголовки, описи, підписи, тексти кнопок та основні блоки.

Наприклад, той самий банер для англійської версії може виглядати так:

＜x-design.hero_particles
title="Website development, Telegram bots, and AI tools"
subtitle="We create projects that can grow: from a simple page to a system with requests, orders, an admin panel,
Telegram mini-app, and automation."
badge="SiteLab Studio"
/＞

Структура блока залишається такою самою, змінюється тільки текст. Тому мовні версії сайту можна створювати значно швидше і акуратніше.

Такі дизайнерські блоки можна використовувати повторно на різних сторінках сайту. Наприклад, один і той самий блок може бути застосований для головної сторінки, сторінки послуги, розділу про технології або будь-якої іншої сторінки сайту. При цьому не потрібно заново створювати дизайн - достатньо замінити заголовок, опис, підписи, кнопки або список елементів. Завдяки цьому сайт розвивається швидше, зберігає єдиний візуальний стиль і не перетворюється на набір випадкових, не пов’язаних між собою сторінок.

Гнучкість під будь-яку задачу

Якщо для проєкту потрібен окремий блок - наприклад, переваги, етапи роботи, картки послуг, галерея, відгуки, форма, порівняння або блок із технологіями - ми створюємо його, і потім цей блок можна легко вбудувати в будь-якому місці сторінки з будь-яким текстом.

У підсумку прості матеріали зручно оформляти через X-MD, а важливі секції - через красиві дизайнерські блоки-компоненти. Завдяки цьому сайт залишається гнучким, акуратним і зручним для роботи з контентом та подальшого розвитку.