Multi Lingua

Come implementare la doppia/tripla lingua su un progetto di astro

Installare il componente
Terminal window
```
npm install astro-i18next
```

Aggiungi il componente al tuo progetto all’interno del file astro.config.mjs

import { defineConfig } from "astro/config";
import astroI18next from "astro-i18next";

export default defineConfig({
  integrations: [astroI18next()]
});

Crea un file astro-i18next.config.mjs e compilalo cosi

/** @type {import('astro-i18next').AstroI18nextConfig} */

// Importa i file di traduzione per IT e EN
import it from "./public/locales/it/translation.json" assert { type: "json" };
import en from "./public/locales/en/translation.json" assert { type: "json" };

export default {
  defaultLocale: "it",
  locales: ["it", "en"],
  returnObjects: true,
  i18nextServer: {
    resources: {
      it: {
        translation: {
          ...it
        }
      },
      en: {
        translation: {
          ...en
        }
      }
    }
  }
};

Ora dentro la cartella public crea una cartella locales, con all’interno le relative cartelle per le lingue
- Directorypublic
  - Directorylocales
    Directoryen
    translation.json
    Directoryit
    translation.json

In ogni pagina dovrai inserire nella head del file questi snippet

// Locale
import { t, changeLanguage } from "i18next";

changeLanguage("it"); // Questo serve ad astro per capire quale lingua è di default

Ora devi creare le variabili per ogni testo

<body>
   <h1>{t("home.title")}</h1>
   <p set:html={t("home.subtitle")}>
   </p>
</body>

{
  "home": {
    "title": "Benvenuto sul mio sito",
    "subtitle": "Questa è una stringa di esempio colorata di <span class='text-blu'>blu</span>"
  }
}

{
  "home": {
    "title": "Welcome to my awesome website!",
    "subtitle": "This is a sample string colored <span class=’text-blue'>blue</span>"
  }
}

Genera le pagine in multilingua tramite questo comando
Terminal window
```
npx astro-i18next generate
```

Qui trovi la wiki completa

Wiki multilingua

Logica condizionale nel visualizzare in base alla lingua

   ---
    import i18next, { t } from "i18next";
    const lang = i18next.language;
   ---
   {lang === "it" ?
   <h1>Contenuto IT</h1>
   :
    <h1>Contenuto EN</h1>
   }