diff options
| -rw-r--r-- | packages/integrations/mdx/README.md | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index 94122914a..fe6873804 100644 --- a/packages/integrations/mdx/README.md +++ b/packages/integrations/mdx/README.md @@ -134,6 +134,47 @@ const posts = await Astro.glob('./*.mdx'); ))} ``` +### Layouts + +You can use the [MDX layout component](https://mdxjs.com/docs/using-mdx/#layout) to specify a layout component to wrap all page content. This is done with a default export statement at the end of your `.mdx` file: + +```mdx +// src/pages/my-page.mdx + +export {default} from '../../layouts/BaseLayout.astro'; +``` + +You can also import and use a [`<Layout />` component](/en/core-concepts/layouts/) for your MDX page content, and pass all the variables declared in frontmatter as props. + +```mdx +--- +// src/pages/posts/first-post.mdx + +title: 'My first MDX post' +publishDate: '21 September 2022' +--- +import BaseLayout from '../layouts/BaseLayout.astro'; + +<BaseLayout {...frontmatter}> + # {frontmatter.title} + + Welcome to my new Astro blog, using MDX! +</BaseLayout> +``` +Then, your values are available to you through `Astro.props` in your layout, and your MDX content will be injected into the page where your `<slot />` component is written: + +```astro +--- +// src/layouts/BaseLayout.astro +const { title, publishDate } = Astro.props; +--- +<!-- --> +<h1>{title}</h1> +<slot /> +<p>Published on {publishDate}</p> +<!-- --> +``` + ### Syntax highlighting The MDX integration respects [your project's `markdown.syntaxHighlight` configuration](https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting). |