File tree Expand file tree Collapse file tree 1 file changed +20
-3
lines changed
docs/src/content/docs/zh-cn/guides Expand file tree Collapse file tree 1 file changed +20
-3
lines changed Original file line number Diff line number Diff 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;
124141import type { Props } from '@astrojs/starlight/props';
125142import 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 ) 。
You can’t perform that action at this time.
0 commit comments