Skip to content
Merged
Changes from all commits
Commits
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
8 changes: 4 additions & 4 deletions src/content/docs/zh-cn/core-concepts/layouts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -182,10 +182,10 @@ Astro.props = {
Markdown/MDX 布局将通过 `Astro.props` 访问其文件的所有 [导出属性](/zh-cn/guides/markdown-content/#导出的属性),**但有一些关键区别:**
* 标题信息(即 `h1 -> h6` 元素)可通过 `headings` 数组访问,而不是 `getHeadings()` 函数。
* `file` 和 `url` 也作为嵌套的 `frontmatter` 属性(即 `frontmatter.url` 和 `frontmatter.file`)可用。
* 在 frontmatter 之外定义的值(例如 MDX 中的 `export` 语句)不可用。请考虑 [手动导入布局](#手动导入布局-mdx)。
* 在 frontmatter 之外定义的值(例如 MDX 中的 `export` 语句)不可用。请考虑 [手动导入布局](#手动导入布局mdx)。
:::

### 手动导入布局 (MDX)
### 手动导入布局(MDX)

你可能需要将信息传递给你的 MDX 布局,而该信息不存在于(或无法存在于)你的 frontmatter 中。在这种情况下,你可以导入并使用一个 [`<Layout />` 组件](/zh-cn/core-concepts/layouts/),并像其他组件一样传递它的 props:

Expand All @@ -207,7 +207,7 @@ function fancyJsHelper() {
```
然后,你可以通过布局中的 `Astro.props` 访问你的值,而你的 MDX 内容将被注入到你的 `<slot />` 组件所在的页面中:

```astro "fancyJsHelper" "title"
```astro /{?title}?/ "fancyJsHelper" "{fancyJsHelper()}"
---
// src/layouts/BaseLayout.astro
const { title, fancyJsHelper } = Astro.props;
Expand All @@ -225,7 +225,7 @@ const { title, fancyJsHelper } = Astro.props;

一个 Astro 布局可以编写以接收 `.md` 和 `.mdx` 文件中的 `frontmatter` 对象,以及从 `.astro` 文件传递的任何命名 props。

在下面的示例中,布局将从 Astro 组件传递的 `title` 属性或 frontmatter YAML `title` 属性中显示页面标题:
在下面的示例中,布局将从 frontmatter YAML `title` 属性或 Astro 组件传递的 `title` 属性中显示页面标题:

```astro /{?title}?/ /Astro.props[.a-z]*/
---
Expand Down