Introduction#
The demand for website internationalization is constantly increasing.
i18n#
The common i18n multilingual solution requires maintaining multiple sets of language files, which is labor-intensive and inconvenient to maintain. If one word is changed, all of them have to be changed.
Google translate solution#
Occasionally, I came across a website and was interested in their multilingual solution. I searched and found the following solution based on Google Translate:
<!-- Element container -->
<div id="google_translate_element"></div>
// This method will be executed after the plugin below is loaded
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
// Include plugin support, cb is the callback method name to be executed
<script type='text/javascript' src='https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
Disadvantages#
Requires a VPN connection. However, considering accessing from abroad, the solution is still acceptable. Of course, this is just providing an idea, and specific situations need to be considered.
Effect#
You can visit this website. Under the condition of a VPN connection, you can see the translation button in the lower right corner, which allows you to switch languages and perform online translation.