After relaunching our website with new templates for our documentation, post pages and adding a new landing page, we decided to have at least the landing page translated.
As we might add other areas later we decided to have a fixed namespace (filename) for the landing page. We used the advanced option to init locizify like described here.
We ended with following snipplet:
After reloading the page we had the source content in english inside our project. We translated that to german and italian in no time using our editor.
As the latest version gets auto published reloading the page with the additional querystring parameter
?lng=de (or switching browser language) was enough to test the translation.
Next we created a production version (going to project settings -> versions) so we can change or prepare new content during development without messing with the currently released page version.
After that we wanted to avoid the flickering on initial load where the page first gets displayed in the source language until locizify loaded and initial translated the page.
To optimize this we just needed to add
display: none to body (more info):
<body style="display: none">
Finally we needed a solution to let the user change the language on our page. We started with a simple list of links:
But decided a select element would fit more to our current layout. We needed to add binding to i18next changeLanguage event to select current language and handle the select
Further we use
locizify.getLanguages to get current available languages in our project, so we don't have to touch the code when we add new languages:
the select element:
<select id="languageSelect" onChange="handleSelectChange()" translated>
// the select element
That's all. Our project was translated in no time including a custom language selector:
We are very pleased with the outcome of eating our own dogfood. Next step will be to order professional translations for the languages we can't translate ourself...