Demo: TOC component in right aside
Эта страница использует кастомный лейаут `TocLayout.archlet` с компонентом `` в правом сайдбаре.
Быстрый старт
`` автоматически получает `page.toc` от плагина и рендерит его в том месте, где размещён в лейауте.
Настройка
Всё, что нужно — добавить `` в лейаут и включить `toc: true` во фронтматер страницы.
Как это работает
- Плагин `createTocPlugin` извлекает заголовки из HTML и наполняет `page.toc: TocItem[]`
- Component transform при встрече `` автоматически передаёт `page.toc` как `props.items`
- `renderToc()` рендерит навигацию
Отличие от плагина
Плагин вставляет TOC в начало `
Возможности
- `collapsible: true/false` — схлопывание через фронтматер `toc_collapsible`
- Кастомный `depth` через конфиг плагина
- Scroll spy для подсветки активного раздела
- Полная кастомизация через CSS
Примеры использования
В правом aside (эта страница)
```html
\`\`\`В начале статьи
```html
<slot ! />
Заключение
Гибкое размещение TOC через компонент позволяет создавать любые макеты без изменения плагина.