Содержание — якоря для навигации по длинным статьям

Длинные статьи выигрывают от наличия содержания. Оно сообщает читателям, что их ждёт, позволяет перейти прямо к нужному разделу и служит тихим индикатором прогресса.

Fastry поставляется со встроенным компонентом содержания для постов блога с тремя вариантами макета.

Три варианта макета

Макет	Мобильные / планшеты (< xl)	Десктоп (xl+, ≥1280 px)
'inline'	Карточка вверху статьи	Карточка вверху статьи
'sidebar'	Содержание скрыто	Липкая боковая панель
'auto'	Карточка вверху статьи	Липкая боковая панель

Слева или справа?

Когда боковая панель активна ('sidebar' или 'auto'), вы можете выбрать, с какой стороны она находится, с помощью настройки sidebarPosition: 'left' или 'right'.

Как включить

Откройте src/config/site.config.ts и найдите блок articleFeatures.toc:

articleFeatures: {
  toc: {
    enabled: true,             // включить TOC на всём сайте
    layout: 'auto',            // 'inline' | 'sidebar' | 'auto'
    sidebarPosition: 'left',   // 'left' | 'right'
    minHeadings: 3,            // скрыть TOC на постах с менее чем 3 заголовками
    maxDepth: 3,               // включать H2 + H3
  },
},

Как отключить

Установите enabled в false:

articleFeatures: {
  toc: {
    enabled: false,            // ← TOC полностью выключен
  },
},

Скрыть на отдельном посте

Иногда пост слишком короткий для содержания. Переопределите на уровне поста с помощью frontmatter:

---
title: Мой короткий пост
toc: false
---

Как это работает под капотом

Содержание генерируется из заголовков, которые Astro извлекает из вашего MDX-файла. Не требуется ни плагинов, ни библиотек — он использует массив headings, который Astro уже возвращает из render(post).

Для auto и карточка, и боковая панель рендерятся на каждом посте, а CSS переключает, какая из них видна, с помощью xl:hidden и hidden xl:block.

Сколько это весит (почти ничего)

Сценарий	Вес
TOC отключён (enabled: false)	0 KB, 0 JS
TOC включён ('inline'), пост подходит	~1 KB HTML + ~1 KB JS
TOC включён ('sidebar' или 'auto')	Те же ~2 KB

Настройка внешнего вида

TOC использует стандартные токены темы — --color-foreground, --color-foreground-muted, --color-brand-500, --color-border. Переключите цветовую тему, и TOC адаптируется автоматически.

Где находится

• Компонент: src/components/blog/TableOfContents.astro
• Подключение: src/layouts/BlogLayout.astro
• Конфиг: src/config/site.config.ts → articleFeatures.toc
• Переопределение на пост: toc: false в MDX frontmatter