Перейти к содержимому
Starlight

Переопределения

Вы можете переопределить встроенные компоненты Starlight, указав пути к заменяющим компонентам в опции конфигурации Starlight components. На этой странице перечислены все компоненты, доступные для переопределения, и даны ссылки на их реализации по умолчанию на GitHub.

Подробнее см. в Руководстве по переопределению компонентов.

Компоненты

Элемент head страницы

Эти компоненты отображаются внутри элемента <head> каждой страницы. Они должны включать только элементы, разрешённые внутри <head>.

Стандартный компонент: Head.astro

Компонент, отображаемый внутри <head> каждой страницы. Включает важные теги, в том числе <title> и <meta charset="utf-8">.

В крайнем случае переопределите этот компонент. По возможности предпочитайте опцию head в конфигурации Starlight.

ThemeProvider

Стандартный компонент: ThemeProvider.astro

Компонент, отображаемый внутри <head>, который устанавливает поддержку тёмной/светлой темы. Реализация по умолчанию включает в себя встроенный скрипт и <template>, используемый скриптом в <ThemeSelect />.

Доступность

Стандартный компонент: SkipLink.astro

Компонент, отображаемый как первый элемент внутри <body>, который ссылается на основное содержимое страницы для обеспечения доступности. Реализация по умолчанию скрыта до тех пор, пока пользователь не наведет на нее курсор с помощью табуляции на клавиатуре.

Макет

Эти компоненты отвечают за компоновку компонентов Starlight и управление представлениями в различных точках останова. Их переопределение сопряжено со значительными сложностями. По возможности предпочитайте переопределять компоненты более низкого уровня.

PageFrame

Стандартный компонент: PageFrame.astro Именованные слоты: header, sidebar

Компонент макета оборачивается вокруг большей части содержимого страницы. Реализация по умолчанию устанавливает макет header-sidebar-main и включает в себя именованные слоты header и sidebar, а также слот по умолчанию для основного содержимого. Он также отображает <MobileMenuToggle /> для поддержки переключения навигации в боковой панели на маленьких (мобильных) экранах просмотра.

MobileMenuToggle

Стандартный компонент: MobileMenuToggle.astro

Компонент, отображаемый внутри <PageFrame>, который отвечает за переключение навигации боковой панели на маленьких (мобильных) экранах просмотра.

TwoColumnContent

Стандартный компонент: TwoColumnContent.astro Именованный слот: right-sidebar

Компонент макета оборачивается вокруг колонки с основным содержанием и правой боковой панели (оглавление). Реализация по умолчанию управляет переключением между одноколоночным макетом с малой областью просмотра и двухколоночным макетом с большей областью просмотра.

Верхняя панель навигации

Эти компоненты отображают верхнюю навигационную панель Starlight.

Стандартный компонент: Header.astro

Компонент заголовка отображается в верхней части каждой страницы. По умолчанию отображаются <SiteTitle />, <Search />, <SocialIcons />, <ThemeSelect />, и <LanguageSelect />.

SiteTitle

Стандартный компонент: SiteTitle.astro

Компонент, отображаемый в начале заголовка сайта для отображения заголовка сайта. Реализация по умолчанию включает логику для отрисовки логотипов, определённую в конфигурации Starlight.

Стандартный компонент: Search.astro

Компонент, используемый для отображения пользовательского интерфейса поиска Starlight. Реализация по умолчанию включает кнопку в заголовке и код для отображения модального окна поиска при нажатии на нее и загрузки интерфейса Pagefind.

Когда pagefind отключен, компонент поиска по умолчанию не будет отображаться. Однако если вы переопределите Search, ваш пользовательский компонент будет отображаться всегда, даже если параметр конфигурации pagefind будет равен false. Это позволяет добавить пользовательский интерфейс для альтернативных поставщиков поиска при отключении Pagefind.

SocialIcons

Стандартный компонент: SocialIcons.astro

Компонент, отображаемый в шапке сайта, включая ссылки на социальные иконки. Реализация по умолчанию использует опцию social в конфигурации Starlight для отображения иконок и ссылок.

