I want to use the <Content /> Component with the markdown body from a page that's not in a collection. how can we do that with a single page layout for multiple markdown files?
#Can we dynamically import a markdown body from a page
analog ingot
grizzled tulipBOT
Hi @analog ingot. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, you can dynamically import a Markdown body from a page using the <Content /> component in Astro. Here's how you can do it:
- Import the Markdown file into your Astro component. This gives you access to the Markdown content and other properties such as frontmatter values.
---
// Import a single file
import * as myPost from '../pages/post/my-post.md';
---
- You can then use the
<Content />component to render the full contents of the Markdown file. For example, if you have renamed theContentcomponent asPromoBannerduring import, you can use it like this:
<h2>Today's promo</h2>
<PromoBanner />
- If you want to use a single page layout for multiple Markdown files, you can use the special
layoutfrontmatter property in your Markdown files to specify a layout component that will wrap their Markdown content.
---
layout: '../layouts/MySiteLayout.astro'
title: 'My Markdown page'
---
# Title
This is my page, written in **Markdown.**
In this case, the MySiteLayout.astro layout component will be used for the page layout.
Remember, your Markdown and MDX files no longer automatically become pages using Astro’s file-based routing when they are inside a collection, so you must create a page responsible for generating each individual blog post.
For more detailed information, you might find the Astro documentation (https://docs.astro.build/) helpful.
Sources:
- Importing Markdown (https://docs.astro.build/en/guides/markdown-content/#importing-markdown)
- The
ContentComponent (https://docs.astro.build/en/guides/markdown-content/#the-content-component) - Markdown/MDX Pages (https://docs.astro.build/en/basics/astro-pages/#markdownmdx-pages)
- Generate pages from a collection (https://docs.astro.build/en/tutorials/add-content-collections/#generate-pages-from-a-collection)