Web Analytics

astro-i18n-aut

⭐ 201 stars Spanish by jlarmstrongiv

astro-i18n-aut La integración i18n para Astro 🧑‍🚀

astro-i18n-aut

Construido con ❤️ para todos los compañeros de Astro 🧑‍🚀

Descargas Totales Última Versión Licencia

Motivación

Proporcionar una integración de internacionalización (i18n) para Astro que:

Inicio rápido

Instalación

Instalar vía npm:

npm install astro-i18n-aut

Configurar

En tu archivo de configuración de Astro:

import { defineConfig } from "astro/config";
import { i18n, filterSitemapByDefaultLocale } from "astro-i18n-aut/integration";
import sitemap from "@astrojs/sitemap";
const defaultLocale = "en";
const locales = {
  en: "en-US", // the defaultLocale value must present in locales keys
  es: "es-ES",
  fr: "fr-CA",
};
export default defineConfig({
  site: "https://example.com/",
  trailingSlash: "always",
  build: {
    format: "directory",
  },
  integrations: [
    i18n({
      locales,
      defaultLocale,
    }),
    sitemap({
      i18n: {
        locales,
        defaultLocale,
      },
      filter: filterSitemapByDefaultLocale({ defaultLocale }),
    }),
  ],
});

En tu archivo .gitignore:

astro_tmp_pages_*

Uso

Ahora que ha configurado el archivo, cada página .astro tendrá representaciones adicionales con sus otros idiomas. Por ejemplo, src/pages/about.astro se renderizará como:

Si ha activado redirectDefaultLocale (verdadero por defecto), las redirecciones serán:

Tenga en cuenta que la función getStaticPaths() solo se ejecutará una vez. Esta limitación significa que no puede tener URLs traducidas, como /es/acerca-de/ para /about/. Sin embargo, también garantiza la compatibilidad con @astrojs/sitemap.

El frontmatter y el contenido de la página de Astro se vuelven a ejecutar para cada página traducida. Por ejemplo, el Astro.url.pathname será:

Depende de usted detectar qué idioma se está renderizando. Puede usar las colecciones de contenido de Astro o cualquier marco de interfaz de usuario i18n, como react-i18next, para sus traducciones. Aquí hay un ejemplo puro de Hello World:

---
import { getLocale } from "astro-i18n-aut";
import Layout from "../layouts/Layout.astro";
const locale = getLocale(Astro.url);
let title: string;
switch (locale) {
  case "es":
    title = "¡Hola Mundo!";
    break;
  case "fr":
    title = "Bonjour Monde!";
    break;
  default:
    title = "Hello World!";
}


  
{title}

Se incluyen varias funciones auxiliares para facilitar el manejo de locales.

Opciones de configuración de Astro

Por favor, consulte la documentación oficial de Astro para más detalles:

Debe configurar uno de los siguientes:

site: "https://example.com/", trailingSlash: "always", build: { format: "directory", }, } ``

  • `js
{ site: "https://example.com", trailingSlash: "never", build: { format: "file", }, } `

Todas estas opciones están relacionadas y deben configurarse juntas. Afectan si tus URLs son:

  • /about/
  • /about

Si eliges /about/, entonces /about dará un error 404 y viceversa.

Opciones de integración

  • locales: Un registro de todos los locales de idioma.
  • defaultLocale: El locale de idioma predeterminado. El valor debe estar presente en las claves de locales.
  • redirectDefaultLocale - Suponiendo que defaultLocale: "en", si /en/about/ redirige a /about/ (por defecto: 308).
  • include: Patrón(es) glob para incluir (por defecto: ["pages//*"]).
  • exclude: Patrón(es) glob para excluir (por defecto: ["pages/api//*"]).

Compatibilidad

#### Tipos de archivos de página

Otros tipos de archivos de página de Astro:

  • ✅ .astro
  • ❌ .md
  • ❌ .mdx (con la integración MDX instalada)
  • ❌ .html
  • ❌ .js / .ts (como endpoints)

no pueden ser traducidos. Si decides usarlos en el directorio pages, por favor añádelos a los patrones glob de exclusión. Por ejemplo: js ["pages/api//", "pages//.md"]; 

#### Exclusión de páginas
En Astro, la documentación indica:
Puedes excluir páginas o directorios de la compilación prefixando sus nombres con un guion bajo (_). Los archivos con el prefijo _ no serán reconocidos por el enrutador ni se colocarán en el directorio dist/.

>

Puedes usar esto para deshabilitar temporalmente páginas, y también para poner pruebas, utilidades y componentes en la misma carpeta que sus páginas relacionadas.
Desafortunadamente, esta función de exclusión de páginas no está soportada. Por favor, mantén solo páginas en tu directorio de páginas.
Aún puedes excluir páginas con prefijo guion bajo (_) agregando pages//_* a los patrones glob de ignorar:
js ["pages/api//", "pages//_"]; 

#### Markdown
Para .md y .mdx, use las Colecciones de Contenido de Astro.
Con esta biblioteca y las Colecciones de Contenido de Astro, puede mantener su Markdown separado y organizado en content, mientras usa pages/blog/index.astro y pages/blog/[slug].astro para renderizar todo su contenido, ¡incluso con un defaultLocale! Aquí hay un ejemplo de estructura de carpetas:
. └── astro-project/ └── src/ ├── pages/ │ └── blog/ │ ├── index.astro │ └── [id].astro └── content/ └── blog/ ├── en/ │ ├── post-1.md │ └── post-2.md ├── es/ │ ├── post-1.md │ └── post-2.md └── fr/ ├── post-1.md └── post-2.md ` #### Frameworks de UI

Astro no soporta .tsx o .jsx como tipos de archivo para páginas.

Para frameworks de UI como React y Vue, úsalos como normalmente lo harías con Astro importándolos como componentes.

Siéntete libre de pasar el contenido traducido title={t('title')} o la configuración regional locale={locale} como props.

#### Endpoints

Por defecto, todas las páginas en pages/api//* son ignoradas.

Para endpoints .ts y .js`, cómo manejar múltiples configuraciones regionales depende de ti. Como los endpoints no están orientados al usuario y hay muchas formas diferentes de usar endpoints, dejamos la implementación a tu preferencia.

Licencia

Licenciado bajo MIT

Contribuciones

¡PRs bienvenidos! Gracias por tu ayuda. Lee más en la guía de contribución para reportar errores y hacer PRs.

--- Tranlated By Open Ai Tx | Last indexed: 2026-07-24 ---

Original README: View on GitHub

Translated by OpenAiTx | Last updated: 2026-07-24