#i18n integration with the guide

1 messages · Page 1 of 1 (latest)

grizzled driftBOT
#

Hi @tender sapphire. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To set up your website to support multiple languages and have English as the default locale, you can follow these steps:

  1. Create a directory for each language you want to support. For example, en/, de/, fr/, ku/, and tr/ if you are supporting English, German, French, Kurdish, and Turkish. You've already done this part.

  2. Set up src/pages/index.astro to redirect to your default language (English in this case). You can use a meta refresh or Astro.redirect if you are using an SSR adapter. Here's how you can do it:

---
---
<meta http-equiv="refresh" content="0;url=/en/" />

or

---
return Astro.redirect('/en/');
---

Source (https://docs.astro.build/en/recipes/i18n#set-up-pages-for-each-language)

  1. For the sitemap, you can use the i18n option in the @astrojs/sitemap configuration. Set defaultLocale to 'en' and define the locales object with your supported languages. Here's an example:
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
 site: '<https://yourwebsite.com',>
 integrations: [
 sitemap({
 i18n: {
 defaultLocale: 'en', // All urls that don't contain `de`, `fr`, `ku`, or `tr` after `<https://yourwebsite.com/`> will be treated as default locale, i.e. `en`
 locales: {
 en: 'en-US', // The `defaultLocale` value must present in `locales` keys
 de: 'de-DE',
 fr: 'fr-FR',
 ku: 'ku-KU',
 tr: 'tr-TR',
 },
 },
 }),
 ],
});

Source (https://docs.astro.build/en/guides/integrations-guide/sitemap#i18n)

This will generate a sitemap where URLs that don't contain de, fr, ku, or tr after your website's URL will be treated as the default locale, i.e., en.

#
  1. For pages that are not created by Astro but are part of your deployed site, you can use the customPages option in the @astrojs/sitemap configuration to include them in your sitemap.
// ...
sitemap({
 customPages: ['<https://yourwebsite.com/external-page',> '<https://yourwebsite.com/external-page2'],>
});

Source (https://docs.astro.build/en/guides/integrations-guide/sitemap#custompages)

Please note that Astro doesn’t have built-in internationalization (i18n) support, but you can build your own i18n solution. Source (https://docs.astro.build/en/recipes/i18n)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tender sapphire kapa.ai is still learning and improving, please let us know how it did by reacting below

#

Let me check the knowledge base for you. One moment! :books:

#

To exclude the en language from the URL structure, you can modify the getStaticPaths function in your src/pages/[lang]/philosopher/[...slug].astro file. You can add a condition to check if the language is en and then adjust the path accordingly. Here's how you can do it:

---
import { getCollection } from "astro:content";

export async function getStaticPaths() {
  const pages = await getCollection("philosopher");

  const paths = pages.map((page) => {
    const [lang, ...slug] = page.slug.split("/");
    // If the language is 'en', exclude it from the path
    const path = lang === 'en' ? slug.join("/") : `${lang}/${slug.join("/")}`;
    return { params: { lang, slug: path || undefined }, props: page };
  });

  return paths;
}

const { lang, slug } = Astro.params;
const page = Astro.props;

const { Content } = await page.render();
---

<h1>{page.data.name}</h1>
<Content />

This will generate paths without the en prefix for English content. For example, philosopher/plato/index.html for English and de/philosopher/plato/index.html for German.

Please note that this solution assumes that your routing and link generation elsewhere in your application also follow this convention. You may need to adjust your routing and links accordingly to ensure that they match this structure.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tender sapphire kapa.ai is still learning and improving, please let us know how it did by reacting below

#

Let me check the knowledge base for you. One moment! :books:

#

I see, you want to exclude the en prefix from the URL structure for English content and keep it for other languages. You can achieve this by modifying the getStaticPaths function in your src/pages/[lang]/philosopher/[...slug].astro file. Here's how you can do it:

---
import { getCollection } from "astro:content";

export async function getStaticPaths() {
  const pages = await getCollection("philosopher");

  const paths = pages.map((page) => {
    const [lang, ...slug] = page.slug.split("/");
    // If the language is 'en', exclude it from the path
    const path = lang === 'en' ? slug.join("/") : `${lang}/${slug.join("/")}`;
    return { params: { slug: path.split("/") }, props: page };
  });

  return paths;
}

const { slug } = Astro.params;
const page = Astro.props;

const { Content } = await page.render();
---

<h1>{{page.data.name}}</h1>
<Content />

This will generate paths without the en prefix for English content. For example, philosopher/plato/index.html for English and tr/philosopher/plato/index.html for Turkish.

Please note that this solution assumes that your routing and link generation elsewhere in your application also follow this convention. You may need to adjust your routing and links accordingly to ensure that they match this structure.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tender sapphire kapa.ai is still learning and improving, please let us know how it did by reacting below

#

Let me check the knowledge base for you. One moment! :books:

#

The error message you're seeing is due to the slug parameter being an object instead of a string or a number. This is likely because the slug parameter is being split into an array with the split("/") method in the getStaticPaths function.

To fix this, you need to ensure that the slug parameter is a string or a number. If the slug consists of multiple parts, you should pass it as an array. Here's how you can modify your getStaticPaths function:

---
import {{ getCollection }} from "astro:content";

export async function getStaticPaths() {{
  const pages = await getCollection("philosopher");

  const paths = pages.map((page) => {{
    const [lang, ...slug] = page.slug.split("/");
    // If the language is 'en', exclude it from the path
    const path = lang === 'en' ? slug : [lang, ...slug];
    return {{ params: {{ slug }}, props: page }};
  }});

  return paths;
}}

const {{ slug }} = Astro.params;
const page = Astro.props;

const {{ Content }} = await page.render();
---

<h1>{{page.data.name}}</h1>
<Content />

In this modification, if the language is en, the slug is an array of the remaining parts after splitting the page slug. If the language is not en, the slug is an array that includes the language and the remaining parts after splitting the page slug. This ensures that the slug parameter is an array, which is valid for dynamic routes in Astro.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: