Como traduje mi portafolio con JavaScript y JSON
Hace un par de semanas, publiqué un artículo sobre la selección de idioma y las traducciones (el cual deberías leer). Así que esta semana debería hacer un artículo sobre cómo traduje mi sitio web de portafolio personal utilizando solo JavaScript puro.
Mencioné en el otro artículo que aquí utilizamos i18n para detectar automáticamente el idioma del usuario. Sin embargo, no quería complicarme demasiado en mi portafolio personal para tenerlo listo más rápido y probar algo nuevo. Así que se me ocurrió una solución sencilla utilizando únicamente JavaScript.
Crear un array
Tengo un array muy simple con los IDs asignados a las diferentes cadenas en mi página web, como esto:
texts = [
"skillstxt",
"experiencetxt",
"projectstxt",
"title",
];
Crear JSONs
Cada JSON corresponde a un idioma y contiene los IDs mencionados junto con la cadena correspondiente en su idioma.:
en = {
skillstxt: "Skills",
experiencetxt: "Experience",
projectstxt: "Projects",
title: "Software Engineer",
};
es = {
skillstxt: "Habilidades",
experiencetxt: "Experiencia",
projectstxt: "Proyectos",
title: "Ingeniero de software",
};
fr = {
skillstxt: "Compétences",
experiencetxt: "Expérience",
projectstxt: "Projets",
title: "Ingénieur logiciel",
};
Además, hay un JSON vacío que más tarde tendrá la traducción para el idioma seleccionado.
La función de traducción
Con el array y los JSONs en su lugar, ahora simplemente podemos iterar a través del array. Para cada elemento, asignamos la cadena correspondiente a la clave del JSON al elemento HTML:
function translate() {
texts.forEach((t) => {
document.getElementById(t).innerHTML = json[t];
});
}
Como mencioné antes, si queremos cambiar el idioma, simplemente asignamos el JSON del nuevo idioma al JSON del idioma actual y llamamos a la función de traducción para reemplazar las cadenas en el HTML:
function spanish() {
json = es;
translate();
}
function english() {
json = en;
translate();
}
function french() {
json = fr;
translate();
}
Como mencionado en mi ultimo post, estas opciones están disponibles al inicio de la página con el código ISO de cada idioma, no es la mejor opción, pero ayuda a ahorrar espacio.
