Skip to content

Commit

Permalink
i18n(zh-cn): Update overriding-components.mdx (#2774)
Browse files Browse the repository at this point in the history
Co-authored-by: HiDeoo <[email protected]>
  • Loading branch information
liruifengv and HiDeoo authored Jan 8, 2025
1 parent 3c4fa1c commit aa69440
Showing 1 changed file with 20 additions and 3 deletions.
23 changes: 20 additions & 3 deletions docs/src/content/docs/zh-cn/guides/overriding-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,24 @@ import Default from '@astrojs/starlight/components/SocialIcons.astro';
在自定义组件中渲染内置组件时:

- 展开传入 `Astro.props`。这样可以确保它接收到渲染所需的所有数据。
- 在默认组件内部添加一个 [`<slot />`](https://docs.astro.build/zh-cn/core-concepts/astro-components/#插槽)。这样,如果组件传入了任何子元素,Astro 就知道在哪里渲染它们。
- 在默认组件内部添加一个 [`<slot />`](https://docs.astro.build/zh-cn/basics/astro-components/#插槽)。这样,如果组件传入了任何子元素,Astro 就知道在哪里渲染它们。

如果你要复用包含 [命名插槽](https://docs.astro.build/zh-cn/basics/astro-components/#命名插槽)[`PageFrame`](/zh-cn/reference/overrides/#pageframe)[`TwoColumnContent`](/zh-cn/reference/overrides/#twocolumncontent) 组件,你还需要 [传递](https://docs.astro.build/zh-cn/basics/astro-components/#传递插槽) 这些插槽。

下面的示例展示了一个自定义组件,它复用了 `TwoColumnContent` 组件,该组件需要传递一个额外的 `right-sidebar` 命名插槽:

```astro {9}
---
// src/components/CustomContent.astro
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/TwoColumnContent.astro';
---
<Default {...Astro.props}>
<slot />
<slot name="right-sidebar" slot="right-sidebar" />
</Default>
```

## 使用页面数据

Expand Down Expand Up @@ -124,7 +141,7 @@ const { title } = Astro.props.entry.data;
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/Footer.astro';
const isHomepage = Astro.props.slug === '';
const isHomepage = Astro.props.id === '';
---
{
Expand All @@ -138,4 +155,4 @@ const isHomepage = Astro.props.slug === '';
}
```

了解更多关于条件渲染的内容,请参阅 [Astro 模板语法指南](https://docs.astro.build/zh-cn/core-concepts/astro-syntax/#动态-html)
了解更多关于条件渲染的内容,请参阅 [Astro 模板语法指南](https://docs.astro.build/zh-cn/basics/astro-syntax/#动态-html)

0 comments on commit aa69440

Please sign in to comment.