diff --git a/src/content/docs/en/guides/content-collections.mdx b/src/content/docs/en/guides/content-collections.mdx index de9e57b24f590..de70195c8aac6 100644 --- a/src/content/docs/en/guides/content-collections.mdx +++ b/src/content/docs/en/guides/content-collections.mdx @@ -472,6 +472,34 @@ const { Content, headings } = await entry.render(); ``` +### Render a list of contents + +Sometimes, you don't just want to [render one Content to HTML](#rendering-content-to-html) but a list of contents, like on the index page of a blog. + +```astro +--- +// src/pages/render-list-example.astro +import { getCollection } from 'astro:content'; +const blogpostsCollection = await getCollection('blog') +const blogposts = [] +for (const blogpost of blogpostsCollection) { + const { Content } = await blogpost.render() + blogposts.push({ + slug: blogpost.slug, + title: blogpost.data.title, + Content: Content, + }) +} +--- +

Blogposts ({blogposts.length})

+{ + blogposts.map(({ slug, title, Content }) => ( +
+ )) +} +``` + + ## Generating Routes from Content Content collections are stored outside of the `src/pages/` directory. This means that no routes are generated for your collection items by default. You will need to manually create a new [dynamic route](/en/guides/routing/#dynamic-routes) to generate HTML pages from your collection entries. Your dynamic route will map the incoming request param (ex: `Astro.params.slug` in `src/pages/blog/[...slug].astro`) to fetch the correct entry inside a collection.