ThemeSelect

Стандартный компонент: ThemeSelect.astro

Компонент, отображаемый в шапке сайта, который позволяет пользователям выбрать желаемую цветовую схему.

LanguageSelect

Стандартный компонент: LanguageSelect.astro

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

Глобальная боковая панель

В глобальной боковой панели Starlight находится основная навигация сайта. На узких экранах она скрывается за выпадающим меню.

Стандартный компонент: Sidebar.astro

Компонент, отображаемый перед содержимым страницы, содержащим глобальную навигацию. Реализация по умолчанию отображается в виде боковой панели на достаточно широких экранах и в виде выпадающего меню на маленьких (мобильных) экранах. Он также отображает <MobileMenuFooter />, чтобы показать дополнительные пункты внутри мобильного меню.

MobileMenuFooter

Стандартный компонент: MobileMenuFooter.astro

Компонент, отображаемый в нижней части мобильного выпадающего меню. Реализация по умолчанию отображает <ThemeSelect /> и <LanguageSelect />.

Боковая панель страницы

Боковая панель страницы Starlight отвечает за отображение оглавления, в котором указаны подзаголовки текущей страницы. На узких экранах это сворачивается в липкое выпадающее меню.

PageSidebar

Стандартный компонент: PageSidebar.astro

Компонент, отображаемый перед содержимым главной страницы для вывода оглавления. Реализация по умолчанию отображает <TableOfContents /> и <MobileTableOfContents />.

TableOfContents

Стандартный компонент: TableOfContents.astro

Компонент, который отображает оглавление текущей страницы на широких экранах просмотра.

MobileTableOfContents

Стандартный компонент: MobileTableOfContents.astro

Компонент, который отображает оглавление текущей страницы на маленьких (мобильных) экранах просмотра.

Контент

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

Стандартный компонент: Banner.astro

Баннерный компонент, отображаемый в верхней части каждой страницы. Реализация по умолчанию использует значение banner метаданных страницы для принятия решения о необходимости отрисовки.

ContentPanel

Стандартный компонент: ContentPanel.astro

Компонент макета, используемый для обёртывания секций колонки основного содержимого.

PageTitle

Стандартный компонент: PageTitle.astro

Компонент, содержащий элемент <h1> для текущей страницы.

Реализации должны обеспечить установку id="_top" для элемента <h1>, как в реализации по умолчанию.

DraftContentNotice

Стандартный компонент: DraftContentNotice.astro

Уведомление, отображаемое пользователям во время разработки, когда текущая страница помечена как черновик.

FallbackContentNotice

Стандартный компонент: FallbackContentNotice.astro

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

Hero

Стандартный компонент: Hero.astro

Компонент, отображаемый в верхней части страницы, когда в метаданных задан параметр hero. В стандартном варианте на экране отображается крупный заголовок, теглайн и ссылки, призывающие к действию, а также дополнительное изображение.

MarkdownContent

Стандартный компонент: MarkdownContent.astro

Компонент отображается вокруг основного содержимого каждой страницы. Реализация по умолчанию устанавливает базовые стили для применения к содержимому Markdown.

Стили контента Markdown также представлены в @astrojs/starlight/style/markdown.css и ограничены классом CSS .sl-markdown-content.

Подвал

Эти компоненты отображаются внизу основного столбца содержимого страницы.

Стандартный компонент: Footer.astro

Компонент нижнего колонтитула отображается внизу каждой страницы. Реализация по умолчанию отображает <LastUpdated />, <Pagination /> и <EditLink />.

LastUpdated

Стандартный компонент: LastUpdated.astro

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

Стандартный компонент: EditLink.astro

Компонент, отображаемый в нижнем колонтитуле страницы для отображения ссылки на страницу, где её можно редактировать.

Pagination

Стандартный компонент: Pagination.astro

Компонент отображается в нижнем колонтитуле страницы для отображения стрелок навигации между предыдущими и следующими страницами.