Frontmatter

Frontmatter — это блок метаданных в начале файла, заключённый между тройными дефисами ---. Используется для определения заголовка, описания и других параметров страницы.

Формат

---
title: Заголовок страницы
name: Альтернативное имя
description: Краткое описание страницы
---

Содержимое страницы начинается здесь.

---
title: Заголовок страницы
name: Альтернативное имя
description: Краткое описание страницы
---

Содержимое страницы начинается здесь.

Доступные поля

Поле	Тип	Описание
`title`	`string`	Заголовок страницы. Отображается в заголовке документа и навигации. Переопределяет заголовок из имени файла.
`name`	`string`	Альтернативное имя компонента или страницы. Используется если `title` не указан.
`description`	`string`	Краткое описание. Используется для SEO-мета-тегов и превью в поиске.

Приоритет заголовка

Заголовок страницы определяется в следующем порядке:

title из frontmatter
name из frontmatter
Заголовок из имени файла по системе [N]/[C]/[A]

Связь с системой имён файлов

Имя файла определяет структуру навигации и slug страницы:

Префикс	Тип	Пример имени	Slug
`[N]`	Секция (раздел)	`[N]Документация{docs}`	`docs`
`[C]`	Категория	`[C]Настройки{settings}`	`settings`
`[A]`	Страница	`[A]Frontmatter{frontmatter}.svx`	`frontmatter`

Frontmatter позволяет переопределить отображаемый заголовок без изменения имени файла.

Примеры

Страница документации компонента

---
title: Кнопка
description: Базовый компонент кнопки с различными вариантами и размерами.
---

# Button

Компонент кнопки...

---
title: Кнопка
description: Базовый компонент кнопки с различными вариантами и размерами.
---

# Button

Компонент кнопки...

Страница с альтернативным именем

---
title: Переключатель
name: Toggle
description: Кнопка-переключатель с двумя состояниями.
---

# Toggle

Компонент переключателя...

---
title: Переключатель
name: Toggle
description: Кнопка-переключатель с двумя состояниями.
---

# Toggle

Компонент переключателя...

Парсинг

Frontmatter обрабатывается автоматически функцией parseContentSource из $lib/content/frontmatter.ts.

import { parseContentSource } from '$lib/content/frontmatter';

const source = `---
title: Моя страница
description: Описание страницы
---

Контент страницы`;

const { metadata, body } = parseContentSource(source);

// metadata.title = "Моя страница"
// metadata.description = "Описание страницы"
// body = "Контент страницы"

import { parseContentSource } from '$lib/content/frontmatter';

const source = `---
title: Моя страница
description: Описание страницы
---

Контент страницы`;

const { metadata, body } = parseContentSource(source);

// metadata.title = "Моя страница"
// metadata.description = "Описание страницы"
// body = "Контент страницы"

Типы

type ContentFrontmatter = {
	title?: string;
	name?: string;
	description?: string;
};

type ContentFrontmatter = {
	title?: string;
	name?: string;
	description?: string;
};

Примечания

Frontmatter должен быть отделён от основного содержимого пустой строкой
Поля с пустыми значениями можно опускать
Поддерживаются только строковые значения
Комментарии внутри frontmatter начинаются с #
Имя файла определяет slug и положение в навигации, frontmatter — только отображаемый заголовок