Articles

Guia pas a pas de localització de Laravel, tutorial amb exemples

Com localitzar un projecte de Laravel, com desenvolupar un projecte a Laravel i fer-lo usable en diversos idiomes. En aquest article veiem com treballar amb fitxers de traducció, crear un commutador d'idiomes i més amb exemples.

Laravel és una aplicació pensada per ser local, per adaptar-se a diferents idiomes i cultures. La localització adapta aplicacions internacionalitzades a un idioma específic mitjançant la traducció.

requisits previs

  • En aquest article ens referirem Laravel versió 8.x;
  • Per seguir amb èxit aquest tutorial, cal tenir els coneixements necessaris del llenguatge de programació PHP i del framework Laravel.
  • El teu domini és localhost. Si no, substituïu localhost amb el vostre propi nom de domini o adreça IP (segons la vostra instal·lació).

Treballar amb fitxers de traducció

A Laravel, igual que en molts altres frameworks, podem emmagatzemar traduccions per a diferents idiomes en fitxers separats. Hi ha dues maneres d'organitzar els fitxers de traducció de Laravel:

  • Un enfocament anterior que emmagatzema fitxers a la ubicació següent: resources/lang/{en,fr,ru}/{myfile.php};
  • Un nou enfocament que emmagatzema fitxers a la ubicació següent: resources/lang/{fr.json, ru.json};

