Hi, how can I use astro:content -> render in a page, wher eI do not have a single static entry of a collection but a list of entries in a collection and I want to render all of them?
#Collections multiple render
zealous flame
limber steepleBOT
Hi @zealous flame. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To render multiple entries from a collection using astro:content, you can use the getCollection() function to fetch all entries and then map over them to render each one. Here's how you can do it:
- First, import the necessary functions from
astro:content:
---
import { getCollection, render } from 'astro:content';
---
- Then, fetch all entries from your collection using
getCollection():
---
const allPosts = await getCollection('blog');
---
- Finally, map over the entries and render each one:
---
const renderedPosts = await Promise.all(
allPosts.map(async (post) => {
const { Content } = await render(post);
return { ...post, Content };
})
);
---
<ul>
{renderedPosts.map((post) => (
<li>
<h2>{post.data.title}</h2>
<post.Content />
</li>
))}
</ul>
In this example, we use Promise.all() to render all posts concurrently, which is more efficient than rendering them sequentially.
This approach allows you to render multiple entries from a collection on a single page. Each entry's content is rendered and can be accessed via the Content component.