#i18n Routes for Blog Posts

1 messages · Page 1 of 1 (latest)

desert ermine
#

I've configured my site as per this guide and have i18n working for my pages:

https://docs.astro.build/en/recipes/i18n/

However, I've created a blog and wanted to route my EN blog pages to my FR ones. In ui.ts I tried adding a route (like in the routes section of the guide), but I get a 404. How can I route translated posts properly?

Astro Documentation

Use dynamic routing and content collections to add internationalization support to your Astro site.

valid kestrelBOT
#
Quiet in here?

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.

jaunty edge
# desert ermine I've configured my site as per this guide and have i18n working for my pages: h...

Hello @desert ermine I wrote the part about routing on official i18n recipe. However, it does not include support for content collections or simply sub-pages.

I wrote an article about it on my blog. This explains how this can work in your case without third-party:

https://webdesign-sopelnik.de/en/blog/translate-routes-for-astro-content-collections-or-subpages-with-trailingslash-and-base-support/

desert ermine
#

Does anything need to change in my [...slug].astro? I see a list of both EN and FR blog articles currently (I made it following the guide)

jaunty edge
#
GitHub

Translate routes in Astro with Content collection, subpage, optional trailingSlash and base support without using third-party libraries. - artursopelnik/astro-translate-routes-example

GitHub

Translate routes in Astro with Content collection, subpage, optional trailingSlash and base support without using third-party libraries. - artursopelnik/astro-translate-routes-example

desert ermine
#

Since I followed the guide and my EN pages aren't in an EN folder, does this affect the routing?

jaunty edge
#

sure

#

It doesn't matter whether English is in root or under /en/.

What is important is what your default language is and what other languages ​​are supported. You can configure this in the ui.ts.

In your case, defaultLanguage should be en

desert ermine
#

export const defaultLang = "en";

#

However, on my blog page I have

    <section>
      <ul>
        {
          posts.map((post) => (
            <li>
              <a href={`/${post.slug}`}>
                <h4 class="title">{post.data.title}</h4>
                <p class="date">
                  <FormattedDate date={post.data.date} />
                </p>
              </a>
            </li>
          ))
        }
      </ul>
    </section>

For blog post test.md, the link that is rendered for post.slug is: /en/test and not /test

#

In FR it links to /blog/fr/teste instead of /fr/blog/teste

jaunty edge
#

Could you publish this code to an repo? So I could check it directly there?