前言

为了能够让使用者有更好的体验（装逼），将对主题前端进行国际化处理，使一些固定的文本变为可以国际化的文本形式，并在配置中能够设置用户的语言选择。

需求

为了达到国际化的要求，至少需要如下的一些条件。

  1. 由于 Halo 目前不支持国际化，因此需要纯前端支持，例如使用 jquery 然后在页面加载之后动态变化。
  2. 计划使用 JSON / YML 形式来保存国际化内容。
  3. 支持 Pjax，并且需要能够读取到 主题下的文件目录，即 ${theme_base!}，而不是直接 域名 + 文件

过程

插件选用

为了做到纯前端的国际化，进行了很多资料的查找。

计划使用的插件，依次从 jquery-i18n-properties -> jquery.i18n -> jquery-i18n 这样的过程。

名称 读取的文件形式 异步读取 渲染方式 简易程度
jquery-i18n-properties properties 支持但未测试（主机地址无法更改） jquery 简单
jquery.i18n json，也可以将其他转为JSON，但需要额外的步骤 支持（主机地址无法更改） jquery 较简单
jquery-i18n 自由，只要可以读取到键值对 支持 ajax jquery 稍微复杂，需要自定义读取键值对的方式

最终根据我的需要，选用了 jquery-i18n 作为国际化的插件。

编写国际化代码

由于要支持 pjax，因此写在 app.js 里面。

判断语言类型

当前采用四种方式

  1. 用户后台配置（优先）
  2. 缓存读取
  3. 浏览器语言
  4. 如上所有未生效，则使用默认的中文简体
  1.   /**
  2.    * 获取浏览器语言
  3.    */
  4.   getNavLang: function() {
  5.     currentLang = navigator.language;
  6.     //判断IE浏览器使用语言
  7.     if(!currentLang){
  8.         currentLang = navigator.browserLanguage;
  9.     }
  10.     return currentLang;
  11.   }

读取 yml 文件

读取 yml 计划采用 js-yaml 进行，能够将 yml 文件读取为 json 对象。示例如下 http://nodeca.github.io/js-yaml/

  1. 使用 ajax 读取服务器中对应的 yaml 文件
  2. 使用读取安全的解析器解析 yaml（防止恶意攻击）

渲染国际化

渲染国际化时需要确定如下几件事：

  1. 何时需要渲染（页面加载完成-包括pjax）
  2. 如何确定需要渲染的参数名（name）
  3. 对于嵌套的 json 能够根据 xxx.xxx 来渲染吗（未知）
  4. 对于某些情况下，可能有数量不定的参数【保留字段】，如何传入的问题（apply）