Aside с контекстом страницы

# Aside с контекстом страницы

Правая область объединяет автоматически построенное оглавление и
информационный Smart-компонент.

## Результат

[Открыть отдельно](/ru/demonstrator-results/region-aside/)

:::internal_preview {size=tall title="Aside с контекстом страницы"}
[Открыть результат](/ru/demonstrator-results/region-aside/)
:::

## Исходные файлы

:::code {src="./region-aside.md" lang=markdown title="Страница примера · content/ru/examples/region-aside.md"}
:::

:::code {src="../demonstrator-results/region-aside.md" lang=markdown title="Markdown страницы · content/ru/demonstrator-results/region-aside.md"}
:::

:::code {src="../demonstrator-results/region-aside.page.json" lang=json title="Композиция aside · content/ru/demonstrator-results/region-aside.page.json"}
:::

# Aside с контекстом страницы

Правая область получает заголовки из Markdown и дополняется уведомлением,
которое задаётся в JSON-композиции.

## Первый раздел

Заголовок становится ссылкой в автоматическом оглавлении.

## Второй раздел

Smart-компонент остаётся рядом с оглавлением и следует теме сайта.

{
  "schema": "docara.page.v1",
  "title": "Aside с контекстом страницы",
  "description": "Оглавление и информационный Smart-компонент в правой области.",
  "layout": {
    "regions": {
      "outline": {
        "enabled": true,
        "sections": [
          {"id": "page-outline", "section": "docara.outline"},
          {
            "id": "aside-context",
            "section": "docara.shell",
            "utilities": ["flex", "flex-col", "gap-1"],
            "blocks": [
              {
                "id": "note",
                "block": "shell.smart",
                "slot": "content",
                "smart": "ui.alert",
                "view": "default",
                "props": {"type": "info", "variant": "outlined", "title": "Контекст", "supporting-text": "Оглавление построено из Markdown.", "closable": false, "aria-label": "Контекст страницы"}
              }
            ]
          }
        ]
      }
    }
  }
}