Traduire votre site Astro + Vanilla JS avec Intlayer | Internationalisation (i18n)

Table des matières

Qu'est-ce qu'Intlayer ?

Intlayer est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier le support multilingue dans les applications web modernes.

Avec Intlayer, vous pouvez :

• Gérer facilement vos traductions en utilisant des dictionnaires déclaratifs au niveau des composants.
• Localiser dynamiquement les métadonnées, les routes et le contenu.
• Assurer le support de TypeScript avec des types autogénérés, améliorant l'autocomplétion et la détection d'erreurs.
• Bénéficier de fonctionnalités avancées comme la détection dynamique de la locale et le changement de langue.

Guide étape par étape pour configurer Intlayer dans Astro + Vanilla JS

Voir le Modèle d'application sur GitHub.

Étape 1 : Installer les dépendances

Installez les packages nécessaires en utilisant votre gestionnaire de packages préféré :

npm install intlayer astro-intlayer vanilla-intlayernpx intlayer init

• intlayer Le package de base qui fournit des outils d'internationalisation pour la gestion de la configuration, les traductions, la déclaration de contenu, la transpilation et les commandes CLI.

• astro-intlayer Inclut le plugin d'intégration pour Astro pour intégrer Intlayer avec le bundler Vite, ainsi qu'un middleware pour détecter la locale préférée de l'utilisateur, gérer les cookies et traiter les redirections d'URL.

• vanilla-intlayer Le package qui intègre Intlayer avec les applications Vanilla JavaScript / TypeScript. Il fournit un singleton pub/sub (IntlayerClient) et des helpers basés sur des callbacks (useIntlayer, useLocale, etc.) pour permettre à toute partie des balises <script> d'Astro de répondre aux changements de langue sans framework UI.

Étape 2 : Configurer votre projet

Créez un fichier de configuration pour définir les langues de votre application :

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // Vos autres locales    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

Via ce fichier de configuration, vous pouvez configurer les URL localisées, les redirections du middleware, les noms des cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs Intlayer dans la console, et plus encore. Pour une liste complète des paramètres disponibles, consultez la documentation de configuration.

Étape 3 : Intégrer Intlayer dans votre configuration Astro

Ajoutez le plugin intlayer à votre configuration Astro. Pour Vanilla JS, aucune intégration de framework UI supplémentaire n'est requise.

// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({  integrations: [intlayer()],});

Le plugin d'intégration intlayer() est utilisé pour intégrer Intlayer avec Astro. Il assure la construction des fichiers de déclaration de contenu et les surveille en mode développement. Il définit les variables d'environnement Intlayer au sein de l'application Astro. De plus, il fournit des alias pour optimiser les performances.

Étape 4 : Déclarer votre contenu

Créez et gérez vos déclarations de contenu pour stocker vos traductions :

