Añadir un idioma
Introducción
Siempre haber el caso en que tengamos que añadir un nuevo idioma a nuestra aplicación. Pongamos por el caso que debemos de añadir el Francés.
1. Crear fichero de traducciones
Copiar el fichero de traducciones de un idioma existente y nombrarlo con el locale correspondiente.
cp packages/i18n/src/locales/es.ts packages/i18n/src/locales/fr.ts
2. Traducir los mensajes
Una vez creado el fichero de traducciones del nuevo idioma habrá que traducir todos los mensajes
...
'general.backToHome': 'Retour au début',
'header.blog': 'Blog',
'header.myAccount': 'Mon compte',
'header.myLocation': 'Ma position',
'search.title': 'Résultats',
'search.results': 'Resultados de búsqueda',
'search.searcher': 'Résultats de recherche',
'search.resultsFor': 'Résultats pour:',
...
3. Importar traducciones
Una vez creado y traducido el fichero de traducciones hay que hacer que incorporarlo para que se tienga en cuenta en el momento de pedir un mensaje.
import type { Translations } from './types'
import { texts as ca } from './locales/ca'
import { texts as es } from './locales/es'
+ import { texts as fr } from './locales/fr'
import { texts as fixture } from './locales/fixture'
const translationsTexts = {
ca,
es,
+ fr,
fixture // Only for testing purposes
}
class MissingTranslationError {
message: string
name: string
constructor (message) {
this.message = message
this.name = 'MissingTranslationError' // (2)
}
}
...
4. Añadir idioma a la configuración
Una vez tenemos todos los ficheros de i18n creados, ya podemos configurar la aplicación para que use el nuevo idioma.
...
i18n: {
- locales: ['es'],
+ locales: ['es', 'fr'],
defaultLocale: 'es'
},
...