0
111
VisualizaçõesCómo configurar html lang y base usando static-i18n para traducciones
Creo una página de destino en un archivo .html usando html-css-js puro (para poder ejecutarlo en un servidor de archivos simple como apache). Para SEO, decido generar archivos .html separados para cada idioma admitido; para hacerlo, uso static-i18n, que toma el archivo html de plantilla con claves de traducción y lo cambia a archivos html separados (uno para cada idioma). Mi código con claves de traducción está dentro del directorio ./src , las traducciones deben generarse dentro de la carpeta ./dist usando
static-i18n --fixPaths false --selector [i18n] --useAttr false -o ./dist -l en -i en -i pl ./src
La estructura ./dist es la siguiente (copio assets y .htaccess por separado en mi script de compilación):
el idioma principal (inglés) está en el archivo ./dist/index.html , y otros idiomas están en el subdirectorio, por ejemplo ./dist/pl/index.html . Traducción de ejemplo dentro ./src/index.html (el atributo i18n significa que el contenido de la etiqueta interna es la clave de traducción)
<div class="main__title" i18n >main.title</div>
Tengo dos problemas: cómo configurar de forma dinámica:
- la etiqueta interior lang
<html lang="??">(pero sin cambiar la forma de dar claves de traducción como en el ejemplo html anterior) - valor href apropiado dentro de la etiqueta
<base href="...">(para leer correctamente los recursos) - en el idioma principal debería ser<base href="./">pero en otros idiomas (que están en subdirectorios) debería ser<base href="../">
1 Respostas
Responde à pergunta0
Aquí están mis soluciones, pero puede haber algo mejor.
- agregue la clave
"lang"a sus archivos de traducción*.jsony utilícelo en la etiqueta de la siguiente manera
<html data-attr-t lang-t="lang">
- elimine la etiqueta de html y use el siguiente código js en la parte superior de la etiqueta para generar
<base>adecuado
<script defer>
// CAUTION! This script must be in <head> tag
// (<base> must be set before <body> loading)
const mainLanguage = 'en';
// set base in dynamic way
const newBase = document.createElement('base');
const lang = document.documentElement.lang;
newBase.setAttribute('href', lang == 'en' ? './' : '../');
document.getElementsByTagName('head')[0].appendChild(newBase);
</script>
o de la misma manera como en lang use <base data-attr-t href-t="base"></base> (y agregue la clave "base":"./ a en.json y "base":"../" pl.json )