Astro Rocket поставляется с настроенными по умолчанию параметрами, которые кажутся разумными. В этом посте описаны все важные параметры, которые вы можете изменить - что они делают, где их найти и какое значение установить.
Основной файл конфигурации
Почти все находится в src/config/site.config.ts. Откройте его, и вы увидите полный объект siteConfig. Поля, которые вы, скорее всего, будете изменять:
name: 'Your Site Name', // Logo, titles, footer copyright
description: 'Short description', // Default meta description
url: 'https://yoursite.com', // Canonical URLs and sitemap
author: 'Саша',
email: 'op@ey.op',Поле name не является исключительно декоративным - оно используется для структурированных данных, тегов Open Graph, а также для автоматически генерируемых значков favicon и логотипа. Установите его точно с самого начала.
Полный справочник по конфигурации сайта
Все поля, доступные в src/config/site.config.ts:
| Поле | Тип | Обязательность | Как рботает |
|---|---|---|---|
name | string | ✓ | Название сайта - отображается в логотипе, заголовках страниц, информации об авторских правах и структурированных данных. |
description | string | ✓ | Мета-описание по умолчанию используется на страницах, не имеющих собственного мета-описания. |
url | string | ✓ | Канонический базовый URL - используется в карте сайта, тегах OG и JSON-LD. |
ogImage | string | ✓ | Путь к резервному образу OG по умолчанию |
author | string | ✓ | Имя автора для записей в блоге и схема Person |
email | string | ✓ | Контактный адрес электронной почты - используется в структурированных данных и contact форм |
phone | string | - | Номер телефона для структурированных данных (схема локального бизнеса) |
address | object | - | Физический адрес для структурированных данных - улица, город, штат, почтовый индекс, `страна“ |
authorImage | string | - | Путь к аватару автора (например, '/avatar.jpg') - используется в схеме Person. |
socialLinks | string[] | - | URL-адреса профилей в социальных сетях - значки определяются автоматически. |
twitter.site | string | - | Twitter site handle - populates twitter:site meta tag |
twitter.creator | string | - | Twitter creator handle - populates twitter:creator meta tag |
verification.google | string | - | Google Search Console verification code |
verification.bing | string | - | Bing Webmaster verification code |
blogImageOverlay | boolean | - | Оттенок фирменного цвета для обложек блога (по умолчанию: true) |
branding.logo.alt | string | ✓ | Доступный альтернативный текст для логотипа |
branding.logo.imageUrl | string | - | Путь к логотипу в формате PNG - используется в схеме организации для получения расширенных результатов. |
branding.favicon.svg | string | ✓ | Путь к SVG-изображению значка сайта (favicon) в public/ |
branding.colors.themeColor | hex | ✓ | Цвет панели инструментов браузера в мобильных Chrome/Fafari |
branding.colors.backgroundColor | hex | ✓ | Цвет фона заставки PWA |
TПоля phone и address являются необязательными, но улучшают структурированность данных о местных компаниях - это актуально, если вы создаете сайт для бизнеса с физическим местоположением. Оставьте их пустыми или удалите для личного сайта.
Логические переключатели
Наложение изображений в блог
// src/config/site.config.ts
blogImageOverlay: true,Когда true, к изображениям обложки блога применяется полупрозрачный оттенок фирменного цвета. Это помогает изображениям гармонично сочетаться с вашей темой, если у них нейтральные или несовпадающие цвета. Установите значение false, если ваши изображения уже соответствуют фирменному стилю или если вы предпочитаете, чтобы фотографии отображались без изменений.
Режим цвета по умолчанию
Astro Rocket использует 3-ступенчатую систему цветовых режимов - Системный / Светлый / Темный - вместо бинарного переключателя. Значения по умолчанию объявлены в элементе <html> в src/layouts/BaseLayout.astro:
<html lang="en" class="scroll-smooth dark" data-theme="blue" data-theme-mode="system">Три параметра состояния взаимодействуют:
-
class="dark"- это резервный вариант SSR для посетителей с отключенным JavaScript - темный вариант Tailwind использует его. -
data-theme-mode="system"отражает сохраненный пользователем выбор и управляет иконкой, отображаемой в верхней части страницы. -
data-theme="blue"- это цветовая палитра по умолчанию.
Для посетителей с включенным JavaScript встроенный скрипт Bootstrap в <head> запускается перед отрисовкой тела страницы и согласовывает все три значения из хранилища:`:
localStorage.theme∈'system' | 'light' | 'dark'- сохраненный пользователем цветовой режим (default'system')sessionStorage['color-theme']- активная цветовая палитра (default'blue', resets per tab session)
В разделе 'system' загрузчик также один раз подписывается на window.matchMedia('(prefers-color-scheme: dark)') и повторно применяется при каждой смене операционной системы. Полный дизайн - включая загрузчик без Flash, обработку переходов между представлениями и заголовочный элемент - описан в Система, свет, тьма - как работает система цветовых режимов Astro Rocket.
Чтобы изменить цветовой режим по умолчанию в SSR, отредактируйте атрибут seed. Установите data-theme-mode="light" (и удалите class="dark"), чтобы новые посетители по умолчанию использовали светлый режим; установите data-theme-mode="dark", чтобы по умолчанию использовалась темная тема. Сохраненные пользователем настройки всегда имеют приоритет после запуска загрузчика.
Структурированные данные: переключение схем
На главной странице (src/pages/index.astro) в LandingLayout передаются три логических свойства, которые управляют тем, какие схемы JSON-LD внедряются в <head> страницы:
<LandingLayout
includePersonSchema={true}
includeOrgSchema={false}
includeProfessionalServiceSchema={true}
>| Prop | Пр умолчанию | Что добавит |
|---|---|---|
includePersonSchema | false | В разделе 'system' загрузчик также использует схему window.matchMedia(‘(prefers-color-Person - имя, должность, электронная почта, профили в социальных сетях, изображение автора) |
includeOrgSchema | false | `Схема организации - название, URL, логотип, контактный адрес электронной почты |
includeProfessionalServiceSchema | false | `Схема ProfessionalService добавляет адрес, часы работы и обслуживаемую территорию. |
Включите includePersonSchema для личного портфолио. Включите includeOrgSchema, если сайт представляет компанию. Включите includeProfessionalServiceSchema только если в файле site.config.ts указан физический адрес - поисковые системы будут отображать его в локальных результатах.
SEO: noindex и nofollow
Любой макет страницы принимает свойства noindex и nofollow, которые передаются тегу <meta name="robots">:
<PageLayout noindex={true} nofollow={false}>| Prop | По умолчанию | Что делает |
|---|---|---|
noindex | false | Tells search engines not to index the page |
nofollow | false | Указывает поисковым системам не индексировать страницу. |
Используйте noindex для страниц, которые вы не хотите видеть в результатах поиска (страницы благодарности, внутренние страницы предварительного просмотра, тестовые среды). Оставьте оба параметра в false для всего общедоступного контента.
Брендинг: фавикон и цвета браузера
Фавикон генерируется автоматически из первой буквы siteConfig.name и активного цвета --brand-500 - он обновляется в режиме реального времени при изменении темы. Файл изображения не требуется. Чтобы заменить его пользовательским SVG, перетащите свой файл в public/ и обновите путь:
// src/config/site.config.ts
branding: {
favicon: {
svg: '/my-logo.svg', // replaces the auto-generated monogram
},
colors: {
themeColor: '#6366f1', // browser toolbar colour on mobile (use your brand hex)
backgroundColor: '#ffffff', // PWA splash screen background
},
}themeColor Это цвет, отображаемый в адресной строке Chrome и строке состояния Safari на мобильных устройствах - установите его в соответствии с цветом вашего бренда для создания ощущения солидного нативного приложения.
Для структурированных данных (расширенные результаты поиска Google) вы также можете указать статическое изображение логотипа:
branding: {
logo: {
alt: 'My Company',
imageUrl: '/logo.png', // add a PNG to public/ and point here
},
}Цветовые темы
Astro Rocket поставляется с 12 цветовыми темами. Все 12 отображаются в виде цветовых образцов в заголовке с помощью компонента ThemeSelector. Щелчок по образцу мгновенно переключает активную тему - без редактирования файлов и перестройки. Логотип, градиенты изображений блога и все фирменные цвета на странице обновляются одновременно.
Изменение активной темы
Тема по умолчанию устанавливается с помощью data-theme для элемента <html> в src/layouts/BaseLayout.astro:
data-theme="indigo"Доступные значения - для всех 12 тем:
| Value | Hue | Подойдет |
|---|---|---|
orange | 38° | Яркий и теплый - оригинальный цвет Velocity/International Orange. |
amber | 75° | Редакционные материалы, предметы роскоши, продукты питания, креативные бренды, создающие теплую атмосферу. |
lime | 130° | Инструменты для разработчиков, динамичные сайты, посвященные продукту (эстетика Vercel/Linear). |
emerald | 160° | Универсальный специалист - работает в SaaS-сфере, с инвестиционными портфелями и с органическими брендами. |
teal | 190° | Инструменты для разработчиков, современное SaaS, надежные сервисы. |
cyan | 200° | Новые, яркие технологии - энергичнее, чем бирюзовый цвет. |
sky | 222° | Чистое и просторное помещение - бирюзовый и синий цвета, идеально подходит для проведения торжественных мероприятий. |
blue | 255° | Студийная эстетика (стиль Linear/Raycast), авторитетный |
indigo | 264° | Корпоративный сегмент, инструменты повышения производительности, серьезный B2B - по умолчанию. |
violet | 277° | Креативный и премиальный - идеальный баланс между индиго и фиолетовым. |
purple | 303° | Выразительный, самобытный, яркий |
magenta | 330° | Креативные агентства, смелые личные бренды - максимальная яркость |
Селектор тем в реальном времени
Все 12 тем отображаются в виде цветовых палитр в выпадающем списке заголовка (на компьютере) и в мобильном меню, если для компонента <Header> включена опция showThemeSelector. Выбор посетителя сохраняется в sessionStorage и сохраняется на протяжении всей сессии вкладки - при открытии каждой новой вкладки возвращается настроенная по умолчанию цветовая палитра. Это сделано намеренно для сайтов-портфолио или маркетинговых сайтов: первое впечатление должно соответствовать бренду. (Цветовой режим - Системный / Светлый / Темный - хранится отдельно в localStorage и сохраняется при перезагрузке и открытии новых вкладок; см. статью о цветовом режиме для получения информации об этой части системы.)
Массив themes в src/components/layout/ThemeSelector.astro управляет тем, какие палитры отображаются и в каком порядке. Текущий набор:
const themes = [
{ id: 'orange', name: 'Orange', color: 'oklch(62.5% 0.22 38)' },
{ id: 'amber', name: 'Amber', color: 'oklch(68% 0.19 75)' },
{ id: 'lime', name: 'Lime', color: 'oklch(64% 0.27 130)' },
{ id: 'emerald', name: 'Emerald', color: 'oklch(62.5% 0.22 160)' },
{ id: 'teal', name: 'Teal', color: 'oklch(62.5% 0.22 190)' },
{ id: 'cyan', name: 'Cyan', color: 'oklch(65% 0.22 200)' },
{ id: 'sky', name: 'Sky', color: 'oklch(67% 0.21 222)' },
{ id: 'blue', name: 'Blue', color: 'oklch(62.5% 0.22 255)' },
{ id: 'indigo', name: 'Indigo', color: 'oklch(60% 0.24 264)' },
{ id: 'violet', name: 'Violet', color: 'oklch(62.5% 0.26 277)' },
{ id: 'purple', name: 'Purple', color: 'oklch(62.5% 0.25 303)' },
{ id: 'magenta', name: 'Magenta', color: 'oklch(58% 0.28 330)' },
];После того, как вы определились с фирменным цветом, вы можете полностью удалить селектор из заголовка. Откройте файл src/layouts/LandingLayout.astro и удалите свойство showThemeSelector - образцы исчезнут, не нарушая работу остальных элементов.
Понимание OKLCH - три числа
Все значения цветов в Astro Rocket используют цветовое пространство OKLCH: oklch(lightness% chroma hue).
| Параметр | Диапазон | Что означает |
|---|---|---|
| Lightness | 0% (black) → 100% (white) | Насколько светлый или темный этот цвет |
| Chroma | 0 (grey) → ~0.37 (maximum vivid) | Насколько насыщен цвет |
| Hue | 0–360° | Угол цветового тона на цветовом круге |
Основные цветовые ориентиры: 0°/360° = красный, 38° = оранжевый, 75° = янтарный, 130° = салатовый, 155–160° = зеленый, 190–200° = бирюзовый/голубой, 222° = небесно-голубой, 255° = синий, 264° = индиго, 277° = фиолетовый, 303° = пурпурный, 330° = пурпурный.
Чтобы изменить цветовую гамму на совершенно другой цвет, достаточно изменить числовой оттенок по шкале от --brand-50 до --brand-900 - значения яркости и насыщенности должны оставаться неизменными, и вся палитра будет меняться синхронно. Используйте oklch.com для визуального выбора.
Настройка фирменного цвета темы
Каждая тема представляет собой CSS-файл в src/styles/themes/. Каждый файл определяет полный набор цветовых токенов как для светлого, так и для темного режима. Откройте соответствующий файл и отрегулируйте масштаб --brand-* - все десять шагов от 50 до 900:
html[data-theme="indigo"] {
--brand-50: oklch(97.5% 0.02 264);
--brand-100: oklch(94.5% 0.05 264);
--brand-200: oklch(86% 0.11 264);
--brand-300: oklch(75% 0.18 264);
--brand-400: oklch(67% 0.22 264);
--brand-500: oklch(60% 0.24 264); /* primary accent in light mode */
--brand-600: oklch(52% 0.22 264);
--brand-700: oklch(44% 0.18 264);
--brand-800: oklch(36% 0.14 264);
--brand-900: oklch(26% 0.09 264);
}Чтобы изменить цвет, замените 264 (индиго) на желаемый оттенок во всех десяти строках. Это всё, что нужно изменить.
Вы также можете отредактировать общую цветовую шкалу в src/styles/tokens/primitives.css, если хотите использовать единую согласованную палитру, не зависящую от темы:
:root {
--brand-500: oklch(62.5% 0.22 255); /* primary brand color */
/* full --brand-50 to --brand-900 scale */
}Светлый режим против темного режима: какой шаг изменения бренда используется
В файлах темы используются разные шаги изменения бренда для светлого и темного режимов:
| Context | Использована фирменная последовательность действий | Почему |
|---|---|---|
Акцент светлого режима (--accent) | --brand-500 | Достаточно яркий на белом фоне |
Акцент темного режима (--accent) | --brand-400 | На один тон светлее - необходимо на темном фоне для создания контраста. |
| В режиме светлого освещения введите фокусировку / кольцо | --brand-500 | |
| Ввод в темный режим / кольцо фокусировки | --brand-400 |
При настройке фирменного цвета отрегулируйте оба шага в блоке каждого режима. Если вы измените только --brand-500, акценты в темном режиме по-прежнему будут использовать старое значение --brand-400.
Типографические токены
Каждый файл темы определяет набор шрифтов и типографический ритм для всего сайта. Вы можете переопределить любой из них для каждой темы:
html[data-theme="sky"] {
/* Font families */
--theme-font-sans: 'Manrope Variable', ui-sans-serif, system-ui, sans-serif;
--theme-font-display: 'Outfit Variable', var(--theme-font-sans);
--theme-font-mono: 'JetBrains Mono Variable', ui-monospace, monospace;
/* Типографический ритм */
--theme-heading-weight: 700; /* заголовки толщина шрифта*/
--theme-heading-tracking: -0.02em; /* межбуквенный интервал в заголовках */
--theme-body-leading: 1.6; /* межстрочный интервал для основного текста */
}В настоящее время все 12 тем используют один и тот же набор шрифтов. Чтобы использовать пользовательский шрифт, установите его в public/fonts/, добавьте объявление @font-face в src/styles/global.css и обновите --theme-font-sans или --theme-font-display в файле активной темы.
Токены радиуса границ
Глобальная скругленность пользовательского интерфейса устанавливается для каждой темы с пятью уровнями радиуса:
--theme-radius-sm: 0.25rem; /* 4px - badges, small buttons */
--theme-radius-md: 0.375rem; /* 6px - inputs, cards */
--theme-radius-lg: 0.5rem; /* 8px - panels, larger cards */
--theme-radius-xl: 0.625rem; /* 10px - large containers */
--theme-radius-full: 9999px; /* pill shapes, circular avatars */Чтобы придать вашему сайту более четкий, редакционный вид, установите все значения на 0. Для более округлого и дружелюбного вида увеличьте их (например, --theme-radius-md: 0.75rem). Все компоненты ссылаются на эти токены, поэтому одно изменение распространяется на весь дизайн.
Токены теней
Каждая тема определяет четыре уровня высоты теней, окрашенных в цвет темы:
--theme-shadow-sm /* subtle depth: cards, list items */
--theme-shadow-md /* dropdowns, popovers */
--theme-shadow-lg /* modals, drawers */
--theme-shadow-xl /* high-emphasis overlays */В темном режиме тени имеют более высокую непрозрачность (35–55%) и окрашены в фирменный оттенок, поэтому глубина воспринимается естественно на темном фоне. Чтобы сделать тени более интенсивными или нейтральными, отрегулируйте значения непрозрачности или замените окрашенный в фирменный оттенок цвет OKLCH на обычный rgba(0,0,0,...).
Инвертированные разделы
Семейство токенов --surface-invert управляет разделами, имеющими темный фон в светлом режиме - блоками CTA, некоторыми вариантами заголовков и любой областью, где вы используете background="invert" в нижнем колонтитуле или компоненте раздела:
--surface-invert: /* main dark surface background */
--surface-invert-secondary: /* slightly lighter surface */
--surface-invert-tertiary: /* even lighter layer */
--on-invert: /* primary text on dark surface */
--on-invert-secondary: /* secondary text on dark surface */
--on-invert-muted: /* muted text on dark surface */
--border-invert: /* border on dark surface */
--border-invert-strong: /* stronger border on dark surface */В светлом режиме эти значения по умолчанию близки к чёрному (примерно 10–18% яркости) с едва заметным оттенком. В тёмном режиме они становятся немного светлее основного фона, обеспечивая контраст между разделами без резкого скачка, характерного для полностью инвертированной поверхности.
Создание новой темы
-
Скопируйте любой файл из
src/styles/themes/в качестве отправной точки. -
Реализуйте все ~35 семантических токенов для
:root(светлый режим) и.dark(темный режим). -
Добавьте импорт вашего нового файла темы в
src/styles/tokens/colors.css. -
Добавьте запись в массив
themesвThemeSelector.astro, если хотите использовать её в интерактивном селекторе.
Заголовок: плавающая капсула против фиксированной планки
У Astro Rocket есть две формы заголовка. В посадочном и маркетинговом вариантах используется плавающая капсула:
<Header shape="floating" variant="transparent" colorScheme="invert" position="fixed" />В макетах блога и стандартных страниц используется панель во всю ширину страницы:
<Header position="fixed" size="lg" />Переключение заголовка блога на плавающий стиль
Откройте файл src/layouts/BlogLayout.astro и найдите строку <Header>. Измените её на:
<Header shape="floating" variant="transparent" position="fixed" />Переключение заголовка страницы с плавающего на полосовой
Найдите компонент Header в соответствующем файле макета и удалите shape="floating":
<!-- Before -->
<Header shape="floating" variant="transparent" position="fixed" />
<!-- After -->
<Header position="fixed" size="lg" />Справочник по свойствам заголовка
Все свойства заголовка и их назначение:
| Prop | Options | Default | What it controls |
|---|---|---|---|
position | fixed sticky static | fixed | Whether the header stays at the top while scrolling |
shape | bar floating | bar | Full-width bar or centred floating capsule |
size | sm md lg | lg | Header height |
variant | default solid transparent | solid | Background fill |
colorScheme | default invert | default | Use inverted colours - for dark hero backgrounds |
layout | default centered minimal | default | Logo and nav arrangement |
showThemeToggle | true false | true | Colour-mode pill (System / Light / Dark dropdown) - desktop pill + mobile-menu row |
showThemeSelector | true false | false | Colour theme swatch picker (desktop dropdown + mobile menu) |
showSocialLinks | true false | false | Social icon links (desktop only, reads from siteConfig.socialLinks) |
showCta | true false | false | CTA button in the header |
showMobileMenu | true false | true | Hamburger menu on small screens |
showActiveState | true false | true | Highlight for the current page link |
hideLogo | true false | false | Hide the logo entirely |
showScrollProgress | true false | false | Thin brand-coloured scroll progress bar on the header edge |
scrollProgressPosition | top bottom | bottom | Edge of the header where the progress bar sits - top suits the floating capsule header, bottom suits the solid bar header |
Установите любое свойство компонента <Header> в файле макета для типа страницы, который вы хотите изменить.
Нижний колонтитул
Изменение текста об авторских правах
Строка об авторских правах в нижнем колонтитуле считывается из свойства copyright. Передача пользовательского значения переопределяет его:
<Footer copyright="© {year} Your Name. All rights reserved." />Заполнители {year} и {siteName} заменяются автоматически во время сборки. Без свойства copyright используется имя сайта из файла site.config.ts.
Нижний колонтитул используется в трёх файлах макета:
| Layout file | Pages it covers |
|---|---|
src/layouts/PageLayout.astro | Blog index, about, contact, any standard page |
src/layouts/BlogLayout.astro | Individual blog posts |
src/layouts/LandingLayout.astro | The landing page |
Отредактируйте строку <Footer> в файле, содержащем страницы, которые вы хотите изменить.
Параметры макета нижнего колонтитула
<Footer layout="simple" /> <!-- Single row: logo, nav, social, copyright -->
<Footer layout="stacked" /> <!-- Vertically stacked sections -->
<Footer layout="columns" /> <!-- Multi-column link groups -->
<Footer layout="minimal" /> <!-- Copyright line only -->Справочник по свойствам нижнего колонтитула
| Prop | Type | Default | What it controls |
|---|---|---|---|
layout | simple stacked columns minimal | simple | Overall footer structure |
background | default secondary invert | default | Footer background colour |
columns | 2 3 4 | 3 | Number of link columns (only applies with layout="columns") |
showSocial | boolean | true | Social media icons |
showCopyright | boolean | true | Copyright line |
hideLogo | boolean | false | Hide the footer logo |
tagline | string | - | Short tagline shown under the logo |
copyright | string | - | Custom copyright text - supports {year} and {siteName} placeholders |
Юридические ссылки
Свойства legalLinks добавляют ряд небольших ссылок (Политика конфиденциальности, Условия использования и т. д.) рядом со строкой об авторских правах:
<Footer
legalLinks={[
{ label: 'Privacy Policy', href: '/privacy' },
{ label: 'Terms of Service', href: '/terms' },
]}
/>Макет «Столбцы» с группами ссылок
Макет columns отображает сгруппированные разделы ссылок - это полезно для сайта с большим количеством страниц:
<Footer
layout="columns"
columns={3}
linkGroups={[
{
title: 'Product',
links: [
{ label: 'Features', href: '/features' },
{ label: 'Pricing', href: '/pricing' },
],
},
{
title: 'Company',
links: [
{ label: 'About', href: '/about' },
{ label: 'Contact', href: '/contact' },
],
},
]}
/>Навигация
Отредактируйте файл src/config/nav.config.ts, чтобы изменить навигацию в заголовке и нижнем колонтитуле в одном месте:
export const navItems: NavItem[] = [
{ label: 'Blog', href: '/blog', order: 1 },
{ label: 'Projects', href: '/projects', order: 2 },
{ label: 'About', href: '/about', order: 3 },
{ label: 'Contact', href: '/contact', order: 4 },
];Добавляйте, удаляйте или меняйте порядок элементов свободно. Заголовок и нижний колонтитул считывают данные из этого массива.
Аналитика и проверка
Настройте эти параметры в вашем .env file (copy from .env.example):
# Analytics
PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX # Google Analytics 4
PUBLIC_GTM_ID=GTM-XXXXXXX # Google Tag Manager
# Cookie consent
PUBLIC_CONSENT_ENABLED=true # Show cookie consent banner
PUBLIC_PRIVACY_POLICY_URL=/privacy # Link in the consent banner
# Search console verification
GOOGLE_SITE_VERIFICATION=your-code
BING_SITE_VERIFICATION=your-codeНи один из этих компонентов не требуется на этапе разработки. Компоненты аналитики просто ничего не отображают, если идентификаторы отсутствуют.
Социальные ссылки
Социальные ссылки в нижнем колонтитуле берутся из массива socialLinks в файле src/config/site.config.ts:
socialLinks: [
'https://github.com/yourname',
'https://x.com/yourhandle',
'https://instagram.com/yourname',
],Удалите все неиспользуемые URL-адреса. В нижнем колонтитуле не будет отображаться пустой раздел социальных сетей. Иконки автоматически определяются из URL-адреса - GitHub, X, Instagram, LinkedIn и Bluesky распознаются без проблем.
Краткий справочник
| What | Where | Key |
|---|---|---|
| Site name, author, email | src/config/site.config.ts | name, author, email |
| Phone, address | src/config/site.config.ts | phone, address |
| Author avatar (Person schema) | src/config/site.config.ts | authorImage |
| Browser toolbar colour | src/config/site.config.ts | branding.colors.themeColor |
| Blog image colour overlay | src/config/site.config.ts | blogImageOverlay: true/false |
| Social links | src/config/site.config.ts | socialLinks array |
| Twitter card handles | src/config/site.config.ts | twitter.site, twitter.creator |
| Search console verification | .env or site.config.ts | verification.google/bing |
| Navigation items | src/config/nav.config.ts | navItems array |
| Default colour theme | src/layouts/BaseLayout.astro | data-theme="indigo" |
| Default dark/light mode | src/layouts/BaseLayout.astro | class="dark" on <html> |
| JSON-LD schema switches | src/pages/index.astro | includePersonSchema, includeOrgSchema |
| noindex / nofollow | any layout | noindex={true}, nofollow={true} |
| Live theme selector (12 swatches) | src/components/layout/ThemeSelector.astro | themes array |
| All 12 theme files | src/styles/themes/ | One CSS file per theme (13 files exist - green.css is available but not in the picker) |
| Brand colour scale (light & dark) | src/styles/themes/*.css | --brand-50 → --brand-900 |
| Typography (fonts, weight, tracking) | src/styles/themes/*.css | --theme-font-*, --theme-heading-* |
| Border radius (global roundness) | src/styles/themes/*.css | --theme-radius-sm/md/lg/xl/full |
| Shadow elevation levels | src/styles/themes/*.css | --theme-shadow-sm/md/lg/xl |
| Inverted section colours | src/styles/themes/*.css | --surface-invert, --on-invert |
| Header shape, position | src/layouts/*.astro | shape, position props |
| Header show/hide toggles | src/layouts/*.astro | showThemeToggle, showCta, showSocialLinks, etc. |
| Footer copyright text | src/layouts/*.astro | copyright prop |
| Footer layout & columns | src/layouts/*.astro | layout, columns props |
| Footer legal links | src/layouts/*.astro | legalLinks array |
| Analytics IDs | .env | PUBLIC_GA_MEASUREMENT_ID etc. |
Если вам нравится Astro Rocket, поставьте звездочку на GitHub, это поможет другим разработчикам найти его. Займет всего две секунды.