# Справочник шорткодов --- ## 1. Callout — предупреждение / важная информация Подключение к платформе MAX для партнёров доступно для юрлиц и ИП, которые являются резидентами РФ callout с переменной из `assets/css/callout-colors.css` callout с переменной из `assets/css/callout-colors.css` callout с переменной из `assets/css/callout-colors.css` Callout с произвольным hex-кодом цвета ### Параметры: | Параметр | Обязательный | Описание | | ---------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `color` | нет | Цвет фона блока. Можно передать имя CSS-переменной из `assets/css/shortcodes/callout.css` (например `--callout-warning`), либо произвольное CSS-значение: hex (`#FF990020`), `rgb(...)` и т.д. По умолчанию используется акцентный цвет темы | | **Пример** | | ` Текст ` | ### Доступные именованные цвета (из `assets/css/callout-colors.css`): | Переменная | Цвет | | ------------------- | -------------------------- | | `--callout-info` | синий — информация | | `--callout-warning` | оранжевый — предупреждение | | `--callout-danger` | красный — опасность | | `--callout-tip` | зелёный — совет | | `--callout-neutral` | серый — нейтральный | > Новые цвета можно добавить в файл `assets/css/callout-colors.css` в блок `:root`. --- ## 2. Карточки навигации Создание чат-бота Мини-приложения Подключение к платформе Иконки: `bot`, `partners`, `platform` ### **`cell-grid`** — обёртка-контейнер: Параметров нет. Принимает один или несколько `cell` в теле ### **`cell`** — одна карточка-ссылка: | Параметр | Обязательный | Описание | | ---------- | ------------ | -------------------------------------------------------------------------------------- | | `href` | да | URL для перехода | | `icon` | нет | Иконка. Допустимые значения: `bot`, `partners`, `platform` | | `variant` | нет | CSS-вариант отображения | | **Пример** | | `Создание чат-бота` | --- ## 3. FAQ — раскрывающийся вопрос-ответ Перейдите на [платформу MAX для партнёров](https://business.max.ru/self), выберите организацию и нажмите «Создать бота». Не более 5 ботов на одну организацию. ### Параметры: | Параметр | Обязательный | Описание | | ---------- | ------------ | -------------------------------------------------------------------------------- | | `summary` | да | Текст вопроса / заголовка раскрывающегося блока. Поддерживает Markdown | | **Пример** | | ` Ответ ` | --- ## 4. HTTP-метод бейдж Методы: `GET`, `POST`, `PUT`, `DELETE`, `PATCH` ### Параметры: | Параметр | Обязательный | Описание | | ---------- | ------------ | ------------------------------------------------------------------------ | | `method` | да | HTTP-метод. Допустимые значения: `GET`, `POST`, `PUT`, `DELETE`, `PATCH` | | `path` | да | Путь эндпоинта, например `/messages` | | **Пример** | | `` | --- ## 5. API-параметры — «таблица без заголовка» Уникальный идентификатор чата. Можно получить из объекта Chat или через метод GET /chats. Текст сообщения. Максимальная длина — 4096 символов. Поддерживает Markdown и HTML форматирование. Массив вложений. Может содержать изображения, видео, аудио, файлы. Тип вложения: `image`, `video`, `audio`, `file` ### Структура: - `api-params` — обёртка секции: рисует верхнюю черту и группирует строки. Внутри размещаются только `api-param` / `api-param-children` - `api-param` — строка-параметр - `api-param-children` — поддерево разворачиваемой строки (скрыто, пока строка не развёрнута кнопкой) ### Параметры `api-param`: | Параметр | Обязательный | Описание | | ---------- | ------------ | -------------------------------------------------------------------------------------------------------- | | `name` | да | Название параметра API | | `type` | да | Тип данных: `string`, `integer`, `boolean`, `array`, `object` и др. | | `required` | нет | `"false"` — зелёная метка optional. Обязательные поля пишутся без метки | | `pattern` | нет | Паттерн значения, отображается моноширинным акцентным цветом под типом | | `collapsible` | нет | `"true"` — показать кнопку разворота поддерева; за строкой размещается `api-param-children` | | **Пример** | | ` Описание ` | --- ## 6. Табы с кодом curl -X POST "https://platform-api.max.ru/messages" \ -H "Authorization: " \ -H "Content-Type: application/json" \ -d '{"chat_id": 123, "text": "Hello"}' import requests requests.post( "https://platform-api.max.ru/messages", headers={"Authorization": token}, json={"chat_id": 123, "text": "Hello"} ) ### **`code-tabs`** — контейнер с переключателем вкладок: | Параметр | Обязательный | Описание | | ------------------- | ------------ | ------------------------------------------------------------------ | | позиционные (`0…N`) | да | Названия вкладок в порядке следования, например `"cURL" "Python"` | | **Пример** | | ` ... ` | ### **`code-tab`** — одна вкладка с кодом: | Параметр | Обязательный | Описание | | ---------- | ------------ | ----------------------------------------------------------------- | | `lang` | да | Язык подсветки синтаксиса: `bash`, `python`, `go`, `json` и др. | | **Пример** | | ` curl ... ` | --- ## 7. Блок кода import requests requests.post( "https://platform-api.max.ru/messages", headers={"Authorization": token}, json={"chat_id": 123, "text": "Hello"} ) ### Параметры: | Параметр | Обязательный | Описание | | ---------- | ------------ | ------------------------------------------------------------------------------------------ | | `lang` | нет | Язык подсветки синтаксиса: `bash`, `python`, `go`, `json`, `JSX` и др. По умолчанию `text` | | `label` | нет | Текст в заголовке блока. По умолчанию берётся из `lang` | | **Пример** | | ` print("hello") ` | --- ## 8. Карточка с логотипами: Jivo — это платформа для эффективной работы с клиентами, где все обращения из MAX и других каналов собираются в одном окне. Менеджеры отвечают быстрее, не теряют заявки и ведут переписку. Омниканальная чат-платформа для общения с клиентами. Она позволяет операторам отвечать на обращения из одного окна чата и сохранять единую историю переписки. ### **`cards`** — контейнер для нескольких карточек: ### **`card`** — одна карточка: | Параметр | Обязательный | Описание | |------------| ------------ |------------------------------------------------------------------------------------------------------------------------------------------------------| | `title` | нет | Заголовок карточки | | `href` | нет | URL для перехода. По умолчанию `#` | | `image` | нет | Путь к изображению / логотипу | | `icon` | нет | Иконка из набора [VK Icons](https://vkcom.github.io/icons/) | | `alt` | нет | Альтернативный текст для изображения. По умолчанию берётся из `title` | | `media` | нет | Вариант отображения медиа: `"icon"` (по умолчанию) или `"logo"` | | `target` | нет | Атрибут `target` ссылки, например `"_blank"` | | `rel` | нет | Атрибут `rel` ссылки. По умолчанию `"noopener noreferrer"` | | **Пример** | | ` Описание ` | --- ## 9. Одинокая карточка. Smartbot — конструктор чат‑ботов с ИИ для мессенджеров и сайтов ### Параметры: те же, что у `card` в пункте 8. --- ## 10. Просмотр изображения ### Параметры: | Параметр | Обязательный | Описание | | ---------- | ------------ | --------------------------------------------------------------------------------------------------------------- | | `src` | да | Путь к изображению. Поддерживает `{theme}` для переключения по теме: `light`/`dark` | | `alt` | нет | Альтернативный текст | | `title` | нет | Всплывающая подсказка | | `width` | нет | Максимальная ширина изображения. Число без единиц → пиксели (`300` = `300px`), или с единицами (`50%`, `20rem`) | | `border` | нет | Рамка. Цвет (`#DBE2E9`, `red`) → `1px solid `; `none`; полный shorthand (`2px dashed red`); CSS-переменная (`--border-color`) | | `radius` | нет | Скругление углов. Число → `px` (`16` = `16px`), либо с единицами (`50%`, `0`). **Если задан `border` без `radius` — углы прямые (`0`)** | | `shadow` | нет | Тень (`0 4px 12px rgba(0,0,0,.12)`) или CSS-переменная (`--shadow-card`) | | `class` | нет | Доп. CSS-класс(ы) обёртки | | **Пример** | | `` | ### Markdown-синтаксис (зум + декорация): Все markdown-изображения автоматически поддерживают зум по клику. Декорация задаётся в поле title (третий параметр) в формате `ключ:значение`, пары разделяются `;`: ```md ![Описание](/assets/image.png 'width:300') ![Описание](/assets/image.png 'width:50%;border:#DBE2E9;radius:16px') ![С тенью](/assets/image.png 'border:none;shadow:0 4px 12px rgba(0,0,0,.12)') ![Тематическое](/assets/about/miniapps_{theme}.png 'width:400;border:#DBE2E9;radius:31px') ``` Доступные ключи: `width`, `border`, `radius`, `shadow` (правила нормализации те же, что у параметров шорткода). Число без единиц → пиксели. Если title НЕ начинается с `ключ:` — он трактуется как обычная всплывающая подсказка. ![Описание](/assets/bot_card_light.png 'width:100;border:#DBE2E9') ### Подпись под одиночной картинкой Если после картинки (markdown или шорткода ``) следующей строкой написать курсивную подпись `_текст_`, она автоматически оформится как подпись: по центру, 14px, цвет вторичного текста темы — как на портале dev.max.ru. Работает и внутри ``: ```md ![](/assets/bot_card_{theme}.png) _Данные и профиль бота_ ``` ![](/assets/bot_card_{theme}.png) _Данные и профиль бота_ Подпись можно писать и в той же строке сразу после картинки — `![...](src)_Подпись_` — оформление будет тем же. --- ## 11. Слайдер изображений ### Лента изображений (`layout="strip"`) Горизонтальная прокручиваемая лента — несколько изображений видны одновременно, прокрутка нативная (с «прилипанием» к слайдам). Кнопки навигации и точки скрыты. ### Подпись под слайдером Если сразу после `` следующей строкой написать курсивную подпись `_текст_`, она автоматически оформится как подпись под слайдером: по центру, 14px, цвет вторичного текста темы — как на портале dev.max.ru: ```md _Подпись под слайдером_ ``` ### **`slider`** — контейнер слайдера: | Параметр | Обязательный | Описание | | -------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | `layout` | нет | `slide` (по умолчанию) — карусель по одному слайду; `strip` — прокручиваемая лента с нативным скроллом | | `border` | нет | Рамка обёртки (цвет → `1px solid `, `none`, полный shorthand, CSS-переменная). Для `strip` обычно не задаётся | | `radius` | нет | Скругление обёртки. Число → `px`. Если `border` без `radius` — углы прямые | | `shadow` | нет | Тень обёртки или CSS-переменная | | `class` | нет | Доп. CSS-класс(ы) обёртки | ### **`slide`** — один слайд с изображением: | Параметр | Обязательный | Описание | | ------------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | `src` | да | Путь к изображению | | `alt` | нет | Альтернативный текст | | `width` | нет | Кастомная ширина (только `slide`-режим): `300px`, `50%`, `20rem`. Центрируется, высота пропорциональна | | `min-width` | нет | Минимальная ширина слайда (только `strip`-режим): `300px`, `50%`. По умолчанию `50%` | | `max-width` | нет | Максимальная ширина изображения: `350px`, `50%` | | `max-height` | нет | Максимальная высота изображения: `290px`, `80vh` | | `border` | нет | Рамка изображения (те же правила нормализации, что у `image-zoom`) | | `radius` | нет | Скругление углов изображения. Число → `px`. Если `border` без `radius` — углы прямые | | `shadow` | нет | Тень изображения или CSS-переменная | | `class` | нет | Доп. CSS-класс(ы) слайда | | **Пример** | | `` | --- ## 12. Расширенные возможности таблиц Markdown-таблицы поддерживают дополнительный синтаксис для переноса строк, списков и объединения ячеек. ### Переносы строк В ячейках таблиц можно использовать `` для переноса строк: ```md | Поле | Описание | | --- | --- | | `param` | Первая строкаВторая строка | ``` ### Списки в ячейках Если ячейка начинается с `- ` или `* `, она преобразуется в маркированный список. Элементы разделяются `` + маркер: ```md | Поле | Значения | | --- | --- | | `type` | - `DIALOG`- `CHAT`- `CHANNEL` | ``` ### Выравнивание колонок Стандартный Markdown-синтаксис выравнивания в строке разделителя задаёт `text-align` для заголовка и ячеек колонки: `:---` — влево, `:---:` — по центру, `---:` — вправо: ```md | Поле | Количество | | :--- | :---: | | Значение 1 | 10 | ``` ### Colspan (горизонтальное объединение) Пустая ячейка `||` объединяется с **предыдущей** непустой ячейкой, увеличивая её `colspan`: ```md | A | B | C | D | | --- | --- | --- | --- | | Объединённая на 3 колонки ||| Последняя | ``` ### Rowspan (вертикальное объединение) Ячейка, начинающаяся с `^^`, объединяется с ячейкой **выше**: ```md | Группа | Поле | | --- | --- | | Пользователь | `user.id` | | ^^ | `user.name` | | ^^ | `user.photo` | ``` --- ## 13. Иконка Вставляет SVG-иконку из набора [VK Icons](https://vkcom.github.io/icons/) инлайном в текст. Цвет наследуется от текста (`currentColor`) — в ссылке иконка будет акцентной, в обычном тексте — цветом текста. Успешно отправлено [Открыть платформу](https://business.max.ru/self) Цвет можно задать параметром `color` — любое CSS-значение цвета: `#2688EB`, `red`, `var(--accent)`. Синяя Красная Акцентная Без параметра цвет наследуется от текста: в ссылке иконка акцентная, в обычном тексте — цвет текста. ### Параметры: | Параметр | Обязательный | Описание | | ---------- | ------------ | ------------------------------------------------------------------------------------------------ | | `name` | да | Имя иконки, как на сайте VK Icons, например `check_circle` | | `size` | нет | Размер иконки: `12`, `16`, `20`, `24`, `28`, `32`, `34`, `36`, `40`, `44`, `48`, `56`, `64`, `96`. По умолчанию `20` | | `color` | нет | CSS-цвет иконки: `#2688EB`, `red`, `var(--accent)`. По умолчанию — наследуется от текста | | **Пример** | | `` | ### Доступные иконки Все уже скачанные иконки — в каталоге ниже. Если нужной нет, найдите её на [vkcom.github.io/icons](https://vkcom.github.io/icons/) и просто вставьте шорткод с её именем — при следующей сборке (`npm run dev` или `npm run build`) SVG скачается автоматически. ### Как вставить иконку: 1. Найдите нужную иконку в каталоге выше (или на [vkcom.github.io/icons](https://vkcom.github.io/icons/)) и скопируйте её имя. 2. Вставьте шорткод `` в нужную страницу. Если сборка упала с ошибкой «icon not found» — проверьте имя по ссылке из ошибки и запустите `npm run icons:sync`. Не забудьте закоммитить скачанный SVG-файл из `assets/icons/vk/`. --- ## Стандартный Markdown (без шорткодов) ### Блок кода ```python def hello(): print("Hello!") ``` ### Таблица | Код | Описание | | --- | ------------------- | | 200 | Успешный запрос | | 400 | Некорректный запрос | | 401 | Неавторизован |