8.重写组件

套用主题

欢迎来到我的网站

Starlight 的默认 UI 和配置选项被设计成能灵活地适用于各种内容。大部分 Starlight 的默认外观可以通过 CSS 和配置选项进行自定义。

对`SocialIcons`模块重写

本示例将重写 Starlight 页面导航栏中的 SocialIcons 组件。

创建一个 Astro 组件来替换 Starlight 组件。本示例渲染了一个联系方式链接。

---
import type { Props } from '@astrojs/starlight/props';
---

<a href="mailto:houston@example.com">E-mail Me</a>

在 astro.config.mjs 的 components 配置选项中告诉 Starlight 使用你的自定义组件：

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'My Docs with Overrides',
      components: {
        // 重写默认的 `SocialIcons` 组件。
        SocialIcons: './src/components/EmailLink.astro',
      },
    }),
  ],
});

因为重写了SocialIcons,所以原来的github标签链接没了, 要想保留它且增加自己的内容,请看下面示例

复用内置组件

将 Starlight 的默认 UI 组件导入并在自己的自定义组件中渲染它们。就可以在你的设计中保留 Starlight 的基本 UI，同时在它们旁边添加额外的 UI。

下面的示例是一个自定义组件，它渲染了一个电子邮件链接以及默认的 SocialIcons 组件：

---
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/SocialIcons.astro';
---

<a href="mailto:houston@example.com">E-mail Me</a>
<Default {...Astro.props}><slot /></Default>

在自定义组件中渲染内置组件时：

展开传入 Astro.props。这样可以确保它接收到渲染所需的所有数据。
在默认组件内部添加一个。这样，如果组件传入了任何子元素，Astro 就知道在哪里渲染它们。

仅在特定页面上重写

组件重写在所有页面上生效。但是，你可以使用 Astro.props 中的值来条件性渲染，决定何时显示你的自定义 UI，何时显示 Starlight 的默认 UI，甚至何时显示完全不同的内容。

在下面的示例中，一个重写 Footer 的组件只在首页上显示”Built with Starlight 🌟“，在其他页面上显示默认的页脚：

---
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/Footer.astro';

const isHomepage = Astro.props.slug === '';
---

{
  isHomepage ? (
    <footer>Built with Starlight 🌟</footer>
  ) : (
    <Default {...Astro.props}>
      <slot />
    </Default>
  )
}

然后在 astro.config.mjs 的 components 中添加:

Footer: './src/components/ConditionalFooter.astro',

欢迎来到我的网站

对SocialIcons模块重写

复用内置组件

仅在特定页面上重写

对`SocialIcons`模块重写