import { t, type Dictionary } from "intlayer";const appContent = {  key: "app",  content: {    greeting: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola mundo",    }),    description: t({      en: "Welcome to my multilingual Astro site.",      fr: "Bienvenue sur mon site Astro multilingue.",      es: "Bienvenido a mi sitio Astro multilingüe.",    }),    switchLocale: t({      en: "Switch language:",      fr: "Changer de langue :",      es: "Cambiar idioma:",    }),  },} satisfies Dictionary;export default appContent;

Vos déclarations de contenu peuvent être définies n'importe où dans votre application, à condition qu'elles soient incluses dans le répertoire contentDir (par défaut ./src) et correspondent à l'extension du fichier de déclaration de contenu (par défaut .content.{json,ts,tsx,js,jsx,mjs,cjs}).

Pour plus d'informations, consultez la documentation de déclaration de contenu.

Étape 5 : Utiliser le contenu dans Astro

Pour Vanilla JS, tout le rendu côté serveur se fait en utilisant getIntlayer directement dans vos fichiers .astro. Ensuite, les blocs <script> initialisent vanilla-intlayer côté client pour gérer le changement de langue.

---import {  getIntlayer,  getLocaleFromPath,  getLocalizedUrl,  getPrefix,  getLocaleName,  localeMap,  locales,  defaultLocale,  getPathWithoutLocale,  type LocalesValues,} from "intlayer";export const getStaticPaths = () => {  return localeMap(({ locale }) => ({    params: { locale: getPrefix(locale).localePrefix },  }));};const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);const { greeting, description, switchLocale } = getIntlayer("app", locale);---<!doctype html><html lang={locale} dir={getHTMLTextDir(locale)}>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />    <title>{greeting}</title>    <!-- Lien Canonique -->    <link      rel="canonical"      href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}    />    <!-- Liens Hreflang -->    {      localeMap(({ locale: mapLocale }) => (        <link          rel="alternate"          hreflang={mapLocale}          href={new URL(            getLocalizedUrl(Astro.url.pathname, mapLocale),            Astro.site          )}        />      ))    }    <link      rel="alternate"      hreflang="x-default"      href={new URL(        getLocalizedUrl(Astro.url.pathname, defaultLocale),        Astro.site      )}    />  </head>  <body>    <main>      <h1 id="greeting">{greeting}</h1>      <p id="description">{description}</p>      <div class="locale-switcher">        <span class="switcher-label">{switchLocale}</span>        <div class="locale-buttons">          {            locales.map((localeItem) => (              <a                href={localeItem === locale ? undefined : getLocalizedUrl(pathWithoutLocale, localeItem)}                class={`locale-btn ${localeItem === locale ? "active" : ""}`}                data-locale={localeItem}                aria-disabled={localeItem === locale}              >                {getLocaleName(localeItem)}              </a>            ))          }        </div>      </div>    </main>  </body></html>

Si vous souhaitez utiliser votre contenu dans un attribut de type chaîne, tel que alt, title, href, aria-label, etc., vous pouvez utiliser la valeur de la fonction, comme :

html

Copier le contenu

Copier le code

Copier le code dans le presse-papiers

<img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

Note sur la configuration du routage : La structure de répertoire que vous utilisez dépend du paramètre middleware.routing dans votre intlayer.config.ts :

• prefix-no-default (par défaut) : Conserve la langue par défaut à la racine (pas de préfixe) et préfixe les autres. Utilisez [...locale] pour intercepter tous les cas.
• prefix-all : Toutes les URL ont un préfixe de langue. Vous pouvez utiliser un [locale] standard si vous n'avez pas besoin de gérer la racine séparément.
• search-param ou no-prefix : Pas besoin de dossier de locale. La locale est gérée via les paramètres de recherche ou les cookies.

Étape 6 : Ajouter la fonctionnalité de changement de langue

Dans Astro avec Vanilla JS, le changement de langue est rendu côté serveur sous forme de liens normaux et hydraté côté client via un bloc <script>. Lorsqu'un utilisateur clique sur un lien de langue, vanilla-intlayer définit le cookie de langue via setLocale avant de naviguer vers l'URL localisée.

<!-- Balisage côté serveur voir Étape 5 ci-dessus --><script>  import { installIntlayer, useLocale } from "vanilla-intlayer";  import { getLocaleFromPath, getLocalizedUrl, type LocalesValues } from "intlayer";  // Initialiser Intlayer côté client en utilisant la locale de l'URL actuelle  const locale = getLocaleFromPath(window.location.pathname);  installIntlayer({ locale: locale as LocalesValues });  const { setLocale } = useLocale({    onLocaleChange: (newLocale: LocalesValues) => {      window.location.href = getLocalizedUrl(window.location.pathname, newLocale);    },  });  // Attacher des événements de clic aux liens de changement de langue  const localeLinks = document.querySelectorAll("[data-locale]");  localeLinks.forEach((link) => {    link.addEventListener("click", (e) => {      const localeValue = link.getAttribute("data-locale") as LocalesValues;      if (localeValue && localeValue !== locale) {        e.preventDefault();        setLocale(localeValue);      }    });  });</script>

Note sur la persistance : installIntlayer initialise le singleton Intlayer avec la locale définie par le serveur. useLocale avec onLocaleChange garantit que le cookie de langue est défini via le middleware avant la navigation, afin que la préférence de l'utilisateur soit mémorisée pour les visites futures.

Note sur l'amélioration progressive : Les liens de changement de langue fonctionneront comme des balises <a> standard même sans JavaScript. Si JS est disponible, l'appel à setLocale met à jour le cookie avant la navigation, permettant au middleware d'exécuter la redirection correcte.

