这是被延迟的一篇日志，之前一直放在todo list里，结果现在整理以前的东西时才发现。之前在逛这个网站时发现挺好奇它的国际化是如何做的，所以定下这个todo。
它的做法是：
将网站页面上的内容分成三个级别。国际化内容放在三个单独的js文件，以k-v存放。
第一级是全局的一些信息。比如网站的title、每个页面的操作按钮上的文字、全局提示信息等等。
这部分信息被放在这个js：https://flexboxfroggy.com/js/messages.js
第二级是每一个关卡的步骤信息。操作提示、题目内容等内容。
这部分信息被放在这个js：https://flexboxfroggy.com/js/levels.js
第三级是每一项flexbox关键字的知识信息。因为这个练习css中flexbox技术的网站，flexbox里面一些关键字比如justify-content、align-self、flex等关键字都有讲解信息，只要出现了它们或者需要提示的地方用户hover上去都能看能到讲解这个关键词的用法。网站设计者把这类信息的国际化内容都统一放到一个js文件了：https://flexboxfroggy.com/js/docs.js
解决在js代码中，需要显示这部分内容的时候，由于在国际化内容中，它会被类似message[SOME-I18N-KEY]、document.title = messages.title[game.language] || messages.title.en;等来把国际化内容取出填充到网页中。
tag: js
short-uri: how-flexbox-froggy-do-i18n
网友评论