README

关于 Zorah

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

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

该包在路由方面与 Ziggy 类似，但 没有 Blade 指令。

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

• 关于 Zorah
• 安装
• 设置 - JavaScript 框架 - Vue - Svelte
• 用法 - 翻译助手函数

安装

使用 composer 将 Zorah 安装到您的 Laravel 应用中

composer require zenphp/zorah --dev

设置

JavaScript 框架

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

由 php artisan zorah:generate 生成的文件可能看起来像这样

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

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

// zorah.js

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

export { Zorah }

创建别名以使导入 Zorah 的核心源文件更加容易

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

// webpack.mix.js

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

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

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

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

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

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

最后，像其他 JavaScript 库一样导入和使用 Zorah。

import { ZorahVue } from 'zorah'
import { Zorah } from '../zorah.js'


// ...

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

// or

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

Vue

Zorah 包含一个 Vue 插件，使您能够轻松地在应用程序的任何地方使用 trans() 或 __() 助手函数。

import { ZorahVue } from 'zorah';
import { Zorah } from '../zorah.js';

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

...
.use(ZorahVue, Zorah)

Svelte

Svelte 没有内置集成，但为了避免传递 Zorah 配置对象，您可以创建一个翻译助手文件。

// i18n.svelte

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

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

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

</script>


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

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

用法

翻译助手函数

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: 'Zorah' }); // Welcome, Zorah

多个参数

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

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