Astro

Usa @better-translate/astro cuando tu aplicación de Astro necesite traducciones conscientes de la solicitud.

1. Instalar los paquetes

npm install @better-translate/core @better-translate/astro astro

2. Crear el traductor

Crea src/lib/i18n.ts:

1import { configureTranslations } from "@better-translate/core";23const en = {4  home: {5    title: "Hello from Astro",6  },7} as const;89const es = {10  home: {11    title: "Hola desde Astro",12  },13} as const;1415export const translator = await configureTranslations({16  availableLocales: ["en", "es"] as const,17  defaultLocale: "en",18  fallbackLocale: "en",19  messages: { en, es },20});

3. Exponer la configuración de la solicitud

Crea src/lib/request.ts:

1import { getRequestConfig } from "@better-translate/astro";23import { translator } from "./i18n";45export const requestConfig = getRequestConfig(async () => ({6  translator,7}));

4. Establecer el idioma de la solicitud en el middleware

Crea src/middleware.ts:

1import { createBetterTranslateMiddleware } from "@better-translate/astro/middleware";23import { requestConfig } from "./lib/request";45export const onRequest = createBetterTranslateMiddleware(requestConfig, {6  resolveLocale: ({ params }) => params?.lang,7});

5. Leer las traducciones en una página

Crea src/lib/server.ts:

1import { createServerHelpers } from "@better-translate/astro";23import { requestConfig } from "./request";45export const { getLocale, getTranslations } =6  createServerHelpers(requestConfig);

Crea src/pages/[lang]/index.astro:

astro

1---2import { getLocale, getTranslations } from "../../lib/server";34const locale = await getLocale();5const t = await getTranslations();6---78<html lang={locale}>9  <body>10    <h1>{t("home.title")}</h1>11  </body>12</html>

Paso siguiente opcional

Si tu documentación o publicaciones de blog de Astro viven en colecciones de contenido localizadas, agrega los helpers de contenido de Astro o el adaptador de MDX después de que esta configuración básica funcione.

Generar archivos de idioma automáticamente

En lugar de escribir cada traducción a mano, usa la CLI para extraer cadenas y generar archivos de idioma: Guía de la CLI

Ejemplos

astro-example