Saltar al contenido
duxt

Varios idiomas

Servir la interfaz en varios idiomas, y traducir también las páginas.

Las cadenas del tema están traducidas en siete locales. Un sitio sirve el subconjunto que quiere, traduce las cadenas que él mismo configuró y — si le apetece — también las páginas.

Pasos

  1. Reduce la lista con duxt.locales.
    locales: ['en-GB', 'es-ES']

    No el array locales de i18n: ese se combina entre capas en lugar de reemplazar, así que declarar dos allí deja las otras cinco enrutadas y anunciadas en hreflang.
  2. Elige la que va sin prefijo en nuxt.config.ts con i18n.defaultLocale. Es relevante para la URL: cambiarla después mueve todas las páginas en ambos sentidos a la vez.
  3. Traduce tus propias cadenas. Para un puñado, la forma de registro cuesta menos que un archivo de locale por idioma:
    sections: [
  {
    label: { 'en-GB': 'Guides', 'es-ES': 'Guías' },
    to: '/guides',
    icon: 'lucide:book-open'
  }
]

    Para más de un puñado, registra tus propias claves i18n y escribe la clave. No recurras a duxt.defaults.* — son las claves internas de la capa, y un renombrado allí rompería tu sitio en silencio.
  4. Define el origen. hreflang no vale en relativo, así que necesita i18n.baseUrl o NUXT_PUBLIC_I18N_BASE_URL.
  5. Traduce las páginas, si quieres. Una carpeta por idioma dentro de la fuente; el locale por defecto se queda donde está y no mueve ninguna URL:
    sources: [{ path: 'docs', locales: ['en-GB', 'es'] }]
docs/
  • index.md
  • 1.getting-started
  • index.md
  • es
  • index.md

Traduce tan pocas páginas como quieras — todo lo demás recae en el original, con un aviso que le dice al lector por qué.

  1. Abre una página en cada locale y comprueba que la interfaz cambió de idioma, que la ruta sigue resolviendo y que ninguna etiqueta configurada aparece como clave en crudo.

Solo algunas versiones, u otro repositorio

locales en una ref sobrescribe el de la fuente, que es la forma habitual: la versión actual está traducida y las dos anteriores no.

{
  path: 'docs',
  locales: ['en-GB', 'es'],
  refs: [
    { tag: 'v2.0.0' },                     // ambos idiomas
    { tag: 'v1.0.0', locales: ['en-GB'] }  // solo el original
  ]
}

La forma de objeto mueve un idioma a otro sitio por completo — su propio repositorio, con sus propios responsables y su propio ritmo:

locales: ['en-GB', { locale: 'es', repo: 'acme/docs-es', path: 'docs' }]

Eso es lo que hacen React y Vue fuera de sus herramientas, con de.react.dev y la organización vuejs-translations, porque quienes traducen trabajan con su propio calendario y su propia revisión. Aquí es una entrada de fuente en lugar de un segundo sitio web — un índice de búsqueda, un selector de idioma.

Dirección de escritura

El locale activo aporta la dirección del documento además del idioma. La navegación, los paneles, las flechas y la disposición de página se reflejan cuando un sitio consumidor añade un locale RTL porque los componentes de duxt usan inicio y fin lógicos. El material técnico no se refleja a ciegas: código, comandos, rutas, nombres de API y otra sintaxis LTR conservan la dirección en la que son legibles.

duxt no incluye hoy ningún locale RTL. Direction-aware significa que un sitio puede añadirlo sin bifurcar el tema, no que uno de los siete locales incluidos sea RTL.

Cuando una página no tiene traducción

El lector recibe el idioma más cercano que la tenga, con un aviso, y la página lleva noindex más un canonical que apunta al idioma en el que realmente está. La cadena — locale, idioma base, región hermana, fallbackLocale, original — está en Localización.

Lista de comprobación

  • duxt.locales enumera exactamente los locales que sirves
  • /sitemap.xml contiene una entrada por página y locale, y ninguna más
  • Los enlaces hreflang son absolutos
  • Ninguna etiqueta configurada aparece como clave en crudo
  • Cambiar de locale mantiene al lector en la misma página
  • Una página que no tradujiste muestra el aviso de recurso, no un 404
  • Un locale RTL añadido refleja la interfaz mientras la sintaxis técnica permanece LTR
  • duxt.sourceOptions.defaultLocale coincide con i18n.defaultLocale
¿Le ha resultado útil esta página?