Skip to content

Commit aa69440

Browse files
liruifengvHiDeoo
andauthored
i18n(zh-cn): Update overriding-components.mdx (#2774)
Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>
1 parent 3c4fa1c commit aa69440

File tree

1 file changed

+20
-3
lines changed

1 file changed

+20
-3
lines changed

docs/src/content/docs/zh-cn/guides/overriding-components.mdx

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,24 @@ import Default from '@astrojs/starlight/components/SocialIcons.astro';
8484
在自定义组件中渲染内置组件时:
8585

8686
- 展开传入 `Astro.props`。这样可以确保它接收到渲染所需的所有数据。
87-
- 在默认组件内部添加一个 [`<slot />`](https://docs.astro.build/zh-cn/core-concepts/astro-components/#插槽)。这样,如果组件传入了任何子元素,Astro 就知道在哪里渲染它们。
87+
- 在默认组件内部添加一个 [`<slot />`](https://docs.astro.build/zh-cn/basics/astro-components/#插槽)。这样,如果组件传入了任何子元素,Astro 就知道在哪里渲染它们。
88+
89+
如果你要复用包含 [命名插槽](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/#传递插槽) 这些插槽。
90+
91+
下面的示例展示了一个自定义组件,它复用了 `TwoColumnContent` 组件,该组件需要传递一个额外的 `right-sidebar` 命名插槽:
92+
93+
```astro {9}
94+
---
95+
// src/components/CustomContent.astro
96+
import type { Props } from '@astrojs/starlight/props';
97+
import Default from '@astrojs/starlight/components/TwoColumnContent.astro';
98+
---
99+
100+
<Default {...Astro.props}>
101+
<slot />
102+
<slot name="right-sidebar" slot="right-sidebar" />
103+
</Default>
104+
```
88105

89106
## 使用页面数据
90107

@@ -124,7 +141,7 @@ const { title } = Astro.props.entry.data;
124141
import type { Props } from '@astrojs/starlight/props';
125142
import Default from '@astrojs/starlight/components/Footer.astro';
126143
127-
const isHomepage = Astro.props.slug === '';
144+
const isHomepage = Astro.props.id === '';
128145
---
129146
130147
{
@@ -138,4 +155,4 @@ const isHomepage = Astro.props.slug === '';
138155
}
139156
```
140157

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

0 commit comments

Comments
 (0)