Skip to content

i18n(zh-cn): Update layouts.mdx #8968

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yanthomasdev merged 2 commits into from
Aug 1, 2024
Merged

i18n(zh-cn): Update layouts.mdx #8968

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
62ccaa0
i18n(zh-cn): Update `layouts.mdx`
huyikai Aug 1, 2024
d8bf8d4
Merge branch 'main' into 20240801-layouts.mdx
yanthomasdev Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 23 additions & 10 deletions src/content/docs/zh-cn/basics/layouts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,22 +230,35 @@ const { title, fancyJsHelper } = Astro.props;

<ReadMore>了解更多关于 Astro 的 Markdown 和 MDX 支持，请参阅 [Markdown/MDX 指南](/zh-cn/guides/markdown-content/)。</ReadMore>

## 对 `.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;
---
<html>
<head></head>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content={description}>
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
<slot />
<header>
<p>Published on {publishDate}</p>
<p>Viewed by {viewCount} folks</p>
</header>
<main>
<slot />
</main>
</body>
</html>
```
Expand Down