Skip to content
F Fastry
astro-rocket настройка кастомизация темы

Настройка Fastry — каждый переключатель, тема и опция макета

Полное руководство по параметрам конфигурации Fastry: 12 цветовых тем, цвета OKLCH, типографика, радиус и тени, стили шапки, тёмный режим и многое другое.

A

Almaz

2 мин. чтения

Fastry поставляется с разумными настройками по умолчанию. В этом посте документирована каждая значимая опция, которую вы можете изменить — что она делает, где её найти и какое значение установить.

Основной конфигурационный файл

Почти всё находится в src/config/site.config.ts. Откройте его, и вы увидите полный объект siteConfig. Поля, которые вы, скорее всего, измените:

name: 'Название вашего сайта',          // Логотип, заголовки, копирайт
url: 'https://yoursite.com',           // Канонические URL и карта сайта
author: 'Ваше Имя',
email: 'hello@yoursite.com',

Поле name не только косметическое — оно используется в структурированных данных, Open Graph-тегах и автогенерируемом фавиконе. Установите его точно с самого начала.

Цветовые темы

Fastry поставляется с 12 цветовыми темами. Все 12 отображаются в виде цветных квадратиков в шапке через компонент ThemeSelector. Нажатие на квадратик мгновенно меняет активную тему — никаких правок файлов, никакой пересборки.

Изменение активной темы

Тема по умолчанию устанавливается с помощью data-theme на элементе <html> в src/layouts/BaseLayout.astro:

data-theme="indigo"

Доступные значения — все 12 тем: orange, amber, lime, emerald, teal, cyan, sky, blue, indigo, violet, purple, magenta.

Понимание OKLCH — три числа

Все цветовые значения в Fastry используют цветовое пространство OKLCH: oklch(светлота% хрома оттенок).

Настройка брендового цвета темы

Каждая тема — это CSS-файл в src/styles/themes/. Откройте соответствующий файл и настройте шкалу --brand-* — все десять шагов от 50 до 900:

html[data-theme="indigo"] {
  --brand-50:  oklch(97.5% 0.02 264);
  --brand-500: oklch(60%   0.24 264); /* основной акцент в светлой теме */
  --brand-900: oklch(26%   0.09 264);
}

Чтобы перейти к другому цвету, замените 264 (индиго) на нужный оттенок во всех десяти строках.

Шапка: плавающая капсула vs. фиксированная панель

Fastry имеет два варианта шапки. Макеты Landing и Marketing используют плавающую капсулу, а макеты блога и стандартных страниц — панель на всю ширину.

Подвал

Строка копирайта в подвале читается из пропса copyright. Передача пользовательского значения переопределяет его:

<Footer copyright="© {year} Ваше Имя. Все права защищены." />

Плейсхолдеры {year} и {siteName} заменяются автоматически во время сборки.

Навигация

Отредактируйте src/config/nav.config.ts, чтобы изменить навигацию в шапке и подвале в одном месте. Добавляйте, удаляйте или меняйте порядок пунктов свободно.

Быстрая справка

ЧтоГдеКлюч
Имя сайтаsrc/config/site.config.tsname
Цвет панели браузераsrc/config/site.config.tsbranding.colors.themeColor
Цветовая тема по умолчаниюsrc/layouts/BaseLayout.astrodata-theme="indigo"
Элементы навигацииsrc/config/nav.config.tsnavItems
Все 12 файлов темsrc/styles/themes/Один CSS-файл на тему
Цветовая шкала брендаsrc/styles/themes/*.css--brand-50--brand-900
Форма шапкиsrc/layouts/*.astroпропс shape
Текст копирайта подвалаsrc/layouts/*.astroпропс copyright
ID аналитики.envPUBLIC_GA_MEASUREMENT_ID

Если Fastry сэкономил вам время, звезда на GitHub поможет другим разработчикам найти этот проект.

Поделиться:

Похожие записи

Начало работы с Fastry — от установки до публикации за минуты

Как установить, настроить и развернуть Fastry — настройка site.config.ts, брендовые цвета, навигация, написание постов и деплой на Vercel.

A Almaz
1 мин. чтения
astro-rocket начало-работы настройка vercel

Как работает дизайн-система Fastry — токены, цвета и тёмный режим

Fastry использует трёхуровневую архитектуру токенов с цветами OKLCH. Измените одно значение, и весь сайт обновится. Вот как это работает и как настроить под себя.

A Almaz
2 мин. чтения
astro-rocket дизайн-система tailwind кастомизация руководство

Эффект печатающегося текста в Fastry — как это работает и как настроить

Заголовок Hero в Fastry циклически перебирает слова с анимацией печати. Узнайте, как это работает, как настроить скорость и паузы и как полностью отключить эффект.

A Almaz
2 мин. чтения
astro-rocket компоненты кастомизация руководство javascript

Подписывайтесь

Будьте в курсе — новые статьи, мысли и обновления.