Per als idiomes que difereixen segons el territori, hauríeu de nomenar-los directory/file de l'idioma segons la norma ISO 15897. Per exemple, per a l'anglès del Regne Unit utilitzaríeu en_GB en lloc de en-gb. En aquest article, ens centrarem en el segon enfocament, però el mateix passa amb el primer (excepte per com s'anomenen i es recuperen les claus de traducció). 

Traduccions senzilles

Ara, anem al resources/views/welcome.blade.phparxivar i substituir el contingut del fitxer bodyetiqueta amb la nostra, així:

<body class="antialiased">
    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            <div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
                Welcome to our website
            </div>
        </div>
    </div>
</body>

Començarem preparant el nostre missatge de benvinguda de localització, que és molt fàcil a Laravel. Tot el que has de fer és substituir el text "Benvinguts al nostre lloc web" pel codi següent: {{ __('Welcome to our website') }}. Això indicarà a Laravel que mostri "Benvingut al nostre lloc web" de manera predeterminadadefinit i cerqueu traduccions d'aquesta cadena si s'ha establert un idioma diferent de l'anglès (en parlarem més endavant). L'anglès s'establirà com a idioma predeterminatdefifinal de la nostra aplicació, per tant, per defectedefiAl final, simplement mostrarem el text "Benvingut al nostre lloc web". Si la configuració regional és diferent, intentarem trobar la traducció coincident i es crearà en un moment.

Localització de Laravel

Però, com sap Laravel quin és l'idioma actual o quins idiomes estan disponibles a l'aplicació? Ho fa mirant la configuració local a l'aplicació config/app.php. Obriu aquest fitxer i cerqueu aquestes dues claus de matriu associatives:

/*
|--------------------------------------------------------------------------
| Application Locale Configuration
|--------------------------------------------------------------------------
|
| The application locale determines the default locale that will be used
| by the translation service provider. You are free to set this value
| to any of the locales which will be supported by the application.
|
*/
'locale' => 'en',
/*
|--------------------------------------------------------------------------
| Application Fallback Locale
|--------------------------------------------------------------------------
|
| The fallback locale determines the locale to use when the current one
| is not available. You may change the value to correspond to any of
| the language folders that are provided through your application.
|
*/
'fallback_locale' => 'en',

Les descripcions que es mostren a sobre de les tecles haurien de ser autoexplicatives, però en resum, la clau locale conté el pre localdefifinal de la vostra aplicació (almenys, si no s'ha establert cap altra configuració regional al codi). I la fallback_locale s'activa en cas que establim una configuració regional inexistent a la nostra aplicació.

Mentre tinguem aquest fitxer obert, afegim una nova clau per a la nostra comoditat, enumerant totes les configuracions regionals que admetrà la nostra aplicació. Ho farem servir més endavant quan afegim un commutador local. Tanmateix, aquesta és una tasca opcional, ja que Laravel no ens requereix que la fem.

/*
|--------------------------------------------------------------------------
| Available locales
|--------------------------------------------------------------------------
|
| List all locales that your application works with
|
*/
'available_locales' => [
  'English' => 'en',
  'Italian' => 'it',
  'French' => 'fr',
],

Ara la nostra aplicació admet tres idiomes: anglès, italià i francès.

Fitxers de traducció

Ara que hem establert totes les ubicacions amb les quals treballarem, podem seguir endavant i passar a traduir el nostre missatge de benvinguda prèviadefinit.

Comencem afegint nous fitxers de localització a la carpeta resources/lang. Primer, creeu un fitxer resources/lang/it.json i afegiu-hi les traduccions corresponents, de la manera següent:

{
  "Welcome to our website": "Benvenuto nel nostro sito web"
}

A continuació, creeu un fitxer resources/lang/fr.json:

{

"Benvingut al nostre lloc web": "Benvingut al nostre lloc"

}

Com podeu veure, sempre ens referim al missatge previdefinito que hem afegit al fitxer welcome.blade.php (que era {{ __('Welcome to our website') }}). El motiu pel qual no hem de crear un fitxer en.json és perquè Laravel ja sap quins missatges passem per configuració prèviadefiacabat a la funció __() són per al nostre pre localdefinito en.

Canvi local a Laravel

En aquest moment, Laravel no sap com canviar les localitzacions, així que de moment, fem les traduccions directament dins del camí. Modifiqueu el camí de benvinguda prèviamentdefiacabat com es mostra a continuació:

Route::get('/{locale?}', function ($locale = null) {
    if (isset($locale) && in_array($locale, config('app.available_locales'))) {
        app()->setLocale($locale);
    }
    
    return view('welcome');
});

Ara podem visitar el nostre lloc web, especificant qualsevol dels idiomes disponibles com a primer segment de camí: per exemple, localhost/rulocalhost/fr. Hauríeu de veure el contingut localitzat. En cas que especifiqueu una configuració regional no compatible o no especifiqueu cap configuració regional, Laravel utilitzarà enper defectedefinita.

Middleware

Canviar la configuració regional per a cada enllaç del lloc pot no ser el que voleu i és possible que no sembli tan net estèticament. És per això que farem la configuració d'idioma mitjançant un commutador d'idioma especial i utilitzarem la sessió d'usuari per mostrar el contingut traduït. Per tant, creeu un nou middleware dins del app/Http/Middleware/Localization.phpfitxer o executant-lo artisan make:middleware Localization.

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\App;
use Illuminate\Support\Facades\Session;

class Localization
{
    /**
    * Handle an incoming request.
    *
    * @param  \Illuminate\Http\Request  $request
    * @param  \Closure  $next
    * @return mixed
    */
    public function handle(Request $request, Closure $next)
    {
        if (Session::has('locale')) {
            App::setLocale(Session::get('locale'));
        }
        return $next($request);
    }
}

Aquest programari intermedi indicarà a Laravel que utilitzi la configuració regional seleccionada per l'usuari si aquesta selecció està present a la sessió.

Com que necessitem que això es faci a cada sol·licitud, també hem d'afegir-lo a la pila de programari intermediari predefiacabat en app/http/Kernel.phpper al webgrup de middleware:

* The application's route middleware groups.
*
* @var array
*/
protected $middlewareGroups = [
  'web' => [
      \App\Http\Middleware\EncryptCookies::class,
      \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
      \Illuminate\Session\Middleware\StartSession::class,
      // \Illuminate\Session\Middleware\AuthenticateSession::class,
      \Illuminate\View\Middleware\ShareErrorsFromSession::class,
      \App\Http\Middleware\VerifyCsrfToken::class,
      \Illuminate\Routing\Middleware\SubstituteBindings::class,
      \App\Http\Middleware\Localization::class, /* <--- add this */
  ],

Canvia de rumb

A continuació, hem d'afegir un camí per canviar la configuració regional. Estem utilitzant una ruta de tancament, però podeu utilitzar exactament el mateix codi dins del vostre controlador si voleu:

Route::get('language/{locale}', function ($locale) {
    app()->setLocale($locale);
    session()->put('locale', $locale);

    return redirect()->back();
});

A més, no us oblideu d'eliminar la configuració regional que s'ha afegit anteriorment al nostre camí de benvinguda prèviadefinit:

Route::get('/', function () {
    return view('welcome');
});

Un cop fet això, l'única manera perquè l'usuari canviï l'idioma establert actualment és introduint-lo localhost/language/{locale}. la localeLa selecció s'emmagatzemarà dins de la sessió i redirigirà els usuaris cap a on provenen (marqueu el Localizationmiddleware). Per provar-ho, aneu a localhost/language/ru(sempre que la vostra galeta de sessió estigui present al vostre navegador) i veureu el contingut traduït. Podeu moure't lliurement pel lloc web o provar d'actualitzar la pàgina i veure que l'idioma seleccionat es conserva.

El commutador

Ara hem de crear alguna cosa que l'usuari pugui fer clic per canviar l'idioma en lloc d'introduir manualment els codis locals a l'URL. Per fer-ho, afegirem un verificador de llenguatge molt senzill. Per tant, crea un nou resources/views/partials/language_switcher.blade.phpfitxer amb el codi següent:

<div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
    @foreach($available_locales as $locale_name => $available_locale)
        @if($available_locale === $current_locale)
            <span class="ml-2 mr-2 text-gray-700">{{ $locale_name }}</span>
        @else
            <a class="ml-1 underline ml-2 mr-2" href="language/{{ $available_locale }}">
                <span>{{ $locale_name }}</span>
            </a>
        @endif
    @endforeach
</div>

Inclou el commutador acabat de crear a la vista "benvinguda":

<body class="antialiased">
    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            @include('partials/language_switcher')
            <div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
                {{ __('Welcome to our website') }}
            </div>
        </div>
    </div>
</body>

Obriu el app/Providers/AppServiceProvider.phpfitxer i afegiu el codi per compartir quan es compondrà el nostre commutador d'idiomes. Concretament, compartirem la configuració regional actual a la qual es pot accedir com a fitxer {{ $current_locale }}.

Butlletí d'innovació
No et perdis les notícies més importants sobre innovació. Registra't per rebre'ls per correu electrònic.

Opcions de traducció avançades en PHP Laravel

Treballarem principalment amb resources/views/welcome.blade.php, de manera que tot ha de passar en la nostra visió de benvinguda tret que s'especifiqui el contrari.

Paràmetres en cadenes de traducció

Per exemple, saludem al nostre usuari imaginari (Amanda) en lloc de mostrar només un missatge genèric:

{{ __('Welcome to our website, :Name', ['name' => 'caroline']) }}

Tingueu en compte que hem utilitzat el nom amb la primera lletra en minúscula, però el marcador de posició amb la primera lletra en majúscula. D'aquesta manera, Laravel us pot ajudar a posar automàticament en majúscula la paraula real. Això passarà si el marcador de posició comença amb una lletra majúscula, per exemple, :Nameprodueix "Caroline" o una paraula completament en majúscula,  :NAME, produeix “CAROLINE”.

També actualitzem els nostres fitxers de traducció resources/lang/fr.jsonresources/lang/it.json , ja que de moment només veurem la versió en anglès a qualsevol lloc ja que les claus de traducció no coincideixen amb les traduccions.

francès:

{

   "Welcome to our website, :Name": "Bienvenue sur notre site, :Name"

}

italià:

{

   "Welcome to our website, :Name": "Benvenuto sul nostro sito web, :Name"

}

Pluralització

Per veure la pluralització en acció, afegim un nou paràgraf de text. 

Per dur a terme la pluralització, heu d'utilitzar la funció trans_choice en lloc de __(), per exemple:

{{ __('Welcome to our website, :Name', ['name' => 'caroline']) }}
<br>
{{ trans_choice('There is one apple|There are many apples', 2) }}

Com podeu veure, les formes plurals estan separades per a |.

Ara, què passa si necessitem múltiples formes plurals? 

Això també és possible:

{{ trans_choice('{0} There :form no apples|{1} There :form just :count apple|[2,19] There :form :count apples', 24) }}

En aquest cas, permetem els números 01, i de 219, i finalment de 20 en endavant. Per descomptat, podeu afegir tantes regles com necessiteu.

I si volem els marcadors de posició en les nostres formes plurals? 

{{ trans_choice('{0} There :form no apples|{1} There :form just :count apple|[2,19] There :form :count apples', 24, ['form' => 'is']) }}

També podem utilitzar el recompte passat a `trans_choice` si cal utilitzant un marcador de posició :count especial:

{{ trans_choice('{0} There :form no apples|{1} There :form just :count apple|[2,19] There :form :count apples', 1, ['form' => 'is']) }}

Finalment, no oblideu actualitzar els fitxers de traducció amb els canvis que hàgiu fet a la traducció base.

italià:

{
  "Welcome to our website, :Name": "Benvenuto nel nostro sito, :Name",
  "{0} There :form no apples|{1} There :form just :count apple|[2,19] There :form :count apples": "{0} Nessuna mela|{1} C'è:count mela|[2,19] Ci sono :count mele"
}

francès:

{    
  "Welcome to our website, :Name": "Bienvenue sur notre site, :Name",
  "{0} There :form no apples|{1} There :form just :count apple|[2,19] There :form :count apples": "{0} Il n'y a pas de pommes|{1} Il n'y :form :count pomme|[2,19] Il y :form :count pommes"
}

Treballant amb dates localitzades a Laravel

Per localitzar dates, aprofitarem el poder de Carboni , que ve amb Laravel per defectedefinita. Consulteu el Documentació de carboni ; pots fer moltes coses interessants. Per exemple, podem establir la nostra configuració regional amb regles de data i hora.

Per al nostre exemple senzill, mostrarem la data actual localitzada per a l'idioma seleccionat. En la nostra routes/web.php, actualitzem el camí de la pàgina de benvinguda i passem el missatge de data localitzat al nostre view Benvingut:

<?php
Route::get('/', function () {
    $today = \Carbon\Carbon::now()
        ->settings(
            [
                'locale' => app()->getLocale(),
            ]
        );

    // LL is macro placeholder for MMMM D, YYYY (you could write same as dddd, MMMM D, YYYY)
    $dateMessage = $today->isoFormat('dddd, LL');

    return view('welcome', [
        'date_message' => $dateMessage
    ]);
});

Actualitzem resources/views/welcome.blade.php afegint la visualització de la data, així:

{{ __('Welcome to our website, :Name', ['name' => 'amanda']) }}
<br>
{{ trans_choice('{0} There :form :count apples|{1} There :form just :count apple|[2,19] There :form :count apples', 1, ['form' => 'is']) }}
<br>
{{ $date_message }}

S'està intentant canviar l'idioma a la pàgina d'inici de localhost, veurem que ara les dates estan localitzades, per exemple:

Formatar números i monedes amb NumberFormatter

En diferents països, les persones utilitzen diferents formats per representar números, per exemple:

  • Estats Units → 123.123,12
  • França → 123 123,12

Per tant, per reflectir aquestes diferències a la vostra aplicació Laravel, podeu utilitzar NumberFormatter de la següent manera:

<?php
$num = NumberFormatter::create('en_US', NumberFormatter::DECIMAL);

$num2 = NumberFormatter::create('fr', NumberFormatter::DECIMAL);

També podeu escriure el número en un idioma determinat i mostrar alguna cosa com "cent vint-i-tres mil cent vint-i-tres punt un dos":

<?php
$num = NumberFormatter::create('en_US', NumberFormatter::SPELLOUT);
$num2 = NumberFormatter::create('fr', NumberFormatter::SPELLOUT);

A més, NumberFormatter us permet localitzar fàcilment monedes, per exemple:

<?php
$currency1 = NumberFormatter::create('fr', NumberFormatter::CURRENCY);
$currency2 = NumberFormatter::create('en_US', NumberFormatter::CURRENCY);

Així per fr veuràs euros, mentre per en_US la moneda serà en dòlars dels EUA.

Ercole Palmeri

Butlletí d'innovació
No et perdis les notícies més importants sobre innovació. Registra't per rebre'ls per correu electrònic.

Articles recents

Intervenció innovadora en Realitat Augmentada, amb un visor Apple al Policlínic de Catània

Es va realitzar una operació d'oftalmoplàstia amb el visualitzador comercial Apple Vision Pro a la Policlínica de Catània...

3 maig 2024

Els avantatges de les pàgines per pintar per a nens: un món de màgia per a totes les edats

El desenvolupament de la motricitat fina a través del color prepara els nens per a habilitats més complexes com escriure. Per acolorir...

2 maig 2024

El futur és aquí: com la indústria naviliera està revolucionant l'economia global

El sector naval és una veritable potència econòmica mundial, que ha navegat cap a un mercat de 150 milions...

1 maig 2024

Els editors i OpenAI signen acords per regular el flux d'informació processada per la Intel·ligència Artificial

Dilluns passat, el Financial Times va anunciar un acord amb OpenAI. FT autoritza el seu periodisme de classe mundial...

30 2024 abril