0
109
ViewsHow to set html lang and base using static-i18n for translations
I create landing page in one .html file using pure html-css-js (to be able to run it on simple file serwer like apache). For SEO I decide to generate separate .html files for each supported language - to do it I use static-i18n which take template html file with translations keys and change it to separate html files (one for each language). My code with translaton keys is inside ./src directory, the translations shoud be generated inside ./dist folder using
static-i18n --fixPaths false --selector [i18n] --useAttr false -o ./dist -l en -i en -i pl ./src
The ./dist structure is following (I copy there assets and .htaccess in separate way in my build script):
the main language (english) is in ./dist/index.html file, and other languages are in subdirecotry e.g. ./dist/pl/index.html. Example translation inside ./src/index.html (the i18n attribute means that inside tag content is translation key)
<div class="main__title" i18n >main.title</div>
I have two problems - how to set in dynamic way:
- the lang inside tag
<html lang="??">(but without changing the way of giving translations keys as in html example above) - proper href value inside
<base href="...">tag (for properly reading assets) - in main language should be<base href="./">but in other languages (which are in subdirectories) shoud be<base href="../">
1 answers
Answer question0
Here are my solutons - but may be there exists better
- add key
"lang"to your translation*.jsonfiles and use it in tag as follows
<html data-attr-t lang-t="lang">
- remove tag from html and use following js code at the top of tag to generate proper
<base>
<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>or in same way like in lang use <base data-attr-t href-t="base"></base> (and add key "base":"./ to en.json and "base":"../" pl.json)