Localización paso a paso de Laravel [Guía]

por Aorinka Anendya
4 de octubre de 2024

Blog > Guía > Localización de Laravel paso a paso [Guía]

Laravel es una potente herramienta que permite a los desarrolladores crear sitios web multilingües. Al implementar la localización web en tus proyectos de Laravel , puedes ofrecer una experiencia de usuario personalizada a visitantes de diferentes orígenes lingüísticos, ampliando así tu alcance y mejorando la participación de los usuarios.

¡Te guiaremos a través de la implementación de la localización en tu aplicación Laravel y te presentaremos una herramienta que puede simplificar y mejorar tus esfuerzos de localización!

¿Por qué deberías localizar el sitio web de Laravel ?

Aquí tienes algunas razones importantes por las que deberías localizar tu sitio web Laravel .

Llega a una audiencia global: Al localizar tu sitio web Laravel , puedes ampliar el alcance de tu aplicación a una audiencia internacional. Esto permite que usuarios de diferentes países y orígenes lingüísticos comprendan e interactúen con tu contenido.
Mejora la experiencia del usuario: La localización permite a los usuarios interactuar con la aplicación en su idioma nativo, lo que mejora significativamente la experiencia del usuario. Esto puede aumentar las tasas de interacción, reducir las tasas de rebote y aumentar las conversiones.
Ventaja competitiva: En un mercado global competitivo, ofrecer aplicaciones en varios idiomas puede proporcionar una ventaja significativa sobre los competidores. Demuestra su compromiso con los mercados internacionales y puede ayudarle a entrar en nuevos mercados de forma más eficaz.
Mejora el SEO: Los sitios web bien localizados tienden a posicionarse mejor en los motores de búsqueda para búsquedas en un idioma concreto. Esto puede aumentar el tráfico de tu blog y la visibilidad online en diversos mercados con traducción multilingüe.

Requisitos para una localización multilingüe de Laravel

Hay algunos requisitos y pasos a considerar al implementar la localización multilingüe en Laravel.

Para obtener las últimas funciones de localización, asegúrate de usar la última versión de Laravel (por ejemplo, la versión 10.x).
Un conocimiento básico de PHP y del framework Laravel será útil en el proceso de implementación.
Configura un entorno de desarrollo local o un servidor que sea compatible con Laravel, incluido un servidor web y una base de datos.
Determina los idiomas que tu aplicación admitirá desde el principio.

Traducciones sencillas de Laravel

Después de comprender qué requisitos deben cumplirse antes de traducir una aplicación o web Laravel , proporcionaremos algunos pasos para traducir Laravel de forma sencilla.

