README

使用 Zora，您可以添加您的 Laravel 语言翻译到您的资产管道中，以便在 Vue 或 React 等 JavaScript 包中使用。

Zora 提供了两个类似于 Laravel 的 JavaScript __() 或 __trans() 翻译辅助函数，使其轻松地在 JavaScript 中使用 Laravel 翻译。

该包的工作方式类似于 Ziggy，但没有 Blade 指令。

Zora 支持 8.x 及以后的 Laravel 所有版本，以及所有现代浏览器。

• 安装
• 设置
  • JavaScript 框架
  • Vue
  • Svelte
• 用法
  • trans() 辅助函数

安装

通过 composer 将 zora 安装到您的 Laravel 应用中

composer require jetstreamlabs/zora --dev

设置

JavaScript 框架

Ziggy 提供了一个 Artisan 命令以将配置和路由输出到文件：php artisan zora:generate。默认情况下，此命令将您的翻译存储在 resources/js/zora.js 中。

由 php artisan zora:generate 生成的文件将类似于以下内容

或者，您可以在 package.json 的开发和构建步骤中将翻译编译到 resources/js 中

"build:assets": "php artisan zora:generate",

// zora.js

const Ziggy = {
    translations: {"en": {"php": {}, "json": {}}};
};
if (typeof window !== 'undefined' && typeof window.Zora !== 'undefined') {
  Object.assign(Zora.routes, window.Zora.routes);
}

export { Zora }

创建一个别名，以便更容易导入 Zora 的核心源文件

// vite.config.js
export default defineConfig({
    resolve: {
        alias: {
            // for other frameworks
            'zora-js': resolve(__dirname, 'vendor/jetstreamlabs/zora/dist/client.js'),
            // for vue 
            'zora-js': resolve(__dirname, 'vendor/jetstreamlabs/zora/dist/index.js'),
            zora: resolve(__dirname, 'vendor/jetstreamlabs/zora/dist/vue.js'),
        },
    },
});

// webpack.mix.js

// Mix v6
const path = require('path');

mix.alias({
    // for other frameworks
    'zora-js': path.resolve(__dirname, 'vendor/jetstreamlabs/zora/dist/client.js'),
    // for Vue  
    'zora-js': path.resolve(__dirname, 'vendor/jetstreamlabs/zora/dist/index.js'),
    zora: path.resolve(__dirname, 'vendor/jetstreamlabs/zora/dist/vue.js'),
});

// Mix v5
const path = require('path');

mix.webpackConfig({
    resolve: {
        alias: {
            // for other frameworks
            'zora-js': path.resolve(__dirname, 'vendor/jetstreamlabs/zora/dist/client.js'),
            // for Vue  
            'zora-js': path.resolve(__dirname, 'vendor/jetstreamlabs/zora/dist/index.js'),
            zora: path.resolve(__dirname, 'vendor/jetstreamlabs/zora/dist/vue.js'),
        },
    },
});

将以下内容添加到您的 app.blade.php 中，以便翻译函数将使用当前区域设置。

<script>
    window.locale = '{{ app()->getLocale() }}';
</script>

最后，导入并像使用其他 JavaScript 库一样使用 Zora。

import { ZoraVue } from 'zora'
import { Zora } from '../zora.js'


// ...

__(key: string, replacers: array, config: Zora)

// or

trans(key: string, replacers: array, config: Zora)

Vue

Zora 包含一个 Vue 插件，可轻松在应用中使用 trans() 或 __() 辅助函数

import { ZoraVue } from 'zora'
import { Zora } from '../zora.js'

然后在您的应用中使用它（注册 Zora 插件）

...
.use(ZoraVue, Zora)

Svelte

目前没有为 svelte 内置集成，但是为了避免传递 Zora 配置对象，您可以创建翻译辅助文件。

// i18n.svelte

<script context="module">
    import { trans as t } from 'zora-js/'
    import { Zora } from '../zora.js'

    // window.locale = document.documentElement.lang; // optional if not set in app.blade.php

    export function __(key, replace, config=Zora){
        return t(key, replace, config);
    }
    export function trans(key, replace, config=Zora){
        return t(key, replace, config);
    }

</script>
 

// Dashboard.svelte
<script>
import {__} from "@/i18n.svelte";
</script>

<div>{__("key")}</div>

用法

trans() 辅助函数

trans() 或 __() 辅助函数的工作方式类似于 Laravel - 您可以传递翻译中的一个键，以及一个键-值对象作为第二个参数，用于替换占位符。

基本用法

// lang/en/messages.php
return [
    'welcome' => 'Welcome to our application!',
]

// Dashbaord.js
__("messages.welcome");  // Welcome to our application!

带参数的用法

// lang/en/messages.php
return [
    'welcome' => 'Welcome, :name',
]

// Dashbaord.js
__("messages.welcome", {"name": "Zora"});  // Welcome, Zora

带多个参数的用法

// lang/en/messages.php
return [
    'welcome' => 'Welcome, :name! There are :count apples.',
]

// Dashbaord.js
__("messages.welcome", {"name": "Zora", "count": 8});  // Welcome, Zora! There are 8 apples.