Переопределения
Вы можете переопределить встроенные компоненты Starlight, указав пути к заменяющим компонентам в опции конфигурации Starlight components.
На этой странице перечислены все компоненты, доступные для переопределения, и даны ссылки на их реализации по умолчанию на GitHub.
Подробнее см. в Руководстве по переопределению компонентов.
Компоненты
Заголовок раздела «Компоненты»Элемент head
Заголовок раздела «Элемент head»Эти компоненты отображаются внутри элемента <head> каждой страницы.
Они должны включать только элементы, разрешённые внутри <head>.
Стандартный компонент: Head.astro
Компонент, отображаемый внутри <head> каждой страницы.
Переопределяйте этот компонент только в крайнем случае.
По возможности используйте параметр head в конфигурации, поле head в метаданных или мидлвар для данных маршрута, чтобы настроить данные маршрута, отображаемые компонентом по умолчанию.
ThemeProvider
Заголовок раздела «ThemeProvider»Стандартный компонент: ThemeProvider.astro
Компонент, отображаемый внутри <head>, который устанавливает поддержку тёмной/светлой темы.
Реализация по умолчанию включает в себя встроенный скрипт и <template>, используемый скриптом в <ThemeSelect />.
Доступность
Заголовок раздела «Доступность»SkipLink
Заголовок раздела «SkipLink»Стандартный компонент: SkipLink.astro
Компонент, отображаемый как первый элемент внутри <body>, который ссылается на основное содержимое страницы для обеспечения доступности.
Реализация по умолчанию скрыта до тех пор, пока пользователь не наведет на нее курсор с помощью табуляции на клавиатуре.
Эти компоненты отвечают за компоновку компонентов Starlight и управление представлениями в различных точках останова. Их переопределение сопряжено со значительными сложностями. По возможности предпочитайте переопределять компоненты более низкого уровня.
PageFrame
Заголовок раздела «PageFrame»Стандартный компонент: PageFrame.astro
Именованные слоты: header, sidebar
Компонент макета оборачивается вокруг большей части содержимого страницы.
Реализация по умолчанию устанавливает макет header-sidebar-main и включает в себя именованные слоты header и sidebar, а также слот по умолчанию для основного содержимого.
Он также отображает <MobileMenuToggle /> для поддержки переключения навигации в боковой панели на маленьких (мобильных) экранах просмотра.
MobileMenuToggle
Заголовок раздела «MobileMenuToggle»Стандартный компонент: MobileMenuToggle.astro
Компонент, отображаемый внутри <PageFrame>, который отвечает за переключение навигации боковой панели на маленьких (мобильных) экранах просмотра.
TwoColumnContent
Заголовок раздела «TwoColumnContent»Стандартный компонент: TwoColumnContent.astro
Именованный слот: right-sidebar
Компонент макета оборачивается вокруг колонки с основным содержанием и правой боковой панели (оглавление). Реализация по умолчанию управляет переключением между одноколоночным макетом с малой областью просмотра и двухколоночным макетом с большей областью просмотра.
Эти компоненты отображают верхнюю навигационную панель Starlight.
Стандартный компонент: Header.astro
Компонент заголовка отображается в верхней части каждой страницы.
По умолчанию отображаются <SiteTitle />, <Search />, <SocialIcons />, <ThemeSelect />, и <LanguageSelect />.
SiteTitle
Заголовок раздела «SiteTitle»Стандартный компонент: SiteTitle.astro
Компонент, отображаемый в начале заголовка сайта для отображения заголовка сайта. Реализация по умолчанию включает логику для отрисовки логотипов, определённую в конфигурации Starlight.
Стандартный компонент: Search.astro
Компонент, используемый для отображения пользовательского интерфейса поиска Starlight. Реализация по умолчанию включает кнопку в заголовке и код для отображения модального окна поиска при нажатии на нее и загрузки интерфейса Pagefind.
Когда pagefind отключен, компонент поиска по умолчанию не будет отображаться.
Однако если вы переопределите Search, ваш пользовательский компонент будет отображаться всегда, даже если параметр конфигурации pagefind будет равен false.
Это позволяет добавить пользовательский интерфейс для альтернативных поставщиков поиска при отключении Pagefind.
SocialIcons
Заголовок раздела «SocialIcons»Стандартный компонент: SocialIcons.astro
Компонент, отображаемый в шапке сайта, включая ссылки на социальные иконки.
Реализация по умолчанию использует опцию social в конфигурации Starlight для отображения иконок и ссылок.
ThemeSelect
Заголовок раздела «ThemeSelect»Стандартный компонент: ThemeSelect.astro
Компонент, отображаемый в шапке сайта, который позволяет пользователям выбрать желаемую цветовую схему.
LanguageSelect
Заголовок раздела «LanguageSelect»Стандартный компонент: LanguageSelect.astro
Компонент, отображаемый в заголовке сайта, который позволяет пользователям переключиться на другой язык.
Глобальная боковая панель
Заголовок раздела «Глобальная боковая панель»В глобальной боковой панели Starlight находится основная навигация сайта. На узких экранах она скрывается за выпадающим меню.
Sidebar
Заголовок раздела «Sidebar»Стандартный компонент: Sidebar.astro
Компонент, отображаемый перед содержимым страницы, содержащим глобальную навигацию.
Реализация по умолчанию отображается в виде боковой панели на достаточно широких экранах и в виде выпадающего меню на маленьких (мобильных) экранах.
Он также отображает <MobileMenuFooter />, чтобы показать дополнительные пункты внутри мобильного меню.
MobileMenuFooter
Заголовок раздела «MobileMenuFooter»Стандартный компонент: MobileMenuFooter.astro
Компонент, отображаемый в нижней части мобильного выпадающего меню.
Реализация по умолчанию отображает <ThemeSelect /> и <LanguageSelect />.
Боковая панель страницы
Заголовок раздела «Боковая панель страницы»Боковая панель страницы Starlight отвечает за отображение оглавления, в котором указаны подзаголовки текущей страницы. На узких экранах это сворачивается в липкое выпадающее меню.
PageSidebar
Заголовок раздела «PageSidebar»Стандартный компонент: PageSidebar.astro
Компонент, отображаемый перед содержимым главной страницы для вывода оглавления.
Реализация по умолчанию отображает <TableOfContents /> и <MobileTableOfContents />.
TableOfContents
Заголовок раздела «TableOfContents»Стандартный компонент: TableOfContents.astro
Компонент, который отображает оглавление текущей страницы на широких экранах просмотра.
MobileTableOfContents
Заголовок раздела «MobileTableOfContents»Стандартный компонент: MobileTableOfContents.astro
Компонент, который отображает оглавление текущей страницы на маленьких (мобильных) экранах просмотра.
Контент
Заголовок раздела «Контент»Эти компоненты отображаются в основной колонке содержимого страницы.
Стандартный компонент: Banner.astro
Баннерный компонент, отображаемый в верхней части каждой страницы.
Реализация по умолчанию использует значение banner метаданных страницы для принятия решения о необходимости отрисовки.
ContentPanel
Заголовок раздела «ContentPanel»Стандартный компонент: ContentPanel.astro
Компонент макета, используемый для обёртывания секций колонки основного содержимого.
PageTitle
Заголовок раздела «PageTitle»Стандартный компонент: PageTitle.astro
Компонент, содержащий элемент <h1> для текущей страницы.
Реализации должны обеспечить установку id="_top" для элемента <h1>, как в реализации по умолчанию.
DraftContentNotice
Заголовок раздела «DraftContentNotice»Стандартный компонент: DraftContentNotice.astro
Уведомление, отображаемое пользователям во время разработки, когда текущая страница помечена как черновик.
FallbackContentNotice
Заголовок раздела «FallbackContentNotice»Стандартный компонент: FallbackContentNotice.astro
Уведомление, отображаемое пользователям на страницах, где перевод на текущий язык недоступен. Используется только на многоязычных сайтах.
Стандартный компонент: Hero.astro
Компонент, отображаемый в верхней части страницы, когда в метаданных задан параметр hero.
В стандартном варианте на экране отображается крупный заголовок, теглайн и ссылки, призывающие к действию, а также дополнительное изображение.
MarkdownContent
Заголовок раздела «MarkdownContent»Стандартный компонент: MarkdownContent.astro
Компонент отображается вокруг основного содержимого каждой страницы. Реализация по умолчанию устанавливает базовые стили для применения к содержимому Markdown.
Стили контента Markdown также представлены в @astrojs/starlight/style/markdown.css и ограничены классом CSS .sl-markdown-content.
Эти компоненты отображаются внизу основного столбца содержимого страницы.
Стандартный компонент: Footer.astro
Компонент нижнего колонтитула отображается внизу каждой страницы.
Реализация по умолчанию отображает <LastUpdated />, <Pagination /> и <EditLink />.
LastUpdated
Заголовок раздела «LastUpdated»Стандартный компонент: LastUpdated.astro
Компонент отображается в нижнем колонтитуле страницы для отображения даты последнего обновления.
EditLink
Заголовок раздела «EditLink»Стандартный компонент: EditLink.astro
Компонент, отображаемый в нижнем колонтитуле страницы для отображения ссылки на страницу, где её можно редактировать.
Pagination
Заголовок раздела «Pagination»Стандартный компонент: Pagination.astro
Компонент отображается в нижнем колонтитуле страницы для отображения стрелок навигации между предыдущими и следующими страницами.