Para hacer esto, abre el archivo de vista que deseas localizar, por ejemplo, resources/views/welcome.blade.php. Luego, reemplaza la etiqueta body con el siguiente código.

				
					<body class="antialiased">
    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 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 Linguise website!
            </div>
        </div>
    </div> <script data-no-optimize="1">window.lazyLoadOptions=Object.assign({},{threshold:300},window.lazyLoadOptions||{});!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function o(t){return e({},at,t)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,vt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,vt,e)}function i(t){return s(t,null),0}function r(t){return null===c(t)}function u(t){return c(t)===_t}function d(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function f(t,e){et?t.classList.add(e):t.className+=(t.className?" ":"")+e}function _(t,e){et?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function v(t,e){!e||(e=e._observer)&&e.unobserve(t)}function b(t,e){t&&(t.loadingCount+=e)}function p(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function h(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function m(t){return!!t[lt]}function E(t){return t[lt]}function I(t){return delete t[lt]}function y(e,t){var n;m(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[lt]=n)}function L(a,t){var o;m(a)&&(o=E(a),t.forEach(function(t){var e,n;e=a,(t=o[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function k(t,e,n){f(t,e.class_loading),s(t,st),n&&(b(n,1),d(e.callback_loading,t,n))}function A(t,e,n){n&&t.setAttribute(e,n)}function O(t,e){A(t,rt,l(t,e.data_sizes)),A(t,it,l(t,e.data_srcset)),A(t,ot,l(t,e.data_src))}function w(t,e,n){var a=l(t,e.data_bg_multi),o=l(t,e.data_bg_multi_hidpi);(a=nt&&o?o:a)&&(t.style.backgroundImage=a,n=n,f(t=t,(e=e).class_applied),s(t,dt),n&&(e.unobserve_completed&&v(t,e),d(e.callback_applied,t,n)))}function x(t,e){!e||0<e.loadingCount||0<e.toLoadCount||d(t.callback_finish,e)}function M(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function N(t){return!!t.llEvLisnrs}function z(t){if(N(t)){var e,n,a=t.llEvLisnrs;for(e in a){var o=a[e];n=e,o=o,t.removeEventListener(n,o)}delete t.llEvLisnrs}}function C(t,e,n){var a;delete t.llTempImage,b(n,-1),(a=n)&&--a.toLoadCount,_(t,e.class_loading),e.unobserve_completed&&v(t,n)}function R(i,r,c){var l=g(i)||i;N(l)||function(t,e,n){N(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";M(t,a,e),M(t,"error",n)}(l,function(t){var e,n,a,o;n=r,a=c,o=u(e=i),C(e,n,a),f(e,n.class_loaded),s(e,ut),d(n.callback_loaded,e,a),o||x(n,a),z(l)},function(t){var e,n,a,o;n=r,a=c,o=u(e=i),C(e,n,a),f(e,n.class_error),s(e,ft),d(n.callback_error,e,a),o||x(n,a),z(l)})}function T(t,e,n){var a,o,i,r,c;t.llTempImage=document.createElement("IMG"),R(t,e,n),m(c=t)||(c[lt]={backgroundImage:c.style.backgroundImage}),i=n,r=l(a=t,(o=e).data_bg),c=l(a,o.data_bg_hidpi),(r=nt&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),k(a,o,i)),w(t,e,n)}function G(t,e,n){var a;R(t,e,n),a=e,e=n,(t=Et[(n=t).tagName])&&(t(n,a),k(n,a,e))}function D(t,e,n){var a;a=t,(-1<It.indexOf(a.tagName)?G:T)(t,e,n)}function S(t,e,n){var a;t.setAttribute("loading","lazy"),R(t,e,n),a=e,(e=Et[(n=t).tagName])&&e(n,a),s(t,_t)}function V(t){t.removeAttribute(ot),t.removeAttribute(it),t.removeAttribute(rt)}function j(t){h(t,function(t){L(t,mt)}),L(t,mt)}function F(t){var e;(e=yt[t.tagName])?e(t):m(e=t)&&(t=E(e),e.style.backgroundImage=t.backgroundImage)}function P(t,e){var n;F(t),n=e,r(e=t)||u(e)||(_(e,n.class_entered),_(e,n.class_exited),_(e,n.class_applied),_(e,n.class_loading),_(e,n.class_loaded),_(e,n.class_error)),i(t),I(t)}function U(t,e,n,a){var o;n.cancel_on_exit&&(c(t)!==st||"IMG"===t.tagName&&(z(t),h(o=t,function(t){V(t)}),V(o),j(t),_(t,n.class_loading),b(a,-1),i(t),d(n.callback_cancel,t,e,a)))}function $(t,e,n,a){var o,i,r=(i=t,0<=bt.indexOf(c(i)));s(t,"entered"),f(t,n.class_entered),_(t,n.class_exited),o=t,i=a,n.unobserve_entered&&v(o,i),d(n.callback_enter,t,e,a),r||D(t,n,a)}function q(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function H(t,o,i){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?$(t.target,t,o,i):(e=t.target,n=t,a=o,t=i,void(r(e)||(f(e,a.class_exited),U(e,n,a,t),d(a.callback_exit,e,n,t))));var e,n,a})}function B(e,n){var t;tt&&!q(e)&&(n._observer=new IntersectionObserver(function(t){H(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function J(t){return Array.prototype.slice.call(t)}function K(t){return t.container.querySelectorAll(t.elements_selector)}function Q(t){return c(t)===ft}function W(t,e){return e=t||K(e),J(e).filter(r)}function X(e,t){var n;(n=K(e),J(n).filter(Q)).forEach(function(t){_(t,e.class_error),i(t)}),t.update()}function t(t,e){var n,a,t=o(t);this._settings=t,this.loadingCount=0,B(t,this),n=t,a=this,Y&&window.addEventListener("online",function(){X(n,a)}),this.update(e)}var Y="undefined"!=typeof window,Z=Y&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),tt=Y&&"IntersectionObserver"in window,et=Y&&"classList"in document.createElement("p"),nt=Y&&1<window.devicePixelRatio,at={elements_selector:".lazy",container:Z||Y?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",it="srcset",rt="sizes",ct="poster",lt="llOriginalAttrs",st="loading",ut="loaded",dt="applied",ft="error",_t="native",gt="data-",vt="ll-status",bt=[st,ut,dt,ft],pt=[ot],ht=[ot,ct],mt=[ot,it,rt],Et={IMG:function(t,e){h(t,function(t){y(t,mt),O(t,e)}),y(t,mt),O(t,e)},IFRAME:function(t,e){y(t,pt),A(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){y(t,pt),A(t,ot,l(t,e.data_src))}),y(t,ht),A(t,ct,l(t,e.data_poster)),A(t,ot,l(t,e.data_src)),t.load()}},It=["IMG","IFRAME","VIDEO"],yt={IMG:j,IFRAME:function(t){L(t,pt)},VIDEO:function(t){a(t,function(t){L(t,pt)}),L(t,ht),t.load()}},Lt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,o=this._settings,i=W(t,o);{if(p(this,i.length),!Z&&tt)return q(o)?(e=o,n=this,i.forEach(function(t){-1!==Lt.indexOf(t.tagName)&&S(t,e,n)}),void p(n,0)):(t=this._observer,o=i,t.disconnect(),a=t,void o.forEach(function(t){a.observe(t)}));this.loadAll(i)}},destroy:function(){this._observer&&this._observer.disconnect(),K(this._settings).forEach(function(t){I(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;W(t,n).forEach(function(t){v(t,e),D(t,n,e)})},restoreAll:function(){var e=this._settings;K(e).forEach(function(t){P(t,e)})}},t.load=function(t,e){e=o(e);D(t,e)},t.resetStatus=function(t){i(t)},t}),function(t,e){"use strict";function n(){e.body.classList.add("litespeed_lazyloaded")}function a(){console.log("[LiteSpeed] Start Lazy Load"),o=new LazyLoad(Object.assign({},t.lazyLoadOptions||{},{elements_selector:"[data-lazyloaded]",callback_finish:n})),i=function(){o.update()},t.MutationObserver&&new MutationObserver(i).observe(e.documentElement,{childList:!0,subtree:!0,attributes:!0})}var o,i;t.addEventListener?t.addEventListener("load",a,!1):t.attachEvent("onload",a)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||(sessionStorage.getItem("litespeed_reloaded")?console.log("LiteSpeed: skipping guest vary reload (already reloaded this session)"):fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),sessionStorage.setItem("litespeed_reloaded","1"),window.location.reload(!0))}));</script><script data-optimized="1" src="https://www.linguise.com/wp-content/litespeed/js/713faf65bbb27a76c90566b191e12207.js?ver=ad2e5" defer></script></body>

Como puedes ver, el texto anterior está escrito actualmente directamente en el código. Esto es menos eficiente y dificulta traducir sitios web a diferentes idiomas (internacionalización).

Vamos a hacer que el texto anterior sea más flexible para que pueda adaptarse fácilmente a diferentes idiomas. Laravel proporciona una característica muy útil para esto: el sistema de localización. Como primer paso, reemplace el texto existente con el siguiente código.

				
					{{ __('Welcome to Linguise website!') }}

Laravel mostrará el texto anterior de forma predeterminada y buscará la traducción si el usuario selecciona un idioma distinto del inglés. En este caso, el inglés se utilizará como idioma predeterminado de la aplicación.

Configurar locales en una web multilingüe de Laravel

Pero, ¿cómo determina Laravel el idioma actual o sabe qué idiomas están disponibles en la aplicación? Comprueba la configuración regional en el archivo config/app.php. Abre este archivo y busca las dos claves siguientes.

				
					/*
|--------------------------------------------------------------------------
| 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',

La explicación anterior a las claves debería ser clara. En resumen, la clave locale contiene la configuración regional predeterminada de tu aplicación (si no se especifica otra configuración regional en el código). La fallback_locale se activa si se solicita una configuración regional inexistente en tu aplicación.

Ahora, añadamos una nueva clave a este archivo para proporcionar una lista de todos los idiomas admitidos.

				
					/*
|--------------------------------------------------------------------------
| Available locales
|--------------------------------------------------------------------------
|
| List all locales that your application works with
|
*/

'available_locales' => [
  'English' => 'en',
  'Italian' => 'it',
  'French' => 'fr',
],

En este punto, hemos probado Laravel web para admitir tres idiomas, a saber, inglés, italiano y francés.

Descripción general de los archivos de traducción de Laravel

En Laravel, como en muchos otros frameworks, las traducciones para diferentes idiomas se almacenan en archivos separados. Se utilizan dos métodos para organizar estos archivos de traducción.

El método anterior almacena los archivos en la siguiente estructura: resources/lang/{en,fr,it}/{myfile.php}. El método más reciente utiliza archivos JSON, como resources/lang/{fr.json, it.json}. Este artículo se centrará en el método más reciente, aunque los principios son similares para el método anterior, salvo por las diferencias en cómo se nombran y se accede a las claves de traducción.

Para idiomas con variaciones regionales, debe nombrar los directorios o archivos de idioma según el estándar ISO 15897. Por ejemplo, el inglés británico se nombraría en_GB en lugar de en-gb.

Información general

En Laravel, como ocurre con muchos frameworks, las traducciones para diferentes idiomas se almacenan en archivos separados. Existen dos métodos principales para organizar los archivos de traducción de Laravel .

El enfoque heredado implica almacenar archivos en la ruta: resources/lang/{en,fr,it}/{myfile.php}.
El enfoque moderno utiliza los archivos resources/lang/{fr.json, it.json}.

Este artículo se centrará en el segundo método, aunque los principios son aplicables a ambos (con variaciones en cómo se nombran y se accede a las claves de traducción).

Para los idiomas que varían según la región, se recomienda nombrar los directorios/archivos de idioma según los estándares ISO 15897. Por ejemplo, el inglés británico se denotaría como en_GB en lugar de en-gb.

Crear archivos de traducción de Laravel

Una vez configurados los locales para nuestra aplicación, podemos proceder a traducir nuestro mensaje de bienvenida predeterminado.

Empecemos creando nuevos archivos de localización en formato JSON dentro del directorio resources/lang. Primero, crearemos un archivo resources/lang/it.json y lo rellenaremos con las traducciones adecuadas.

				
					{
  "Welcome to Linguise website!": "Benvenuti nel sito web di Linguise!"
}

A continuación, añade un archivo resources/lang/fr.json.

				
					{
 "Welcome to Linguise website!": "Bienvenue sur le site de Linguise"
}

Como puedes observar, estamos haciendo referencia de forma consistente al mensaje predeterminado del archivo welcome.blade.php ({{ __(‘¡Bienvenido al sitio web de Linguise !’) }}). No es necesario crear un archivo en.json, ya que Laravel reconoce automáticamente que los mensajes predeterminados están en inglés.

Configurar el selector de idioma en una aplicación multilingüe de Laravel

Además, Laravel aún no está configurado para sobrescribir el idioma local, así que por ahora, gestionaremos la traducción directamente dentro de la ruta. Modifica la ruta de bienvenida predeterminada dentro del archivo routes/web.php así.

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

En este caso, capturamos un parámetro GET de configuración regional opcional y establecemos la configuración regional actual en función de él (si la configuración regional solicitada es compatible).

Ahora puedes visitar tu sitio web e incluir cualquiera de los idiomas compatibles como primer segmento de la URL. Por ejemplo, al navegar a localhost/it o localhost/fr se mostrará el contenido localizado. Si no especificas una configuración regional o eliges una que no sea compatible, Laravel usará el inglés (en) de forma predeterminada.

Middleware de localización para Laravel

Incluir el idioma en cada URL podría no ser lo ideal y podría afectar el atractivo visual del sitio. Para solucionarlo, configuraremos un selector de idioma y utilizaremos la sesión del usuario para mostrar el contenido traducido. Puedes crear un nuevo middleware en el archivo app/Http/Middleware/Localization.php, o generarlo ejecutando el comando artisan make:middleware Localization.

Luego, añade el siguiente código dentro.

				
					<?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);
    }
}

Este middleware indicará a Laravel que use la ubicación seleccionada por el usuario si esta opción está presente en la sesión.

Dado que necesitamos que la operación se ejecute en cada solicitud, agrégala a la pila de middleware predeterminada en app/Http/Kernel.php para el grupo de middleware web.

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

Modificar las rutas

A continuación, define una ruta para cambiar el idioma en el archivo routes/web.php. Aquí usamos una ruta de cierre, pero puedes colocar el mismo código dentro de un controlador si lo prefieres.

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

Además, elimina el cambio de idioma que se había añadido previamente a la ruta de bienvenida predeterminada. Tu ruta raíz ahora debería verse así.

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

Una vez hecho esto, el usuario solo puede cambiar el idioma activo visitando localhost/language/{locale}. La configuración regional seleccionada se guardará en la sesión y los usuarios serán redirigidos de vuelta a su página anterior (según lo gestiona el middleware de Localization).

Para probarlo, ve a localhost/language/it (suponiendo que la cookie de sesión esté activa en tu navegador) y deberías ver el contenido traducido. Puedes navegar por el sitio o actualizar la página, y el idioma elegido permanecerá activo.

Implementación del selector de idioma

Ahora, debemos proporcionar al usuario una opción en la que pueda hacer clic para cambiar el conmutador de idioma Laravel web en lugar de exigirle que introduzca manualmente los códigos de configuración regional en la URL. Para lograrlo, crea un conmutador de idioma sencillo. Añade un archivo nuevo en resources/views/partials/language_switcher.blade.php e inserta el siguiente código.

				
					<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>

Para incluir el conmutador de idioma recién creado en la vista «welcome», simplemente añade la siguiente línea a tu archivo welcome.blade.php donde quieras que aparezca el conmutador.

				
					<body class="antialiased">
    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 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> <script data-no-optimize="1">window.lazyLoadOptions=Object.assign({},{threshold:300},window.lazyLoadOptions||{});!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function o(t){return e({},at,t)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,vt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,vt,e)}function i(t){return s(t,null),0}function r(t){return null===c(t)}function u(t){return c(t)===_t}function d(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function f(t,e){et?t.classList.add(e):t.className+=(t.className?" ":"")+e}function _(t,e){et?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function v(t,e){!e||(e=e._observer)&&e.unobserve(t)}function b(t,e){t&&(t.loadingCount+=e)}function p(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function h(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function m(t){return!!t[lt]}function E(t){return t[lt]}function I(t){return delete t[lt]}function y(e,t){var n;m(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[lt]=n)}function L(a,t){var o;m(a)&&(o=E(a),t.forEach(function(t){var e,n;e=a,(t=o[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function k(t,e,n){f(t,e.class_loading),s(t,st),n&&(b(n,1),d(e.callback_loading,t,n))}function A(t,e,n){n&&t.setAttribute(e,n)}function O(t,e){A(t,rt,l(t,e.data_sizes)),A(t,it,l(t,e.data_srcset)),A(t,ot,l(t,e.data_src))}function w(t,e,n){var a=l(t,e.data_bg_multi),o=l(t,e.data_bg_multi_hidpi);(a=nt&&o?o:a)&&(t.style.backgroundImage=a,n=n,f(t=t,(e=e).class_applied),s(t,dt),n&&(e.unobserve_completed&&v(t,e),d(e.callback_applied,t,n)))}function x(t,e){!e||0<e.loadingCount||0<e.toLoadCount||d(t.callback_finish,e)}function M(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function N(t){return!!t.llEvLisnrs}function z(t){if(N(t)){var e,n,a=t.llEvLisnrs;for(e in a){var o=a[e];n=e,o=o,t.removeEventListener(n,o)}delete t.llEvLisnrs}}function C(t,e,n){var a;delete t.llTempImage,b(n,-1),(a=n)&&--a.toLoadCount,_(t,e.class_loading),e.unobserve_completed&&v(t,n)}function R(i,r,c){var l=g(i)||i;N(l)||function(t,e,n){N(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";M(t,a,e),M(t,"error",n)}(l,function(t){var e,n,a,o;n=r,a=c,o=u(e=i),C(e,n,a),f(e,n.class_loaded),s(e,ut),d(n.callback_loaded,e,a),o||x(n,a),z(l)},function(t){var e,n,a,o;n=r,a=c,o=u(e=i),C(e,n,a),f(e,n.class_error),s(e,ft),d(n.callback_error,e,a),o||x(n,a),z(l)})}function T(t,e,n){var a,o,i,r,c;t.llTempImage=document.createElement("IMG"),R(t,e,n),m(c=t)||(c[lt]={backgroundImage:c.style.backgroundImage}),i=n,r=l(a=t,(o=e).data_bg),c=l(a,o.data_bg_hidpi),(r=nt&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),k(a,o,i)),w(t,e,n)}function G(t,e,n){var a;R(t,e,n),a=e,e=n,(t=Et[(n=t).tagName])&&(t(n,a),k(n,a,e))}function D(t,e,n){var a;a=t,(-1<It.indexOf(a.tagName)?G:T)(t,e,n)}function S(t,e,n){var a;t.setAttribute("loading","lazy"),R(t,e,n),a=e,(e=Et[(n=t).tagName])&&e(n,a),s(t,_t)}function V(t){t.removeAttribute(ot),t.removeAttribute(it),t.removeAttribute(rt)}function j(t){h(t,function(t){L(t,mt)}),L(t,mt)}function F(t){var e;(e=yt[t.tagName])?e(t):m(e=t)&&(t=E(e),e.style.backgroundImage=t.backgroundImage)}function P(t,e){var n;F(t),n=e,r(e=t)||u(e)||(_(e,n.class_entered),_(e,n.class_exited),_(e,n.class_applied),_(e,n.class_loading),_(e,n.class_loaded),_(e,n.class_error)),i(t),I(t)}function U(t,e,n,a){var o;n.cancel_on_exit&&(c(t)!==st||"IMG"===t.tagName&&(z(t),h(o=t,function(t){V(t)}),V(o),j(t),_(t,n.class_loading),b(a,-1),i(t),d(n.callback_cancel,t,e,a)))}function $(t,e,n,a){var o,i,r=(i=t,0<=bt.indexOf(c(i)));s(t,"entered"),f(t,n.class_entered),_(t,n.class_exited),o=t,i=a,n.unobserve_entered&&v(o,i),d(n.callback_enter,t,e,a),r||D(t,n,a)}function q(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function H(t,o,i){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?$(t.target,t,o,i):(e=t.target,n=t,a=o,t=i,void(r(e)||(f(e,a.class_exited),U(e,n,a,t),d(a.callback_exit,e,n,t))));var e,n,a})}function B(e,n){var t;tt&&!q(e)&&(n._observer=new IntersectionObserver(function(t){H(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function J(t){return Array.prototype.slice.call(t)}function K(t){return t.container.querySelectorAll(t.elements_selector)}function Q(t){return c(t)===ft}function W(t,e){return e=t||K(e),J(e).filter(r)}function X(e,t){var n;(n=K(e),J(n).filter(Q)).forEach(function(t){_(t,e.class_error),i(t)}),t.update()}function t(t,e){var n,a,t=o(t);this._settings=t,this.loadingCount=0,B(t,this),n=t,a=this,Y&&window.addEventListener("online",function(){X(n,a)}),this.update(e)}var Y="undefined"!=typeof window,Z=Y&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),tt=Y&&"IntersectionObserver"in window,et=Y&&"classList"in document.createElement("p"),nt=Y&&1<window.devicePixelRatio,at={elements_selector:".lazy",container:Z||Y?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",it="srcset",rt="sizes",ct="poster",lt="llOriginalAttrs",st="loading",ut="loaded",dt="applied",ft="error",_t="native",gt="data-",vt="ll-status",bt=[st,ut,dt,ft],pt=[ot],ht=[ot,ct],mt=[ot,it,rt],Et={IMG:function(t,e){h(t,function(t){y(t,mt),O(t,e)}),y(t,mt),O(t,e)},IFRAME:function(t,e){y(t,pt),A(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){y(t,pt),A(t,ot,l(t,e.data_src))}),y(t,ht),A(t,ct,l(t,e.data_poster)),A(t,ot,l(t,e.data_src)),t.load()}},It=["IMG","IFRAME","VIDEO"],yt={IMG:j,IFRAME:function(t){L(t,pt)},VIDEO:function(t){a(t,function(t){L(t,pt)}),L(t,ht),t.load()}},Lt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,o=this._settings,i=W(t,o);{if(p(this,i.length),!Z&&tt)return q(o)?(e=o,n=this,i.forEach(function(t){-1!==Lt.indexOf(t.tagName)&&S(t,e,n)}),void p(n,0)):(t=this._observer,o=i,t.disconnect(),a=t,void o.forEach(function(t){a.observe(t)}));this.loadAll(i)}},destroy:function(){this._observer&&this._observer.disconnect(),K(this._settings).forEach(function(t){I(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;W(t,n).forEach(function(t){v(t,e),D(t,n,e)})},restoreAll:function(){var e=this._settings;K(e).forEach(function(t){P(t,e)})}},t.load=function(t,e){e=o(e);D(t,e)},t.resetStatus=function(t){i(t)},t}),function(t,e){"use strict";function n(){e.body.classList.add("litespeed_lazyloaded")}function a(){console.log("[LiteSpeed] Start Lazy Load"),o=new LazyLoad(Object.assign({},t.lazyLoadOptions||{},{elements_selector:"[data-lazyloaded]",callback_finish:n})),i=function(){o.update()},t.MutationObserver&&new MutationObserver(i).observe(e.documentElement,{childList:!0,subtree:!0,attributes:!0})}var o,i;t.addEventListener?t.addEventListener("load",a,!1):t.attachEvent("onload",a)}(window,document);</script><script data-optimized="1" src="https://www.linguise.com/wp-content/litespeed/js/713faf65bbb27a76c90566b191e12207.js?ver=ad2e5" defer></script></body>

Abra el archivo app/Providers/AppServiceProvider.php y añada el siguiente código en el método boot() para compartir la configuración regional actual con todas las vistas cuando se utilice el selector de idioma

				
					* Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
    view()->composer('partials.language_switcher', function ($view) {
        $view->with('current_locale', app()->getLocale());
        $view->with('available_locales', config('app.available_locales'));
    });
}

Funciones de traducción avanzadas en Laravel PHP

En este análisis, abordaremos otros componentes de localización, concretamente la fecha, el número y la moneda. Estos son los pasos.

Fechas localizadas en Laravel

El manejo de fechas y horas es crucial en el proceso de localización. Laravel utiliza Carbon para gestionar fechas y horas. Así es como puedes usar Carbon para mostrar una fecha localizada.

				
					<?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
    ]);
});

Este código establece la configuración regional de Carbon según la configuración regional actual de la aplicación y formatea la fecha en consecuencia.

Para mostrar la fecha localizada en una vista:

				
					{{ __('Welcome to our website, :Name', ['name' => ‘Johb’]) }}
<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 }}

Formateo de números y monedas

Los distintos países tienen diversas formas de formatear los números. Por ejemplo.

Francia → 123 123,12
Alemania → 123.123,12
Japón → 123.123

Para adaptarse a estas variaciones en su aplicación Laravel , puede utilizar NumberFormatter.

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

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

También puedes escribir los números con letras en un idioma específico.

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

$num2 = NumberFormatter::create('it', NumberFormatter::SPELLOUT);

Aquí están las monedas. Para la configuración regional francesa (`fr`), la moneda se mostrará en euros (€), mientras que para la configuración regional estadounidense (`en_US`), se mostrará en dólares estadounidenses ($).

				
					<?php
$currency1 = NumberFormatter::create('it', NumberFormatter::CURRENCY);

$currency2 = NumberFormatter::create('en_US', NumberFormatter::CURRENCY);

Rompe las barreras del idioma

¡Dile adiós a las barreras idiomáticas y saluda al crecimiento sin límites! Prueba nuestro servicio de traducción automática hoy mismo.

Comienza a traducir ahora

Solución alternativa de localización de Laravel con Linguise

Después de comprender los pasos de la localización de Laravel tal como se describe en el artículo, este proceso implica muchos pasos que requieren que los usuarios comprendan el código del programa Laravel en profundidad.

Esto ciertamente puede dificultar a los usuarios novatos que quieren localizar sus aplicaciones. Por lo tanto, se necesita una solución más innovadora que sea capaz de traducir rápidamente, admita la localización y requiera solo unos pocos pasos simples para implementarla.

Una solución prometedora es Linguise. Linguise ofrece un enfoque más fácil y eficiente para la localización de Laravel sin necesidad de conocimientos profundos de programación. Las características clave de Linguise incluyen.

Fácil integración con Laravel
Personaliza el selector de idioma sin necesidad de programar
Traducción de imágenes
Editor en vivo para personalizar las traducciones al contexto local
Traducción dinámica para contenido generado dinámicamente
Optimización SEO para versiones multilingües

Los pasos para instalar Linguise en sitios web de Laravel también se pueden realizar fácilmente. Aquí tienes una breve explicación.

Cree una cuenta Linguise (utilice la prueba gratuita de 30 días sin coste)
Registre su dominio web Laravel e introduzca alguna información. Obtendrá una clave API.
Sube y conecta el script de traducción Linguise a la carpeta Laravel que obtuviste.
Configurar las URL de idioma en el archivo htaccess.
Inserta el script del selector de idioma en el head de tu HTML.
Personaliza el selector de idioma según sea necesario
El selector de idioma aparecerá en la web Laravel y el contenido se podrá traducir automáticamente.

¿Cómo? Con Linguise, solo necesitas registrarte y activarlo, y el selector de idioma aparecerá. Después de eso, eres libre de localizar, por ejemplo, a través del editor en vivo, traducir medios, imágenes, etc.

¿Listo para explorar nuevos mercados? Prueba nuestro servicio de traducción automática gratis con nuestra prueba sin riesgo de 1 mes. ¡No se necesita tarjeta de crédito!

Reclama tu prueba gratuita de 1 mes

Conclusión

La localización de Laravel es una característica potente que permite a los desarrolladores crear sitios web y aplicaciones multilingües. Como hemos visto, el proceso de localización integrado de Laravel implica múltiples pasos y requiere un buen conocimiento del framework. Puede resultar complicado para principiantes o para quienes buscan una solución más rápida.

Herramientas como Linguise ofrecen una alternativa innovadora para quienes buscan un enfoque más simplificado. Estas soluciones ofrecen capacidades de traducción rápida, integración sencilla y funciones fáciles de usar, como selectores de idioma personalizables y traducción de imágenes. Ahora, crea tu cuenta de Linguise y disfruta de nuestra función para localizar tu Laravel!