Same custom SLUG for collection in multiple languages | Astro Lounge | Page 1

hollow monolith Oct 27, 2023, 2:58 PM

#

Hi, I am new here and need some help with "i18n" and "Content Collections".
First of all, I would like to say that although I have been using Astro for a very short time, I am absolutely thrilled with it.

But now to my question. I have created a website (https://www.happily-lost-in-prague.com) for my YouTube channel and I am using Collections in two languages. Everything works as it should.
All Collections data are in MDX files. For readability, I use my own SLUGS.
And here the question, is it possible to use the same slug for the different languages. So that the path does
not <domain>/en/castle-en and <domain>/cs/castle-cs
but <domain>/en/castle and <domain>/cs/castle?
Is it possible to set the SLUG to look at the path (the language)?
Thanks a lot.

cerulean reefBOT Oct 27, 2023, 4:00 PM

#

Still waiting for an answer?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

finite belfry Oct 28, 2023, 10:52 AM

#

It depends on how you structure your content. The recommended way is to do it like so:

content/
  en/
    hello-world.mdx
  cs/
     hello-world.mdx

How is your content structured as of now?

hollow monolith Oct 28, 2023, 2:20 PM

#

It is exactly done that way

#

#

Thanks for helping

finite belfry Oct 28, 2023, 2:25 PM

#

then why couldn't use the same slug in mdx files? let's say you have

content/
  en/
    2023-07-30.mdx => slug: test
  cs/
    2023-07-30.mdx => slug: test

Then you can just query your content collections based on the language and that's pretty much it:

const posts = await getCollection("posts", ({ slug }) => slug.split("/")[0] === language)

#

idk if it answers your question

hollow monolith Oct 28, 2023, 2:26 PM

#

I will test it, thanks

hollow monolith Oct 28, 2023, 2:45 PM

#

Sorry, one futher question.
I use export const prerender = true; to have static pages. To do so, I need to use the getStaticPaths function. Which look actualy like this:
export async function getStaticPaths() { const blogEntries = await getCollection('ytchannel'); return blogEntries.map((entry) => { return { params: { slug: entry.slug, lang: entry.id.split('/')[0] }, props: { entry } }; }); }

#

When I'm correct, I need all entries in all languages to be able to render all the slugs in their language. But maybe I'm wrong. This is my second Astro Project.

#Same custom SLUG for collection in multiple languages