khamsolt/i18n

将翻译推送到前端。

维护者

详细信息

github.com/khamsolt/laravi18

源代码

安装: 1

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 0

分支: 21

类型:项目

v0.8.0 2020-03-09 08:50 UTC

README

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

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

如果您对包的工作原理有任何疑问,我们建议您阅读这篇帖子:使用Laravel的本地化在JS中

入门指南

您可以使用composer安装此包,运行composer require thepinecode/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的功能中一样,您可以将您的参数转换为大写,或者只将第一个字符转换为大写字母。您只需要修改占位符。

[
    '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对象,而不是所有翻译。

限制

不支持JSON文件翻译!只能使用基于PHP数组的键-值翻译。另外,请注意放置和使用翻译的方式应符合Laravel的要求。

贡献

如果您发现了错误或对包有想法,请随时提交一个issue。