khamsolt / i18n
将翻译推送到前端。
Requires
- php: ^7.2.5
- laravel/framework: ^6.0|^7.0
Requires (Dev)
- orchestra/testbench: ~5.0.0
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。