The items in the array returned by getCollection() don't contain the URLs or paths of the items. They can be rendered through an async function though. How can I create a new array with the URLs of the entries in the array returned by getCollection()? The solution should work in an i18n setup where locales have subdirectories inside the collection's directory.
#How to get the URLs of the elements returned by getCollection()?
inner surge
ripe flumeBOT
Hi @inner surge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
You can create URLs for the entries returned by getCollection() by using the slug property of each entry. The slug property represents the relative path of the entry from the collection's directory.
Here's an example of how you can do this:
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
const pages = await getCollection('blog');
return pages.map(entry => ({
params: { slug: entry.slug },
props: { entry },
}));
}
In this example, getStaticPaths() is used to generate a new path for every collection entry. The slug property of each entry is used to create the new URL paths. This will generate a new page for every entry in the blog collection. For example, an entry at src/content/blog/hello-world.md will have a slug of hello-world, and therefore its final URL will be /posts/hello-world/.
If your custom slugs contain the / character to produce URLs with multiple path segments (which is common in i18n setups where locales have subdirectories inside the collection's directory), you must use a rest parameter ([...slug]) in the .astro filename for this dynamic routing page.