Étape 7 : Sitemap et Robots.txt

Intlayer fournit des utilitaires pour créer dynamiquement vos sitemaps localisés et fichiers robots.txt.

Sitemap

Intlayer est livré avec un générateur de sitemap intégré pour vous aider à créer facilement un sitemap pour votre application. Il gère les routes localisées et ajoute les métadonnées nécessaires pour les moteurs de recherche.

Le sitemap généré par Intlayer prend en charge l'espace de noms xhtml:link (Hreflang XML Extensions). Contrairement aux générateurs de sitemap par défaut qui ne répertorient que les URL brutes, Intlayer crée automatiquement les liens bidirectionnels requis entre toutes les versions linguistiques d'une page (par exemple, /about, /about?lang=fr et /about?lang=es). Cela garantit que les moteurs de recherche indexent et servent correctement la bonne version linguistique au bon public.

Créez src/pages/sitemap.xml.ts pour générer un sitemap incluant toutes vos routes localisées.

import type { APIRoute } from "astro";import { generateSitemap, type SitemapUrlEntry } from "intlayer";const pathList: SitemapUrlEntry[] = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";export const GET: APIRoute = async ({ site }) => {  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });  return new Response(xmlOutput, {    headers: { "Content-Type": "application/xml" },  });};

Robots.txt

Créez src/pages/robots.txt.ts pour gérer le crawl des moteurs de recherche.

import type { APIRoute } from "astro";import { getMultilingualUrls } from "intlayer";const getAllMultilingualUrls = (urls: string[]) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);export const GET: APIRoute = ({ site }) => {  const robotsTxt = [    "User-agent: *",    "Allow: /",    ...disallowedPaths.map((path) => `Disallow: ${path}`),    "",    `Sitemap: ${new URL("/sitemap.xml", site).href}`,  ].join("\n");  return new Response(robotsTxt, {    headers: { "Content-Type": "text/plain" },  });};

Configuration TypeScript

Intlayer utilise l'augmentation de module pour tirer parti de TypeScript et rendre votre codebase plus robuste.

Assurez-vous que votre configuration TypeScript inclut les types autogénérés.

{  // ... Vos configurations TypeScript existantes  "include": [    // ... Vos configurations TypeScript existantes    ".intlayer/**/*.ts", // Inclure les types autogénérés  ],}

Configuration Git

Il est recommandé d'ignorer les fichiers générés par Intlayer. Cela vous permet d'éviter de les committer dans votre dépôt Git.

Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier .gitignore :

# Ignorer les fichiers générés par Intlayer.intlayer

Extension VS Code

Pour améliorer l'expérience de développement avec Intlayer, vous pouvez installer l'extension VS Code Intlayer officielle.

Installer depuis le VS Code Marketplace

Cette extension fournit :

• L'autocomplétion pour vos clés de traduction.
• La détection d'erreurs en temps réel pour les traductions manquantes.
• Un aperçu en ligne du contenu traduit.
• Des actions rapides pour créer et mettre à jour vos traductions facilement.

Pour plus d'informations sur l'utilisation de l'extension, consultez la documentation de l'extension VS Code Intlayer.

(Optionnel) Étape 15 : Extraer le contenu de vos composants

Si vous avez une base de code existante, transformer des milliers de fichiers peut prendre beaucoup de temps.

Pour faciliter ce processus, Intlayer propose un compilateur / extracteur pour transformer vos composants et extraire le contenu.

Pour le configurer, vous pouvez ajouter une section compiler dans votre fichier intlayer.config.ts :

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Reste de votre configuration
  compiler: {
    /**
     * Indique si le compilateur doit être activé.
     */
    enabled: true,

    /**
     * Définit le chemin des fichiers de sortie
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indique si les composants doivent être sauvegardés après avoir été transformés. De cette façon, le compilateur peut être exécuté une seule fois pour transformer l'application, puis il peut être supprimé.
     */
    saveComponents: false,

    /**
     * Préfixe de clé de dictionnaire
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

npx intlayer extract

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Ajoute le plugin du compilateur ],});

npm run build # Ou npm run dev

Aller plus loin

Vous pouvez également implémenter l'éditeur visuel ou externaliser votre contenu en utilisant un CMS.