白银赞助商
+ +
+
+
+
+
+
+ 
+
+
通过简单的 API 将你的应用国际化
+除了简单的翻译外，还支持复数，数字，日期时间等本地化处理
+你可以在单文件组件上管理语言环境信息
+Component1 locale messages: {{ $t("message.hello") }}
+Fallback global locale messages: {{ $t("message.greeting") }}
+{{ $t("message.hello") }}
+こんにちは、世界
+Component1 locale messages: こんにちは、component1
+Fallback global locale messages: おはようございます
+{{ $d(new Date(), 'short') }}
+{{ $d(new Date(), 'long', 'ja-JP') }}
+Apr 19, 2017
+2017年4月19日(水) 午前2:19
+hi there!
+hi there!
+こんにちは、kazupon！
+hi kazupon!
+{{ $t('message') }}
+``` + +输出如下： + +```html +hello world
+``` + +注意，默认情况下回退到 `fallbackLocale` 会产生两个控制台警告： + +```console +[vue-i18n] Value of key 'message' is not a string! +[vue-i18n] Fall back to translate the keypath 'message' with 'en' locale. +``` + +为了避免这些警告 (同时保留那些完全没有翻译给定关键字的警告)，需初始化 `VueI18n` 实例时设置 `silentFallbackWarn：true`。 diff --git a/vuepress/zh/guide/formatting.md b/vuepress/zh/guide/formatting.md new file mode 100644 index 000000000..dc7e1cfc7 --- /dev/null +++ b/vuepress/zh/guide/formatting.md @@ -0,0 +1,199 @@ +# 格式化 + +## HTML格式化 + +:::warning 提示 +:warning: 在你的网站上动态插入任意 HTML 可能非常危险，因为它很容易导致 XSS 攻击。仅对可信内容使用 HTML 插值，而不对用户提供的内容使用。 + +我们建议使用[组件插值](interpolation.md) 功能。 +::: + +在某些情况下，你可能希望将翻译呈现为 HTML 信息而不是静态字符串。 + + +```js +const messages = { + en: { + message: { + hello: 'hellohello + +world
+``` + +## 具名格式 + +语言环境信息如下： + +```js +const messages = { + en: { + message: { + hello: '{msg} world' + } + } +} +``` + +模板如下： + +```html +{{ $t('message.hello', { msg: 'hello' }) }}
+``` + +输出如下： + +```html +hello world
+``` + +## 列表格式 + +语言环境信息如下： + +```js +const messages = { + en: { + message: { + hello: '{0} world' + } + } +} +``` + +模板如下： + +```html +{{ $t('message.hello', ['hello']) }}
+``` + +输出如下： + +```html +hello world
+``` + +列表格式也接受类似数组的对象： + + +```html +{{ $t('message.hello', {'0': 'hello'}) }}
+``` + +输出如下： + +```html +hello world
+``` + +## 支持 ruby on rails 的 i18n 格式 + +语言环境信息如下： + +```js +const messages = { + en: { + message: { + hello: '%{msg} world' + } + } +} +``` + +模板如下： + +```html +{{ $t('message.hello', { msg: 'hello' }) }}
+``` + +输出如下： + +```html +hello world
+``` + +## 自定义格式 + +有时，你可能需要使用自定义格式进行翻译 (例如：[ICU 信息语法](http://userguide.icu-project.org/formatparse/messages))。 + +你可以使用实现[格式化接口](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L41-L43) 的自定义格式化函数来实现。 + +以下使用 ES2015 class 语法的自定义格式化函数： + +```js +// 实现自定义格式 +class CustomFormatter { + constructor (options) { + // ... + } + + // + // 插值 + // + // @param {string} 信息 + // 列表或具名格式的字符串。 + // 例如： + // - 具名格式：'Hi {name}' + // - 列表格式：'Hi {0}' + // + // @param {Object | Array} 值 + // `message` 插值的值 + // 使用 `$t`， `$tc` 和 `i18n` 函数式组件传递值。 + // e.g. + // - $t('hello', { name: 'kazupon' }) -> 传递值：Object `{ name: 'kazupon' }` + // - $t('hello', ['kazupon']) -> 传递值：Array `['kazupon']` + // - `i18n` 函数式组件 (组件插值) + //kazupon
+ //how are you?
+ //I accept xxx Terms of Service Agreement
+``` + +在上面的信息中，如果你使用 `$t`，可能你会尝试编写以下语言环境信息： + +```js +const messages = { + en: { + term1: 'I Accept xxx\'s', + term2: 'Terms of Service Agreement' + } +} +``` + +你可能会尝试在以下模板中实现： + +```html +{{ $t('term1') }}{{ $t('term2') }}
+``` + +输出： + +```html +I accept xxx Terms of Service Agreement
+``` + +这是非常麻烦的，如果在语言环境信息中配置 `` 标签，则可能由于使用了 `v-html="$t('term')"` 进行本地化而存在被 XSS 攻击的可能性。 + +你可以使用 `i18n` 函数式组件来避免它。例如： + +```html ++ You can change your flight until 15 minutes from departure. +
+ ++ You can refund your ticket until 30 minutes from departure. +
+ +{{ $t('key1') }}
+ +{{ $t('nested.message1') }}
+ +{{ $t('errors[0]') }}
+ +{{ $t('errors[1].internal1') }}
+ +{{ $t('errors[2][0]') }}
+this is message1
+ +this is nested message1
+ +this is 0 error code message
+ +this is internal 1 error message
+ +this is nested array error 1
+{{ $t('message.linked') }}
+``` + +输出如下： + +```html +DIO: the world !!!!
+``` + + +### 按括号分组 + +链接到的语言环境信息的键名也可以形如 `@:(message.foo.bar.baz)`，其中链接到另一段翻译的键名在括号 `()` 里。 + +如果链接 `@:message.something` 后紧跟着一个点 `.`，则此选项非常有用，因为它本不该成为但却成为了链接的一部分。 + +语言环境信息如下： + +```js +const messages = { + en: { + message: { + dio: 'DIO', + linked: 'There\'s a reason, you lost, @:(message.dio).' + } + } +} +``` + +模板如下： + +```html +{{ $t('message.linked') }}
+``` + +输出如下： + +```html +There's a reason, you lost, DIO.
+``` diff --git a/vuepress/zh/guide/number.md b/vuepress/zh/guide/number.md new file mode 100644 index 000000000..0ac432afe --- /dev/null +++ b/vuepress/zh/guide/number.md @@ -0,0 +1,57 @@ +# 数字本地化 + +:::tip 支持版本 +:new: 7.0 新增 +::: + +你可以使用你定义的格式来本地化数字。 + +数字格式如下： + +```js +const numberFormats = { + 'en-US': { + currency: { + style: 'currency', currency: 'USD' + } + }, + 'ja-JP': { + currency: { + style: 'currency', currency: 'JPY', currencyDisplay: 'symbol' + } + } +} +``` + +如上，你可以指定具名的 (例如：`currency` 等) 的数字格式，并且需要使用 [ECMA-402 Intl.NumberFormat 的选项](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat)。 + +之后就像语言环境信息一样，你需要指定 `VueI18n` 构造函数的 `numberFormats` 选项： + +```js +const i18n = new VueI18n({ + numberFormats +}) + +new Vue({ + i18n +}).$mount('#app') +``` + +模板如下： + +```html +{{ $n(100, 'currency') }}
+{{ $n(100, 'currency', 'ja-JP') }}
+$100.00
+￥100
+{{ $tc('car', 1) }}
+{{ $tc('car', 2) }}
+ +{{ $tc('apple', 0) }}
+{{ $tc('apple', 1) }}
+{{ $tc('apple', 10, { count: 10 }) }}
+``` + +输出如下： + +```html +car
+cars
+ +no apples
+one apple
+10 apples
+``` + +## 通过预定义的参数访问该数字 + +你无需明确指定复数的数字。可以通过预定义的命名参数 `{count}` 和/或 `{n}` 在语言环境信息中访问该数字。如有必要，你可以覆盖这些预定义的命名参数。 + +语言环境信息如下： + +```js +const messages = { + en: { + apple: 'no apples | one apple | {count} apples', + banana: 'no bananas | {n} banana | {n} bananas' + } +} +``` + +模板如下： + +```html +{{ $tc('apple', 10, { count: 10 }) }}
+{{ $tc('apple', 10) }}
+ +{{ $tc('banana', 1, { n: 1 }) }}
+{{ $tc('banana', 1) }}
+{{ $tc('banana', 100, { n: 'too much' }) }}
+``` + +输出如下： + +```html +10 apples
+10 apples
+ +1 banana
+1 banana
+too much bananas
+``` + + +## 自定义复数 + +然而，这种复数并不适用于所有语言 (例如，斯拉夫语言具有不同的复数规则)。 + +为了实现这些规则，你可以覆盖 `VueI18n.prototype.getChoiceIndex` 函数。 + +使用斯拉夫语言规则的简化示例 (俄语、乌克兰语等)： +```js +/** + * @param choice {number} 由 $tc 输入的选择索引：`$tc('path.to.rule', choiceIndex)` + * @param choicesLength {number} 总体可用选择 + * @returns 选择复数单词的最终选择索引 +**/ +VueI18n.prototype.getChoiceIndex = function (choice, choicesLength) { + // this === VueI18n 实例，所以语言环境属性也存在于此处 + if (this.locale !== 'ru') { + // 继续执行默认实现 + } + + if (choice === 0) { + return 0; + } + + const teen = choice > 10 && choice < 20; + const endsWithOne = choice % 10 === 1; + + if (!teen && endsWithOne) { + return 1; + } + + if (!teen && choice % 10 >= 2 && choice % 10 <= 4) { + return 2; + } + + return (choicesLength < 4) ? 2 : 3; +} +``` + +这将有效地实现这一目标： + + +```javascript +const messages = { + ru: { + car: '0 машин | 1 машина | {n} машины | {n} машин', + banana: 'нет бананов | 1 банан | {n} банана | {n} бананов' + } +} +``` +格式为 `0 things | 1 thing | few things | multiple things`. + +你的模板仍然需要使用 `$tc()`，而不是 `$t()` ： + +```html +{{ $tc('car', 1) }}
+{{ $tc('car', 2) }}
+{{ $tc('car', 4) }}
+{{ $tc('car', 12) }}
+{{ $tc('car', 21) }}
+ +{{ $tc('banana', 0) }}
+{{ $tc('banana', 4) }}
+{{ $tc('banana', 11) }}
+{{ $tc('banana', 31) }}
+``` + +结果如下： + +```html +1 машина
+2 машины
+4 машины
+12 машин
+21 машина
+ +нет бананов
+4 банана
+11 бананов
+31 банан
+``` diff --git a/vuepress/zh/guide/sfc.md b/vuepress/zh/guide/sfc.md new file mode 100644 index 000000000..59a0e5636 --- /dev/null +++ b/vuepress/zh/guide/sfc.md @@ -0,0 +1,327 @@ +# 单文件组件 + +## 基本用法 + +如果使用单文件组件构建 Vue 组件或 Vue 应用程序，则可以管理 `i18n` 自定义块的语言环境信息。 + +以下是[单文件组件示例](https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc): + +```js +message: {{ $t('hello') }}
+message: {{ $t('hello') }}
+{{ parent.$t('hello') }}
+ +``` diff --git a/vuepress/zh/installation.md b/vuepress/zh/installation.md new file mode 100644 index 000000000..7e21a639c --- /dev/null +++ b/vuepress/zh/installation.md @@ -0,0 +1,66 @@ +# 安装 + +## 兼容性说明 + +- Vue.js `2.0.0`+ + +## 直接下载 / CDN + +
+
+
+
+
+
+
+
+
Vue CLI plugin](https://github.com/kazupon/vue-cli-plugin-i18n)
+
+[ webpack loader for Custom block](https://github.com/kazupon/vue-i18n-loader)
+
+[ Extensions](https://github.com/kazupon/vue-i18n-extensions)
diff --git a/vuepress/zh/legacy/README.md b/vuepress/zh/legacy/README.md
new file mode 100644
index 000000000..95bb62d88
--- /dev/null
+++ b/vuepress/zh/legacy/README.md
@@ -0,0 +1,283 @@
+# 从 v5.x 迁移
+
+## 全局配置
+
+### lang 已被替换
+
+使用 `VueI18n` 类构造函数 `locale` 选项或 `VueI18n#locale` 属性：
+
+```js
+ const i18n = new VueI18n({
+ locale: 'en',
+ // ...
+ })
+ const app = new Vue({ i18n }).$mount('#app')
+
+ // 更改 locale
+ i18n.locale = 'ja'
+ // 或者
+ app.$i18n.locale = 'ja'
+```
+
+### fallbackLang 已被替换
+
+使用 `VueI18n` 类构造函数 `fallbackLocale` 选项或 `VueI18n#fallbackLocale` 属性：
+
+```js
+ const i18n = new VueI18n({
+ locale: 'ja',
+ fallbackLocale: 'en',
+ // ...
+ })
+ const app = new Vue({ i18n }).$mount('#app')
+
+ // 更改 fallback locale
+ i18n.fallbackLocale = 'zh'
+ // 或者
+ app.$i18n.fallbackLocale = 'zh'
+```
+
+### missingHandler 已被替换
+
+使用 `VueI18n` 类构造函数 `missing` 选项或 `VueI18n#missing` 属性：
+
+```js
+const i18n = new VueI18n({
+ // ...
+ missing: (locale, key, vm) => {
+ // 处理翻译缺失
+ },
+ // ...
+})
+const app = new Vue({ i18n }).$mount('#app')
+
+// 改变丢失的处理函数
+i18n.missing = (locale, key, vm) => {
+ // 处理翻译缺失
+}
+// or
+app.$i18n.missing = (locale, key, vm) => {
+ // 处理翻译缺失
+}
+```
+
+### i18nFormatter 已被替换
+
+使用 `VueI18n` 类构造函数 `formatter` 选项或 `VueI18n#formatter` 属性：
+
+```js
+ class CustomFormatter {
+ format (message, ...values) {
+ // 一些渲染逻辑
+ return 'something string'
+ }
+ }
+
+ const i18n = new VueI18n({
+ // ...
+ formatter: new CustomFormatter(),
+ // ...
+ })
+ const app = new Vue({ i18n }).$mount('#app')
+
+ // 更改自定义格式化程序
+ i18n.formatter = {
+ format: (message, ...values) => {
+ // 一些渲染逻辑
+ return 'something string'
+ }
+ }
+ // or
+ app.$i18n.formatter = {
+ format: (message, ...values) => {
+ // 一些渲染逻辑
+ return 'something string'
+ }
+ }
+```
+
+## 全局方法
+
+### Vue.locale 已被替换
+
+使用 `VueI18n` 类构造函数 `messages` 选项，或者使用 `VueI18n#GetLocaleMessage` / `VueI18n#setLocaleMessage` 方法：
+
+```js
+ const i18n = new VueI18n({
+ // ...
+ messages: {
+ en: {
+ hello: 'hello world',
+ // ...
+ },
+ ja: {
+ hello: 'こんにちは、世界',
+ // ...
+ }
+ },
+ // ...
+ })
+ const app = new Vue({ i18n }).$mount('#app')
+
+ // 获取 locale message
+ const en = i18n.getLocaleMessage('en')
+ en.greeting = 'hi!'
+ // 设置 locale message
+ i18n.setLocaleMessage('en', en)
+ // 或者
+ const ja = app.$i18n.getLocaleMessage('ja')
+ ja.greeting = 'やあ！'
+ app.$i18n.setLocaleMessage('ja', ja)
+```
+
+### Vue.t 已被替换
+
+使用 `VueI18n#t` 方法：
+
+```js
+const i18n = new VueI18n({
+ locale: 'en',
+ messages: {
+ en: {
+ greeting: 'hi {name}'
+ }
+ },
+ // ...
+})
+
+i18n.t('greeting', { name: 'kazupon' }) // -> hi kazupon
+```
+
+### Vue.tc 已被替换
+
+使用 `VueI18n#tc` 方法：
+
+```js
+const i18n = new VueI18n({
+ locale: 'en',
+ messages: {
+ en: {
+ apple: 'no apples | one apple | {count} apples'
+ }
+ },
+ // ...
+})
+
+const count = 10
+i18n.tc('apple', count, { count }) // -> 10 apples
+```
+
+### Vue.te 已被替换
+
+使用 `VueI18n#te` 方法：
+
+```js
+const i18n = new VueI18n({
+ locale: 'en',
+ messages: {
+ en: {
+ hello: 'hello world'
+ }
+ },
+ // ...
+})
+
+i18n.te('hello') // -> true
+i18n.te('hallo', 'ja') // -> false
+i18n.te('hello') // -> true
+```
+
+## 构造函数选项
+
+### locales 已被替换
+
+使用 `messages` 的 `VueI18n` 类的构造函数的选项，或 `messages` 的 `i18n` 选项 (针对组件选项)：
+
+```js
+const i18n = new VueI18n({
+ locale: 'en',
+ messages: {
+ en: {
+ greeting: 'hi {name}'
+ }
+ },
+ // ...
+})
+
+// 针对组件选项
+const Component1 = {
+ i18n: {
+ messages: {
+ en: {
+ title: 'Title1'
+ }
+ }
+ }
+}
+```
+
+## 实例属性
+
+### $lang 已被替换
+
+使用 `VueI18n#locale` 属性：
+
+```js
+const i18n = new VueI18n({
+ locale: 'en',
+ // ...
+})
+const app = new Vue({ i18n }).$mount('#app')
+
+// 更改 locale
+i18n.locale = 'ja'
+// 或者
+app.$i18n.locale = 'ja'
+```
+
+## 特性
+
+### 已删除动态语言环境
+
+如果需要动态设置语言环境信息，则应实现以下内容：
+
+```js
+const i18n = new VueI18n({ locale: 'en' })
+const app = new Vue({
+ i18n,
+ data: { loading: '' }
+}).$mount('#app')
+
+function loadLocaleMessage (locale, cb) {
+ return fetch('/locales/' + locale, {
+ method: 'get',
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ }
+ }).then((res) => {
+ return res.json()
+ }).then((json) => {
+ if (Object.keys(json).length === 0) {
+ return Promise.reject(new Error('locale empty !!'))
+ } else {
+ return Promise.resolve(json)
+ }
+ }).then((message) => {
+ cb(null, message)
+ }).catch((error) => {
+ cb(error)
+ })
+}
+
+app.loading = 'loading ...'
+loadLocaleMessage('en', (err, message) => {
+ if (err) {
+ app.loading = ''
+ console.error(err)
+ return
+ }
+ i18n.setLocaleMessage('en', message)
+ app.loading = ''
+})
+```
diff --git a/vuepress/zh/legacy/v5.md b/vuepress/zh/legacy/v5.md
new file mode 100644
index 000000000..40380af59
--- /dev/null
+++ b/vuepress/zh/legacy/v5.md
@@ -0,0 +1,13 @@
+# documentation for v5.x
+
+* [Installation](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/installation.md)
+* [Getting Started](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/started.md)
+* [Formatting](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/formatting.md)
+* [Pluralization](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/pluralization.md)
+* [Locale and Keypath Syntax](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/syntax.md)
+* [Linked Translation](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/linked.md)
+* [Fallback Translation](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/fallback.md)
+* [Component Locale](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/component.md)
+* [Dynamic Locale](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/dynamic.md)
+* [Hot reload](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/hot-reload.md)
+* [API References](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/api.md)
diff --git a/vuepress/zh/started.md b/vuepress/zh/started.md
new file mode 100644
index 000000000..aed1142e1
--- /dev/null
+++ b/vuepress/zh/started.md
@@ -0,0 +1,60 @@
+# 开始
+
+:::tip 说明
+我们将在指南中的代码示例中使用 [ES2015](https://github.com/lukehoban/es6features) 语法。
+:::
+
+## HTML
+
+```html
+
+
+
+{{ $t("message.hello") }}
+こんにちは、世界
+