summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorliruifengv2025-01-08 17:13:15 +0800
committerGitHub2025-01-08 10:13:15 +0100
commitaa69440323692ae723cfc95cc0ac72e559b12348 (patch)
tree9068312bace899192161544fd62af9d034897d64
parent3c4fa1c50547f85d3a7d13d46937fa4e56865cc3 (diff)
downloadIT.starlight-aa69440323692ae723cfc95cc0ac72e559b12348.tar.gz
IT.starlight-aa69440323692ae723cfc95cc0ac72e559b12348.tar.bz2
IT.starlight-aa69440323692ae723cfc95cc0ac72e559b12348.zip
i18n(zh-cn): Update overriding-components.mdx (#2774)
Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>
-rw-r--r--docs/src/content/docs/zh-cn/guides/overriding-components.mdx23
1 files changed, 20 insertions, 3 deletions
diff --git a/docs/src/content/docs/zh-cn/guides/overriding-components.mdx b/docs/src/content/docs/zh-cn/guides/overriding-components.mdx
index 63fe8dc7..5fbf2529 100644
--- a/docs/src/content/docs/zh-cn/guides/overriding-components.mdx
+++ b/docs/src/content/docs/zh-cn/guides/overriding-components.mdx
@@ -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>
+```
## 使用页面数据
@@ -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 === '';
---
{
@@ -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)。