README

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

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

如果您对包的工作方式有任何疑问，我们建议您阅读这篇文章：在JavaScript中使用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;

默认情况下，它使用translations键在window对象中。如果您想使用在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的功能一样，您可以转换您的参数为大写，或仅将首字母转换为大写。所有您需要做的，就是修改您的占位符。

[
    '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或者有关于此包的想法，请随时提交一个issue。