多语言支持几乎是所有模板引擎的难题,我们尽量采取了一种比较折中的方案。
多语言中通常
面临两个问题:载入时渲染
和载入后渲染
。 本节所有涉及到的代码,你可以在 /example/4
中获取。
首先,我们来解决第一个问题:载入时渲染。
载入时渲染在这里说的是,页面在加载完成之后,页面就绪时的时间线。我们通过 i18n
标签来给指定的 DOM
对象写入内容,比如这样:
<div i18n="index_title">.</div>
请注意,标签中的 .
是必须的字符,如果没有它,将不进行渲染。 index_title
是对应的语言文件中的语言标记(稍后会说明语言文件的格式)。
载入时渲染时页面加载完成之后自动
进行的。
第二个问题:载入后渲染。很多时候,页面内容是在载入之后进行请求的,比如用户的账单信息。那么如何处理这些模板的语言渲染问题呢? 很简单,调用一次
tmpUI.languageBuild()
这个函数可以对页面进行一次渲染。
为界面更换语言时,同样也可以采用此做法。大多数模板更换语言时需要刷新页面,而 tmpUI
不需要,只需要运行一次 tmpUI.languageSet(目标语言的代码)
。
语言文件是一份 JSON
格式的文件,其中以 "语言标记":"内容"
为格式组织。比如上方提到的 i18n="index_title"
,则需要在语言文件中包含 "index_title":"这是首页标题"
才能够正确在目标位置填充内容。
要正确应用多语言配置,你还需要在 tmpUI
初始化时的参数中设置好多语言的的相关参数。
这里是一段示例代码:
"language":{
"en":"./lang/en.json",
"cn":"./lang/cn.json",
},
其中,en
与 cn
是语言代码,后面的值则是对应的语言文件路径。
tmpUI
的语言引擎会在页面初始化时自动侦测浏览器的语言,并自动设置对应语言代码的文件,以下是内置的语言代码清单。
语言代码 | 目标语言 |
---|---|
en |
英语 |
cn |
中文 |
jp |
日语 |
kr |
韩语 |
fr |
法语 |
de |
德语 |
ms |
马来语 |
ru |
俄语 |
语言引擎会将设置好的语言代码,存储到 localStorage
中,键名为 tmpUI_language
。在下次访问时调用。
如果浏览器侦测到的语言,其语言代码没有在程序配置中进行配置,那么会将语言代码更改至 languageDefault
设定的值,这个值在没有配置的情况下,默认是 en
。