Добавить раздел и страницу

Создание разделов внутри продукта, frontmatter страниц и управление порядком в боковом меню.

Добавить раздел

Создать каталог внутри продукта

content/docs/payment-gateway/api/

Описать раздел

Без "root": true — иначе раздел станет отдельным продуктом.

content/docs/payment-gateway/api/meta.json

{
  "title": "API",
  "description": "Спецификации операций и коды ошибок",
  "icon": "Braces",
  "pages": ["index", "authentication", "payments", "errors"]
}

Добавить раздел в meta.json продукта

content/docs/payment-gateway/meta.json

{
  "pages": ["index", "getting-started", "api", "operations"]
}

Добавить страницу

Создать .mdx-файл

Имя файла становится последним сегментом URL.

content/docs/payment-gateway/api/authentication.mdx

Заполнить frontmatter

---
title: Аутентификация
description: Получение токена и подпись запросов к платежному шлюзу.
icon: KeyRound
---

## Получение токена

Содержимое страницы...

Добавить страницу в meta.json раздела

{
  "pages": ["index", "authentication", "payments", "errors"]
}

Страница доступна по адресу /docs/payment-gateway/api/authentication.

Управление порядком и группировкой

Массив pages поддерживает несколько специальных элементов.

{
  "pages": [
    "index",
    "---Основное---",
    "authentication",
    "payments",
    "---Справочник---",
    "errors",
    "..."
  ]
}

Элемент	Действие
`"index"`	Обзорная страница раздела.
`"имя-файла"`	Страница без расширения `.mdx`.
`"имя-каталога"`	Вложенный раздел.
`"---Заголовок---"`	Визуальный разделитель с подписью.
`"..."`	Все неперечисленные элементы в конец списка.

Доступные компоненты в MDX

Зарегистрированы в components/mdx.tsx и не требуют импорта на странице.

Компонент	Назначение
`<Callout type="info \| warn \| error \| success \| idea">`	Выделенный блок с примечанием или предупреждением.
`<Cards>`, `<Card href title description>`	Сетка ссылок-карточек.
`<Steps>`, `<Step>`	Пошаговая инструкция.
`<Tabs>`, `<Tab>`	Варианты одной инструкции.
`<Files>`, `<Folder>`, `<File>`	Дерево файлов.
`<Accordions>`, `<Accordion>`	Сворачиваемые блоки.
Блок кода с языком `mermaid`	Диаграмма Mermaid.

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

<Tabs items={['pnpm', 'npm']}>
  <Tab value="pnpm">
    ```bash
    pnpm install
    ```
  </Tab>
  <Tab value="npm">
    ```bash
    npm install
    ```
  </Tab>
</Tabs>

Пример: диаграмма

```mermaid
graph LR
    Client --> Gateway --> Provider
```

Заголовок блока кода

Атрибут title в информационной строке блока подписывает фрагмент именем файла:

```json title="content/docs/payment-gateway/meta.json"
{ "title": "Payment Gateway" }
```

Перемещение и переименование

Проверьте ссылки

При переименовании или переносе .mdx-файла обновите meta.json и внутренние ссылки на страницу. Старый URL перестает существовать — при необходимости добавьте редирект в next.config.mjs.

Добавить раздел и страницу

On this page