Hi @rough summit. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Rendering body of a collection
broken ginkgoBOT
To render the body content of a collection of Markdown (.md) posts in a map, you can use the render() function along with the getCollection() function in Astro. Here's how you can do it:
- First, fetch your collection using
getCollection():
---
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
---
- Then, you can map over the posts and render the content for each one:
---
import { getCollection, render } from 'astro:content';
const posts = await getCollection('blog');
---
<ul>
{posts.map(async (post) => {
const { Content } = await render(post);
return (
<li>
<h2>{post.data.title}</h2>
<Content />
</li>
);
})}
</ul>
In this example, we use the render() function to get the Content component for each post. The Content component is then used to render the body of the post.
Note that the render() function is asynchronous, so we need to use async in the map function.
This approach allows you to render the full content of each post in your collection. Remember that the Content component will render the entire body of the Markdown file, including any HTML that may be in it.