README

将 Laravel 的翻译推送到前端，并使用 JavaScript 轻松使用。

适用于单页应用（SPA）和前端密集型应用的优秀工具。

如果您对包的工作方式有任何疑问，我们建议您阅读这篇帖子：在 JS 中使用 Laravel 的本地化。

入门

您可以使用 composer 安装此包，运行 composer require conedevelopment/i18n 命令。

视图文件中的翻译

您可以使用 @translations blade 指令。此指令会自动将翻译包裹在 <script> 标签中。

@translations

<!-- The result -->
<script>window['translations'] = { auth: {...}, validation: {...} }</script>

您可以覆盖翻译的默认键。您可以通过传递一个字符串到 blade 指令来实现这一点。

@translations ('myTranslations')

<!-- The result -->
<script>window['myTranslations'] = { auth: {...}, validation: {...} }</script>

发布和使用 JavaScript 库

使用 php artisan vendor:publish 命令，并选择 Pine\I18n\I18nServiceProvider 提供者。发布后，您可以在 resources/js/vendor 文件夹中找到您的最新副本。

使用 I18n.js

然后，您可以将 I18n 类导入并分配给 window 对象。

import I18n from './vendor/I18n';
window.I18n = I18n;

初始化翻译实例

从这一点开始，您可以在应用程序的任何地方初始化翻译服务。

let translator = new I18n;

默认情况下，它使用 window 对象中的 translations 键。如果您想使用在 blade 指令中设置的定制键，请将相同的键传递给构造函数。

let translator = new I18n('myTranslations');

作为 Vue 服务使用

如果您想直接从 Vue 模板中使用它，您可以轻松地扩展 Vue。

Vue.prototype.$I18n = new I18n;

您可以从模板或组件的脚本部分调用它，如下所示

<template>
    <div>{{ $I18n.trans('some.key') }}</div>
</template>

computed: {
    translations: {
        something: this.$I18n.trans('some.key')
    }
}

方法

该包在 JS 端提供两个方法。分别是 trans() 和 trans_choice()。

trans()

trans 方法接受翻译的键和我们想要替换的属性，但这是可选的。

translator.trans('auth.failed');

// These credentials do not match our records.

translator.trans('auth.throttle', { seconds: 60 });

// Too many login attempts. Please try again in 60 seconds.

trans_choice()

trans_choice 方法根据给定的计数决定翻译是否应该被复数化。它也接受我们想要替换的属性。

假设我们有以下翻译行

[
    'attempts' => 'Be careful, you have :attempts attempt left.|You still have :attempts attempts left.',
]

注意

复数和单数版本由 | 字符分隔！

translator.trans_choice('auth.attempts', 1, { attempts: 'only one' });

// Be careful, you have only one attempt left.

translator.trans_choice('auth.attempts', 4, { attempts: 'less than five' });

// You still have less than five attempts left.

就像在 Laravel 中一样，您可以为复数化设置范围。您还可以像以前一样替换占位符。

[
    'apples' => '{0} There are none|[1,19] There are some (:number)|[20,*] There are many (:number)',
]

您可以使用 | 字符分隔多个选择。

translator.trans_choice('messages.apples', 0);

// There are none

translator.trans_choice('auth.attempts', 8, { number: 8 });

// There are some (8)

translator.trans_choice('auth.attempts', 25, { number: 25 });

// There are many (25)

转换替换参数

就像 Laravel 的功能一样，您可以转换您的参数为 uppercase，或者仅将第一个字符转换为大写字母。您只需修改您的占位符。

[
    'welcome' => 'Welcome, :NAME',
    'goodbye' => 'Goodbye, :Name',
]

如果您愿意，您可以在一行中传递具有不同修饰符的相同参数，如 :NAME、:name 或 :Name。

translator.trans('messages.welcome', { name: 'pine' });

// Welcome, PINE

translator.trans('messages.goodbye', { name: 'pine' });

// Goodbye, Pine

包翻译

感谢 Jonathan 的想法，默认支持包翻译。您可以使用预定义的命名空间像在 Laravel 中一样访问翻译。

translator.trans('courier::messages.message');

多语言

支持多语言。您可以在任何时候更改应用程序的语言。幕后，如果存在，将渲染适当的翻译。

回退语言

如果当前语言中没有可用的翻译，程序包将寻找后备地区的翻译。如果在后备地区也没有可用的翻译，缺失的翻译将不会显示。

性能

翻译是在视图编译时生成的。这意味着它们被缓存并以字符串形式存储在编译后的视图中。这种方式比在运行时生成或通过AJAX请求获取翻译更有效率。

在幕后有一个switch-case语句，它根据当前地区确定哪些翻译应该存在。这样只有当前翻译会被推送到window对象，而不是所有翻译。

注意：在本地环境中，缓存的视图会被清除，以保持翻译的新鲜。

贡献

如果您发现了bug或对程序包有任何建议，请随时提出问题。