Test page

Эта страница показывает все типы блоков, доступные в новой системе. Каждый блок [tst1] можно гибко настраивать с помощью параметров.

Section 1: Images with text

Image (float)

Демонстрационное изображение

Изображение с обтеканием слева

Image on the left (float-left)

Текст будет обтекать это изображение с правой стороны. Идеально для иллюстраций к тексту.

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

Преимущества float:

  • Экономия места на странице
  • Естественное сочетание текста и визуала
  • Улучшенная читаемость

Image on the right (float-right)

Текст будет обтекать это изображение с левой стороны. Идеально для иллюстраций к тексту.

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

Преимущества float:

  • Экономия места на странице
  • Естественное сочетание текста и визуала
  • Улучшенная читаемость
Демонстрационное изображение справа

Изображение с обтеканием справа

Широкое демонстрационное изображение

Широкое изображение с обтеканием

Example

Это демонстрация обтекания текстом более широкого изображения. Текст автоматически размещается справа от изображения, заполняя доступное пространство.

Когда изображение имеет большой размер, текст адаптируется и обтекает его по контуру. Это особенно полезно для:

  • Технических схем и диаграмм
  • Фотографий с пояснениями
  • Иллюстраций к обучающим материалам
  • Сравнительных изображений

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

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

Section 2: Images with different layouts

Image on the left (float-left)

Текст будет обтекать это изображение с правой стороны. Идеально для иллюстраций к тексту.

Изображение не найдено: images/demo/left-image.jpg
Изображение с обтеканием слева

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

Преимущества float:

  • Экономия места на странице
  • Естественное сочетание текста и визуала
  • Улучшенная читаемость

Image on the right (float-right)

Изображение не найдено: images/demo/right-image.jpg
Изображение с обтеканием справа

А этот текст обтекает изображение справа. Разные layout позволяют создавать разнообразные композиции на одной странице.

Можно чередовать изображения слева и справа для создания визуального ритма.

Centered image (centered)

Изображение не найдено: images/demo/centered-image.jpg
Центрированное изображение с подписью

Full-width image (full-width)

Изображение не найдено: images/demo/full-width-image.jpg
Изображение на всю ширину контейнера

Section 3: Video

YouTube video (centered)

Local video (float-left)

Local video (float-left)

Локальное видео с обтеканием

Это локальное видео, загруженное с вашего сервера. Оно обтекается текстом слева.

Параметры видео:

  • controls: true — показывает элементы управления
  • autoplay: false — не воспроизводится автоматически
  • loop: true — зацикливание
  • muted: true — без звука по умолчанию

Section 4: Columns

Two-column layout (two-columns)

Сравнение двух подходов

Традиционный Markdown

Преимущества:

  • Простота использования
  • Быстрое написание
  • Поддержка во всех редакторах

Недостатки:

  • Ограниченный контроль над вёрсткой
  • Сложности с позиционированием медиа
  • Невозможность создания сложных структур
Структурированные блоки

Преимущества:

  • Полный контроль над композицией
  • Любой порядок элементов
  • Профессиональный внешний вид

Недостатки:

  • Требует знания YAML-синтаксиса
  • Сложнее для новичков
  • Нужно обновить шаблоны

Three-column layout (three-columns)

Три типа контента

📝 Текст
  • Заголовки любого уровня
  • Маркированные и нумерованные списки
  • Жирный и курсивный текст
  • Ссылки
  • inline code
🖼️ Медиа
  • Изображения с разным позиционированием
  • YouTube и локальные видео
  • Подписи и альтернативный текст
  • Настройка размеров и рамок
🏗️ Структуры
  • Двух- и трёхколоночные макеты
  • Списки с разными типами
  • HTML-вставки
  • Комбинирование всех элементов

Section 5: Lists

Unordered list (unordered)

Что можно делать с блоками:
  • Создавать сложные страницы без написания HTML/CSS
  • Контролировать положение каждого элемента
  • Использовать готовые шаблоны блоков
  • Легко менять порядок элементов
  • Добавлять медиафайлы с подписями

Ordered list (ordered)

Как создать страницу с блоками:
  1. Определить структуру страницы
  2. Создать Markdown-файл в нужном разделе
  3. Добавить front matter с layout: docs-page
  4. Определить блок content_blocks
  5. Описывать блоки в нужном порядке
  6. Настроить параметры каждого блока
  7. Сохранить и проверить на сайте

Section 6: Real usage scenarios

Scenario 1: Instruction with illustrations

Изображение не найдено: images/demo/step1.jpg
Шаг 1: Подготовка

Шаг 1: Подготовка материалов

Первый шаг — подготовить все необходимые материалы. Убедитесь, что у вас есть:

  1. Основные компоненты системы
  2. Инструменты для сборки
  3. Документация
Изображение не найдено: images/demo/step2.jpg
Шаг 2: Сборка

Шаг 2: Сборка компонентов

На втором этапе собираем основные компоненты:

  • Устанавливаем базовые модули
  • Проверяем соединения
  • Тестируем функциональность

Scenario 2: Product comparison

Сравнение тарифных планов

💎 Базовый план

$29/месяц

  • До 1000 страниц
  • Базовая поддержка
  • 10 ГБ хранилища
  • Стандартные шаблоны

Идеально для стартапов

🚀 Профессиональный план

$99/месяц

  • До 10000 страниц
  • Приоритетная поддержка
  • 100 ГБ хранилища
  • Кастомные шаблоны
  • API доступ

Рекомендуется для бизнеса

Section 7: HTML inserts and customization

💫 Продвинутая функция

С помощью style: "raw_html" вы можете вставлять любой HTML-код прямо в блоки.

  • Кастомные CSS-классы
  • Интерактивные элементы
  • Виджеты и формы
  • Специальное форматирование

🎯

Гибкость

Любая структура страницы

⚡

Скорость

Быстрое создание контента

🎨

Дизайн

Профессиональный внешний вид

Заключение

Key advantages of the system:

  1. Универсальность — подходит для любых типов контента
  2. Контроль — полное управление вёрсткой без программирования
  3. Согласованность — единый стиль на всём сайте
  4. Расширяемость — легко добавлять новые типы блоков

Next steps:

  • Создайте свою первую страницу с блоками
  • Экспериментируйте с разными layout
  • Добавьте свои медиафайлы
  • Изучите CSS для кастомизации внешнего вида

Удачи в использовании новой системы! 🚀