Skip to content

Latest commit

 

History

History
61 lines (47 loc) · 2.73 KB

i18n.md

File metadata and controls

61 lines (47 loc) · 2.73 KB

进阶:多语言支持

多语言支持几乎是所有模板引擎的难题,我们尽量采取了一种比较折中的方案。
多语言中通常 面临两个问题:载入时渲染载入后渲染。 本节所有涉及到的代码,你可以在 /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",
},

其中,encn 是语言代码,后面的值则是对应的语言文件路径。

自动侦测与默认设定

tmpUI 的语言引擎会在页面初始化时自动侦测浏览器的语言,并自动设置对应语言代码的文件,以下是内置的语言代码清单。

语言代码 目标语言
en 英语
cn 中文
jp 日语
kr 韩语
fr 法语
de 德语
ms 马来语
ru 俄语

语言引擎会将设置好的语言代码,存储到 localStorage 中,键名为 tmpUI_language。在下次访问时调用。

如果浏览器侦测到的语言,其语言代码没有在程序配置中进行配置,那么会将语言代码更改至 languageDefault 设定的值,这个值在没有配置的情况下,默认是 en