antonioprimera / laravel-js-localization

Laravel JS 前端的本地化。

v0.9 2024-08-14 12:58 UTC

This package is auto-updated.

Last update: 2024-09-14 13:08:14 UTC


README

此包提供了一个简单的方法来管理 Laravel 中的本地化,使用 Vue3 和 InertiaJS。虽然它非常具有意见性,但使用起来非常简单,无需额外配置。

工作原理

  1. 您创建 PHP 语言文件,就像您通常在 Laravel 中做的那样
  2. 您运行 npm run lang 命令以监视语言文件的变化并生成相应的 JSON 文件
  3. ServiceProvider 将自动将生成的 JSON 文件(对应于当前区域设置)与您的 InertiaJS 应用程序共享
  4. 您可以在 Vue3 组件中使用 "txt(...)" 辅助函数访问本地化字符串,就像在 Laravel 中使用 __() 辅助函数一样
  5. 就是这样!简单易懂!

安装

composer require antonioprimera/laravel-js-localization

安装包后,您应运行 install 命令,该命令将发布包配置文件并设置必要的 npm 脚本来监视语言文件的变化并生成相应的 JSON 文件。

php artisan js-localization:install

这将执行以下操作

  1. 在项目根目录中创建语言监视器 js 文件的符号链接。
  2. 将 'lang' npm 脚本添加到您的 package.json 文件中,以便您可以运行 'npm run lang' 来启动语言监视器。
  3. laravel-inertia-vue-translatorchalkchokidar npm 包添加到您的 package.json 文件中。最后,它运行 npm install 来安装新添加的 npm 包。
  4. 可选:发布包配置文件(您也可以使用 php artisan vendor:publish --tag=js-localization-config 手动执行此操作)。
  5. 可选:发布语言文件,如果项目根目录中没有 "lang" 文件夹(您也可以使用 php artisan lang:publish 手动执行此操作)。
  6. 为您提供将相应的 Inertia 插件手动添加到您的 Vue3 应用程序的必要步骤(来自步骤 3 中安装的 laravel-inertia-vue-translator 包)。

警告!!!

install 命令包含一些自动化步骤,这些步骤会向您的文件中注入代码。尽管它试图尽可能安全,但始终建议检查对您的文件所做的更改,并保持干净的 Git 历史,这样您就可以在出现问题的情况下轻松回滚更改。

用法

Laravel

为了使用此包,您需要在 lang 目录中创建您的语言文件,就像您通常在 Laravel 中做的那样。您可以为每种语言创建多个文件,每种语言对应于 lang 目录中的一个目录。

目前,此包仅支持 .php 语言文件,但计划未来支持 JSON 文件。

在处理语言文件时,您应使用 npm run lang 命令运行文件监视器。监视器在 lang 目录中为每个找到的区域设置创建一个 _.json 文件,其中包含该区域设置的翻译。这些文件会自动与您的 InertiaJS 应用程序共享,因此您可以在 Vue3 组件中访问翻译(仅共享当前区域设置的翻译)。

此包也处理字符串的复数形式,与Laravel类似。您可以在字符串中使用:count:value:n占位符,当使用txts(...)辅助函数时,它们将被计数值替换。

// resources/lang/en/example.php
return [
    'welcome' => 'Welcome to our application!',
    'apples' => '{0} :name has no apples|{1} :name has one apple|[2,10] :name has :count apples|[11,*] :name has too many apples!',
];

Inertia + Vue3

laravel-inertia-vue-translator包导出2个辅助函数,这些函数直接注册在Inertia对象上,您可以在Vue3模板中使用这些函数来翻译字符串。

  • txt(key, replacements = {}): 此函数用于访问本地化字符串。它的工作方式与Laravel中的__()辅助函数类似。
  • txts(key, count, replacements = {}): 此函数用于访问复数本地化字符串。它的工作方式与Laravel中的__()辅助函数类似,但期望第二个参数为一个数字,该数字用于确定字符串的复数形式。
<template>
    <div>
        <h1>{{ txt('example.welcome') }}</h1>
        <p>{{ txts('example.apples', 5, {name: 'Mary'} }}</p>
    </div>
</template>

为了在Vue3脚本部分使用txt(...)txts(...)辅助函数,您需要从包中导入useTranslator函数,该函数将txt(...)txts(...)函数注入到当前Vue3组件中。

<script setup>
    // Import the useTranslator function from the laravel-inertia-vue-translator package
    import { useTranslator } from 'laravel-inertia-vue-translator';
    
    // Inject the txt(...) and txts(...) functions into the current Vue3 component
    const { txt, txts } = useTranslator();
	
	// Use the txt(...) and txts(...) functions to access the localized strings
    const welcome = txt('example.welcome');
    const apples = txts('example.apples', 5, {name: 'Mary'});
</script>

LocaleManager

此包还提供了一个LocaleManager外观,您可以使用它来在Laravel应用程序中处理地区。外观提供了以下方法

use AntonioPrimera\LaravelJsLocalization\Facades\LocaleManager;

// Get all the available locales via: config('app.available_locales', ['en'])
$locales = LocaleManager::availableLocales();

// Get the default locale via: config('app.locale', 'en')
$defaultLocale = LocaleManager::defaultLocale();

// Get the fallback locale via: config('app.fallback_locale', 'en')
$fallbackLocale = LocaleManager::fallbackLocale();

// Get the current locale via: app()->getLocale()
$locale = LocaleManager::currentLocale();

// Get the locale for the authenticated user, fallback to the session locale and then to the default locale
$userLocale = LocaleManager::authenticatedUserLocale();

// Set the locale for the current request and store it in the session
LocaleManager::setLocale('en');

// Store the locale in the session (will not change the current locale)
LocaleManager::setSessionLocale('en');

// Get the locale from the session
$locale = LocaleManager::sessionLocale();

// Check if a locale is available (checks the available locales)
$available = LocaleManager::isValidLocale('en');

配置

运行install命令后,包的配置文件会被发布到Laravel应用程序的config目录。您可以使用此文件根据需要配置包。

以下是默认配置文件,其中解释了默认值

return [
	/**
	 * The folder where the language files are stored, relative to the project root
	 *
	 * By default, the language files are stored in the 'lang' folder in the project root.
	 */
	'language-folder' => 'lang',
	
	/**
	 * The class that sets the locale in the app
	 *
	 * This class must implement AntonioPrimera\LaravelJsLocalization\Interfaces\LocaleSetter.
	 * By default, the UserSessionLocaleSetter is used, which tries to determine the locale from the authenticated user,
	 * if a user is logged in, then falls back to the session locale, and finally to the default app locale.
	 * Replace this with your own class if you have a different way of determining the locale.
	 */
	'locale-setter' => \AntonioPrimera\LaravelJsLocalization\LocaleSetters\UserSessionLocaleSetter::class,
	
	/**
	 * The property of the authenticated user model that holds the locale
	 *
	 * If you have a property in your user model, that holds the locale of the user, you can set it here,
	 * and the locale will be set to the value of this property when the user is authenticated.
	 * You can leave it commented out if you don't have such a property on your user model.
	 */
	'user-locale-property' => 'language',
];

相关资源