Структура и оформление статьи

Эти инструменты помогут вам не превратить статью в гигантскую, нечитаемую "простыню" текста. С их помощью вы сможете аккуратно разложить информацию по полочкам.

Колонки (Columns)

Иногда текст удобнее расположить в несколько колонок, как в журналах или при сравнении двух вещей лицом к лицу, не используя таблицы. Для этого используйте теги <Columns> и <Column>. Вы можете задать количество колонок с помощью параметра columns (от 2 до 4). По умолчанию создается 2 колонки.

Как писать:

<Columns columns={2}>
  <Column>
    ### Левая колонка
    Здесь вы можете написать текст для левой части.
    Например, описать теорию.
  </Column>
  <Column>
    ### Правая колонка
    А здесь — текст для правой части.
    Например, показать практику или пример.
  </Column>
</Columns>

Как выглядит:

Вкладки (Tabs)

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

Как писать:

<Tabs>
  <Tab title="В духовке">
    Нагрейте духовку до 180 градусов и выпекайте 15 минут.
  </Tab>
  <Tab title="На сковороде">
    Смажьте сковороду маслом и жарьте по 2 минуты с каждой стороны.
  </Tab>
</Tabs>

Как выглядит:

Раскрывающиеся блоки (Аккордеон)

Используйте этот блок, чтобы спрятать длинные пояснения или ответы на частые вопросы (FAQ). Если читателю это не интересно, он просто пролистнет мимо, не тратя время на скролл.

Как писать:

<Accordion title="Можно ли заменить молоко на кефир?">
  Да, конечно! Кефир сделает панкейки более пышными, но обязательно добавьте немного соды, чтобы реакция прошла успешно.
</Accordion>

Как выглядит:

Слайдер детализации

Это невероятно умный блок! Он позволяет читателю самому выбрать, насколько подробно он хочет изучить тему. Вы пишете текст в трех вариантах: Кратко (TL;DR), Стандартный вариант и Полное погружение. Читатель переключает ползунок, и текст под ним меняется на лету.

Как писать:

<DepthSection>
  <DepthLevel showAt="tldr">
    **Коротко:** Муку нужно просеивать, чтобы тесто было пышным.
  </DepthLevel>
  <DepthLevel showAt="standard">
    Обязательно просеивайте муку через сито перед добавлением яиц. Это разбивает комочки и насыщает муку кислородом.
  </DepthLevel>
  <DepthLevel showAt="deep">
    На молекулярном уровне просеивание муки улучшает гидратацию крахмала и белков, что способствует более равномерному формированию глютеновой сетки во время замеса.
  </DepthLevel>
</DepthSection>

Как выглядит:

Маргинальные заметки (Заметки на полях)

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

Как писать:

<MarginNote title="Интересный факт">
  Сахар кристаллизуется быстрее при высоких температурах, поэтому в карамель иногда добавляют немного лимонного сока.
</MarginNote>

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

Как выглядит:

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

Пошаговый процесс (Шаги)

Если ваша статья — это инструкция или туториал (например, "Как испечь торт"), используйте компонент <Steps>. Он автоматически пронумерует ваши заголовки и выстроит их в красивую вертикальную линию, показывая путь от первого до последнего шага. Внутри него используйте обычные заголовки ###.

Как писать:

<Steps>
### Замешайте тесто
В глубокой миске взбейте яйца с сахаром.

### Разогрейте сковороду
Сковорода должна быть сухой, без масла.

### Выпекайте
Жарьте до появления пузырьков на поверхности.
</Steps>

Как выглядит:

Временная шкала

Похожа на пошаговый процесс, но нужна не для инструкций, а для истории, хронологии или списков обновлений (кто, что и когда сделал). Каждому событию вы указываете дату и заголовок.

Как писать:

<Timeline>
  <TimelineItem date="1969 год" title="Создание сети">
    Запуск первой в мире сети, ставшей прадедом интернета.
  </TimelineItem>
  <TimelineItem date="1989 год" title="Изобретение WWW">
    Тим Бернерс-Ли предлагает концепцию Всемирной паутины.
  </TimelineItem>
</Timeline>

Как выглядит:

Карточки навигации

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

Как писать:

<CardGrid>
  <Card title="Десерты" href="/desserts" icon="CakeSlice">
    Рецепты тортов, пирожных и печенья.
  </Card>
  <Card title="Напитки" href="/drinks" icon="Coffee">
    Как приготовить идеальный кофе дома.
  </Card>
</CardGrid>

Как выглядит: