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.

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
  • duxt.sourceOptions.defaultLocale coincide con i18n.defaultLocale
¿Le ha resultado útil esta página?