From 62ccaa0b55b55f762629bb046a30e2f9bfc6ca02 Mon Sep 17 00:00:00 2001 From: huyikai Date: Thu, 1 Aug 2024 09:26:13 +0800 Subject: [PATCH] i18n(zh-cn): Update `layouts.mdx` --- src/content/docs/zh-cn/basics/layouts.mdx | 33 ++++++++++++++++------- 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/src/content/docs/zh-cn/basics/layouts.mdx b/src/content/docs/zh-cn/basics/layouts.mdx index 51facd87bfab4..20776d57783cd 100644 --- a/src/content/docs/zh-cn/basics/layouts.mdx +++ b/src/content/docs/zh-cn/basics/layouts.mdx @@ -230,22 +230,35 @@ const { title, fancyJsHelper } = Astro.props; 了解更多关于 Astro 的 Markdown 和 MDX 支持，请参阅 [Markdown/MDX 指南](/zh-cn/guides/markdown-content/)。 -## 对 `.md`, `.mdx`, 和 `.astro` 使用一个布局 +### 在布局中使用 TypeScript -一个 Astro 布局可以编写以接收 `.md` 和 `.mdx` 文件中的 `frontmatter` 对象，以及从 `.astro` 文件传递的任何命名 props。 +任何 Astro 布局都可以通过提供 props 类型来引入类型安全和自动补全功能： -在下面的示例中，布局将从 frontmatter YAML `title` 属性或 Astro 组件传递的 `title` 属性中显示页面标题： -```astro /{?title}?/ /Astro.props[.a-z]*/ +```astro ins={2-7} title="src/components/MyLayout.astro" --- -// src/components/MyLayout.astro -const { title } = Astro.props.frontmatter || Astro.props; +interface Props { + title: string; + description: string; + publishDate: string; + viewCount: number; +} +const { title, description, publishDate, viewCount } = Astro.props; --- - - + + + + + {title} + -

{title}

- +
+

Published on {publishDate}

+

Viewed by {viewCount} folks

+
+
+ +
```