diff --git a/src/pages/en/core-concepts/layouts.md b/src/pages/en/core-concepts/layouts.md index 6b00b5a1c689d..4892d9fdc574f 100644 --- a/src/pages/en/core-concepts/layouts.md +++ b/src/pages/en/core-concepts/layouts.md @@ -68,19 +68,19 @@ description: My first blog post! This is a post written in Markdown. ``` -When a Markdown file includes a layout, it passes a `content` property to the `.astro` component which includes the frontmatter properties and the final HTML output of the page. +When a Markdown file includes a layout, it passes a `frontmatter` property to the `.astro` component which includes the frontmatter properties and the final HTML output of the page. **`src/layouts/BlogPostLayout.astro`** -```astro /content(?:.\w+)?/ +```astro /frontmatter(?:.\w+)?/ --- -const {content} = Astro.props; +const {frontmatter} = Astro.props; --- -

{content.title}

-

Post author: {content.author}

+

{frontmatter.title}

+

Post author: {frontmatter.author}

@@ -99,11 +99,11 @@ For example, a common layout for blog posts may display a title, date and author ```astro {2} // --- import BaseLayout from '../layouts/BaseLayout.astro' -const {content} = Astro.props; +const {frontmatter} = Astro.props; --- -

{content.title}

-

Post author: {content.author}

+

{frontmatter.title}

+

Post author: {frontmatter.author}

 ``` diff --git a/src/pages/en/guides/markdown-content.md b/src/pages/en/guides/markdown-content.md index 1beeb24ab1e86..b9ab8d6e30c94 100644 --- a/src/pages/en/guides/markdown-content.md +++ b/src/pages/en/guides/markdown-content.md @@ -46,26 +46,26 @@ layout: ../layouts/BaseLayout.astro A typical layout for Markdown pages includes: -1. The `content` prop to access the Markdown or MDX page's frontmatter and other data. See [Markdown Layout Props](#markdown-layout-props) for a complete list of props available. +1. The `frontmatter` prop to access the Markdown or MDX page's frontmatter and other data. See [Markdown Layout Props](#markdown-layout-props) for a complete list of props available. 2. A default [``](/en/core-concepts/astro-components/#slots) to indicate where the page's Markdown content should be rendered. -```astro /(?" +```astro /(?" --- // src/layouts/BaseLayout.astro -// 1. The content prop gives access to frontmatter and other data -const { content } = Astro.props; +// 1. The frontmatter prop gives access to frontmatter and other data +const { frontmatter } = Astro.props; --- - {content.title} + {frontmatter.title} -

{content.title} by {content.author}

+

{frontmatter.title} by {frontmatter.author}

-

Written on: {content.date}

+

Written on: {frontmatter.date}

``` @@ -78,9 +78,9 @@ Markdown and MDX files do not return identical `Astro.props` objects. See the MD A Markdown layout will have access to the following information via `Astro.props`: -- **`content`** - all frontmatter from the Markdown or MDX document. - - **`content.file`** - The absolute path of this file (e.g. `/home/user/projects/.../file.md`). - - **`content.url`** - If it's a page, the URL of the page (e.g. `/en/guides/markdown-content`). +- **`frontmatter`** - all frontmatter from the Markdown or MDX document. + - **`frontmatter.file`** - The absolute path of this file (e.g. `/home/user/projects/.../file.md`). + - **`frontmatter.url`** - If it's a page, the URL of the page (e.g. `/en/guides/markdown-content`). - **`headings`** - A list of headings (`h1 -> h6`) in the Markdown document with associated metadata. This list follows the type: `{ depth: number; slug: string; text: string }[]`. - **`rawContent()`** - A function that returns the raw Markdown document as a string. - **`compiledContent()`** - A function that returns the Markdown document compiled to an HTML string. @@ -89,7 +89,7 @@ An example blog post may pass the following `Astro.props` object to its layout: ```js Astro.props = { - content: { + frontmatter: { /** Frontmatter from a blog post */ title: "Astro 0.18 Release", date: "Tuesday, July 27 2021", @@ -119,14 +119,14 @@ Astro.props = { #### Example: Using one Layout that works for `.md`, `.mdx`, and `.astro` files -A single Astro layout can be written to receive the content object from `.md` and `.mdx` files, as well as any named props passed from `.astro` files. +A single Astro layout can be written to receive the `frontmatter` object from `.md` and `.mdx` files, as well as any named props passed from `.astro` files. In the example below, the layout will display the page title either from an Astro component passing a `title` attribute or from a frontmatter YAML `title` property: ```astro /{?title}?/ /Astro.props[.a-z]*/ --- // src/components/MyLayout.astro -const { title } = Astro.props.content || Astro.props; +const { title } = Astro.props.frontmatter || Astro.props; --- @@ -467,9 +467,9 @@ export default { ...all Markdown documents will have a calculated `minutesRead`. You can use this to include an "X min read" banner in a [markdown layout](#markdown-and-mdx-pages), for instance: -```astro title="src/layouts/BlogLayout.astro" "const { minutesRead } = Astro.props.content;" "

{minutesRead}

" +```astro title="src/layouts/BlogLayout.astro" "const { minutesRead } = Astro.props.frontmatter;" "

{minutesRead}

" --- -const { minutesRead } = Astro.props.content; +const { minutesRead } = Astro.props.frontmatter; ---