Laravel Lokalisierung ist ein leistungsstarkes Tool, das Entwicklern ermöglicht, mehrsprachige Websites zu erstellen. Durch die Implementierung von Web-Lokalisierung in Ihren Laravel Projekten können Sie eine personalisierte Benutzererfahrung für Besucher aus verschiedenen sprachlichen Hintergründen bieten und letztendlich Ihre Reichweite erweitern und die Benutzerbindung verbessern.
Wir führen Sie durch die Implementierung der Lokalisierung in Ihrer Laravel -Anwendung und stellen Ihnen ein Tool vor, das Ihre Lokalisierungsbemühungen vereinfachen und verbessern kann!
Warum sollten Sie die Laravel -Website lokalisieren?
Hier sind einige wichtige Gründe, warum Sie Ihre Laravel -Website lokalisieren sollten.
- Erschließen Sie ein globales Publikum: Durch die Lokalisierung Ihrer Laravel-Website können Sie die Reichweite Ihrer App auf ein internationales Publikum ausdehnen. Dies ermöglicht es Benutzern aus verschiedenen Ländern und Sprachhintergründen, Ihre Inhalte zu verstehen und mit ihnen zu interagieren.
- Verbessert die Benutzererfahrung: Die Lokalisierung ermöglicht es Benutzern, mit der App in ihrer Muttersprache zu interagieren, was die Benutzererfahrung erheblich verbessert. Dies kann die Engagement-Raten erhöhen, die Absprungraten reduzieren und die Konversionsraten steigern.
- Wettbewerbsvorteil: In einem wettbewerbsintensiven globalen Markt kann das Anbieten von Apps in mehreren Sprachen einen erheblichen Vorteil gegenüber Mitbewerbern bieten. Es zeigt Ihr Engagement für internationale Märkte und kann Ihnen helfen, neue Märkte effektiver zu erschließen.
- Verbessert SEO: Gut lokalisierte Websites neigen dazu, in Suchmaschinen für Suchanfragen in einer bestimmten Sprache besser zu ranken. Dies kann Ihren Blog-Traffic erhöhen und die Online-Sichtbarkeit in verschiedenen Märkten mit mehrsprachiger Übersetzung verbessern.
Anforderungen für eine mehrsprachige Laravel -Lokalisierung
Es gibt einige Anforderungen und Schritte zu beachten, wenn Sie eine mehrsprachige Lokalisierung in Laravelimplementieren.
- Um die neuesten Lokalisierungsfunktionen zu erhalten, stellen Sie sicher, dass Sie die neueste Version von Laravel verwenden (z.B. Version 10.x).
- Ein grundlegendes Verständnis von PHP und dem Laravel -Framework ist hilfreich im Implementierungsprozess.
- Richten Sie eine lokale Entwicklungsumgebung oder einen Server ein, der Laravelunterstützt, einschließlich eines Webservers und einer Datenbank.
- Legen Sie die Sprachen fest, die Ihre Anwendung von Anfang an unterstützen wird.
Einfache Laravel Übersetzungen
Nachdem wir verstanden haben, welche Anforderungen vor der Übersetzung einer Laravel -Anwendung oder eines Laravel -Webs erfüllt sein müssen, werden wir einige einfache Schritte für die Übersetzung von Laravel bereitstellen.
Öffnen Sie dazu die Ansicht-Datei, die Sie lokalisieren möchten, zum Beispiel resources/views/welcome.blade.php. Ersetzen Sie dann den body-Tag durch den folgenden Code.
<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">window.litespeed_ui_events=window.litespeed_ui_events||["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</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" type="litespeed/javascript" data-src="https://www.linguise.com/wp-content/litespeed/js/b01b37982e16e44050bc8ec6d4e277d9.js?ver=f1695"></script></body>
Wie Sie sehen, ist der obige Text derzeit direkt im Code geschrieben. Dies ist weniger effizient und erschwert die Übersetzung von Websites in verschiedene Sprachen (Internationalisierung).
Wir werden den obigen Text flexibler gestalten, damit er leicht an verschiedene Sprachen angepasst werden kann. Laravel bietet eine sehr hilfreiche Funktion dafür; das Lokalisierungssystem. Ersetzen Sie als ersten Schritt den vorhandenen Text durch den folgenden Code.
{{ __('Welcome to Linguise website!') }}
Laravel zeigt den obigen Text standardmäßig an und sucht die Übersetzung, wenn der Benutzer eine andere Sprache als Englisch auswählt. In diesem Fall wird Englisch als Standardsprache der Anwendung verwendet.
Einrichten von Gebietsschemata in einem Laravel mehrsprachigen Web
Aber wie bestimmt Laravel die aktuelle Sprache oder weiß, welche Sprachen in der Anwendung verfügbar sind? Es überprüft die Lokalisierungseinstellungen in der Datei config/app.php. Öffnen Sie diese Datei und suchen Sie nach den folgenden zwei Schlüsseln.
/*
|--------------------------------------------------------------------------
| 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',
Die Erklärung über den Schlüsseln sollte klar sein. Zusammenfassend enthält der Lokalisierungsschlüssel die standardmäßige Lokalisierung für Ihre Anwendung (wenn keine andere Lokalisierung im Code angegeben ist). Die fallback_locale wird aktiviert, wenn eine nicht existierende Lokalisierung in Ihrer Anwendung angefordert wird.
Fügen wir nun diesem File einen neuen Schlüssel hinzu, um eine Liste aller unterstützten Gebietsschemata bereitzustellen.
/*
|--------------------------------------------------------------------------
| Available locales
|--------------------------------------------------------------------------
|
| List all locales that your application works with
|
*/
'available_locales' => [
'English' => 'en',
'Italian' => 'it',
'French' => 'fr',
],
An diesem Punkt haben wir versucht, Laravel Web auf drei Sprachen zu unterstützen, nämlich Englisch, Italienisch und Französisch.
Übersichtsdateien für Laravel
In Laravelwerden, wie in vielen anderen Frameworks, Übersetzungen für verschiedene Sprachen in separaten Dateien gespeichert. Zwei Methoden werden verwendet, um diese Übersetzungsdateien zu organisieren.
Die ältere Methode speichert Dateien in der folgenden Struktur: resources/lang/{en,fr,it}/{myfile.php}. Die neuere Methode verwendet JSON-Dateien wie resources/lang/{fr.json, it.json}. Dieser Artikel wird sich auf die neuere Methode konzentrieren, obwohl die Prinzipien für die ältere Methode ähnlich sind, abgesehen von den Unterschieden bei der Benennung und dem Zugriff auf Übersetzungsschlüssel.
Für Sprachen mit regionalen Variationen sollten Sie die Sprachverzeichnisse oder -dateien gemäß dem ISO-15897-Standard benennen. Zum Beispiel würde britisches Englisch anstelle von en-gb als en_GB benannt werden.
Allgemeine Informationen
In Laravelwerden, wie bei vielen Frameworks, Übersetzungen für verschiedene Sprachen in separaten Dateien gespeichert. Es gibt zwei primäre Methoden, um die Laravel -Übersetzungsdateien zu organisieren.
- Der Legacy-Ansatz beinhaltet das Speichern von Dateien unter dem Pfad: resources/lang/{en,fr,it}/{myfile.php}.
- Der moderne Ansatz verwendet resources/lang/{fr.json, it.json}-Dateien.
Dieser Artikel konzentriert sich auf die zweite Methode, obwohl die Prinzipien auf beide anwendbar sind (mit Variationen bei der Benennung und dem Zugriff auf Übersetzungsschlüssel).
Für Sprachen, die je nach Region variieren, wird empfohlen, Sprachverzeichnisse/-dateien gemäß den ISO-15897-Standards zu benennen. Zum Beispiel würde britisches Englisch als en_GB und nicht als en-gb bezeichnet.
Erstellung von Laravel Übersetzungsdateien
Nachdem wir die Gebietsschemata für unsere Anwendung konfiguriert haben, können wir mit der Übersetzung unserer standardmäßigen Willkommensnachricht fortfahren.
Beginnen wir damit, neue Lokalisierungsdateien im JSON-Format im Verzeichnis resources/lang zu erstellen. Zuerst erstellen wir eine resources/lang/it.json-Datei und füllen sie mit den entsprechenden Übersetzungen.
{
"Welcome to Linguise website!": "Benvenuti nel sito web di Linguise!"
}
Fügen Sie als Nächstes eine resources/lang/fr.json-Datei hinzu.
{
"Welcome to Linguise website!": "Bienvenue sur le site de Linguise"
}
Wie Sie sehen können, beziehen wir uns konsequent auf die Standardnachricht aus der welcome.blade.php-Datei ({{ __(‘Willkommen auf der Linguise -Website!’) }}). Es besteht keine Notwendigkeit, eine en.json-Datei zu erstellen, da Laravel automatisch erkennt, dass die Standardnachrichten auf Englisch sind.
Einstellung des Sprachumschalters in einer mehrsprachigen Laravel -App
Darüber hinaus ist Laravel noch nicht so eingerichtet, dass die lokale Sprache überschrieben wird, daher werden wir für jetzt die Übersetzung direkt innerhalb der Route handhaben. Ändern Sie die standardmäßige Willkommensroute innerhalb der Datei routes/web.php wie folgt.
Route::get('/{locale?}', function ($locale = null) {
if (isset($locale) && in_array($locale, config('app.available_locales'))) {
app()->setLocale($locale);
}
return view('welcome');
});
In diesem Fall erfassen wir einen optionalen GET-Parameter für die Gebietsschema und setzen das aktuelle Gebietsschema darauf basierend (wenn das angeforderte Gebietsschema unterstützt wird).
Jetzt können Sie Ihre Website besuchen und eine der unterstützten Sprachen als erstes Segment in der URL einfügen. Wenn Sie beispielsweise zu localhost/it oder localhost/fr navigieren, wird der lokalisierte Inhalt angezeigt. Wenn Sie kein Gebietsschema angeben oder eines wählen, das nicht unterstützt wird, wird Laravel auf Englisch (en) zurückgreifen.
Lokalisierungs-Middleware für Laravel
Die Aufnahme der Lokalisierung in jede URL ist möglicherweise nicht ideal und könnte das visuelle Erscheinungsbild der Seite stören. Um dies zu beheben, richten wir einen Sprachumschalter ein und nutzen die Benutzersitzung, um den übersetzten Inhalt anzuzeigen. Sie können eine neue Middleware in der Datei app/Http/Middleware/Localization.php erstellen oder sie durch Ausführen des Befehls 'artisan make:middleware Localization' generieren.
Fügen Sie dann den folgenden Code ein.
<?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);
}
}
Diese Middleware weist Laravel an, den vom Benutzer ausgewählten Standort zu verwenden, wenn diese Option in der Sitzung vorhanden ist.
Da wir die Operation bei jeder Anfrage ausführen müssen, fügen Sie sie zum standardmäßigen Middleware-Stack in app/Http/Kernel.php für die Web-Middleware-Gruppe hinzu.
/**
* 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
],
Routen ändern
Definieren Sie als Nächstes eine Route, um die Lokalisierung in der Datei routes/web.php zu ändern. Wir verwenden hier eine Abschlussroute, aber Sie können denselben Code auch in einem Controller platzieren, wenn Sie möchten.
Route::get('language/{locale}', function ($locale) {
app()->setLocale($locale);
session()->put('locale', $locale);
return redirect()->back();
});
Entfernen Sie außerdem das Locale-Switching, das zuvor zur standardmäßigen Willkommensroute hinzugefügt wurde. Ihre Root-Route sollte jetzt wie folgt aussehen.
Route::get('/', function () {
return view('welcome');
});
Sobald dies geschehen ist, kann der Benutzer die aktive Sprache nur noch umschalten, indem er localhost/language/{locale} besucht. Die ausgewählte Lokalisierung wird in der Sitzung gespeichert und die Benutzer werden auf ihre vorherige Seite zurückgeleitet (wie vom Lokalisierungs-Middleware gehandhabt).
Um es zu testen, gehen Sie zu localhost/language/it (vorausgesetzt, das Sitzungscookie ist in Ihrem Browser aktiv), und Sie sollten den übersetzten Inhalt sehen. Sie können die Seite navigieren oder aktualisieren, und die gewählte Sprache bleibt wirksam.
Implementierung des Sprachumschalters
Jetzt müssen wir dem Benutzer eine anklickbare Option zum Ändern des Sprachumschalters Laravel Web anbieten, anstatt dass sie manuell Gebietsschemacodes in der URL eingeben müssen. Um dies zu erreichen, erstellen Sie einen einfachen Sprachumschalter. Fügen Sie eine neue Datei unter resources/views/partials/language_switcher.blade.php hinzu und fügen Sie den folgenden Code ein.
<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>
Um den neu erstellten Sprachumschalter in der „Willkommen“-Ansicht einzubinden, fügen Sie einfach die folgende Zeile in Ihre welcome.blade.php-Datei ein, wo der Umschalter erscheinen soll.
<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-no-optimize="1">window.litespeed_ui_events=window.litespeed_ui_events||["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script><script data-optimized="1" type="litespeed/javascript" data-src="https://www.linguise.com/wp-content/litespeed/js/b01b37982e16e44050bc8ec6d4e277d9.js?ver=f1695"></script></body>
Öffnen Sie die Datei app/Providers/AppServiceProvider.php und fügen Sie den folgenden Code in der boot()-Methode hinzu, um die aktuelle Gebietsschema mit allen Ansichten zu teilen, wenn der Sprachumschalter verwendet wird
* 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'));
});
}
Erweiterte Übersetzungsfunktionen in Laravel PHP
In dieser Diskussion werden wir dann andere Lokalisierungskomponenten behandeln, nämlich Datum, Zahl und Währung. Hier sind die Schritte.
Lokalisierte Daten in Laravel
Die Handhabung von Datum und Uhrzeit ist entscheidend im Lokalisierungsprozess. Laravel verwendet Carbon, um Datum und Uhrzeit zu verwalten. Hier erfahren Sie, wie Sie mit Carbon ein lokalisiertes Datum anzeigen können.
<?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
]);
});
Dieser Code setzt die Carbon-Locale basierend auf der aktuellen Locale der Anwendung und formatiert das Datum entsprechend.
Um das lokalisierte Datum in einer Ansicht anzuzeigen:
{{ __('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 }}
Formatierung von Zahlen und Währungen
Verschiedene Länder haben unterschiedliche Möglichkeiten, Zahlen zu formatieren. Zum Beispiel.
- Frankreich → 123 123,12
- Deutschland → 123.123,12
- Japan → 123,123
Um diese Variationen in Ihrer Laravel -Anwendung zu berücksichtigen, können Sie NumberFormatter verwenden.
<?php
$num = NumberFormatter::create('en_US', NumberFormatter::DECIMAL);
$num2 = NumberFormatter::create('fr', NumberFormatter::DECIMAL);
Sie können Zahlen auch in einer bestimmten Sprache buchstabieren.
<?php
$num = NumberFormatter::create('en_US', NumberFormatter::SPELLOUT);
$num2 = NumberFormatter::create('it', NumberFormatter::SPELLOUT);
Hier sind die Währungen. Für die französische Locale (`fr`) wird die Währung in Euro (€) angezeigt, während sie für die US-Locale (`en_US`) in US-Dollar ($) angezeigt wird.
<?php
$currency1 = NumberFormatter::create('it', NumberFormatter::CURRENCY);
$currency2 = NumberFormatter::create('en_US', NumberFormatter::CURRENCY);
Alternative Lösung Laravel Lokalisierung mit Linguise
Nachdem Sie die Schritte der Laravel -Lokalisierung wie im Artikel beschrieben verstanden haben, umfasst dieser Prozess viele Schritte, die von den Benutzern verlangen, den Laravel -Programmcode tiefgreifend zu verstehen.
Dies kann es für unerfahrene Benutzer, die ihre Anwendungen lokalisieren möchten, sicherlich schwierig machen. Daher wird eine fortschrittlichere Lösung benötigt, die eine schnelle Übersetzung ermöglicht, die Lokalisierung unterstützt und nur wenige einfache Schritte zur Implementierung erfordert.
Eine vielversprechende Lösung ist Linguise. Linguise bietet einen einfacheren und effizienteren Ansatz zur Laravel -Lokalisierung ohne die Notwendigkeit tiefgreifender Programmierkenntnisse. Zu den Hauptfunktionen von Linguise gehören.
- Einfache Integration mit Laravel
- Anpassung des Sprachumschalters ohne Programmierung
- Bildübersetzung
- Live-Editor zur Anpassung von Übersetzungen an den lokalen Kontext
- Dynamische Übersetzung für dynamisch generierte Inhalte
- SEO-Optimierung für mehrsprachige Versionen
Die Schritte zur Installation von Linguise auf Laravel-Websites können auch einfach durchgeführt werden. Hier ist eine kurze Erklärung.
- Erstellen Sie ein Linguise -Konto (nutzen Sie die 30-Tage-Testversion kostenlos)
- Registrieren Sie Ihre Laravel -Web-Domain und geben Sie einige Informationen ein. Sie erhalten einen API-Schlüssel.
- Laden Sie das Linguise -Übersetzungsskript hoch und verbinden Sie es mit dem Laravel -Ordner, den Sie erhalten haben.
- Sprach-URLs in der htaccess-Datei einrichten.
- Fügen Sie das Sprachumschalter-Skript im Kopf Ihrer HTML-Datei ein.
- Passen Sie den Sprachumschalter nach Bedarf an
- Der Sprachumschalter wird auf der Laravel -Webseite angezeigt und der Inhalt kann automatisch übersetzt werden.
Wie? Mit Linguisemüssen Sie sich nur registrieren und aktivieren, und der Sprachumschalter wird angezeigt. Danach können Sie frei lokalisieren, zum Beispiel über den Live-Editor, Medien übersetzen, Bilder usw.
Fazit
Laravel -Lokalisierung ist eine leistungsstarke Funktion, die es Entwicklern ermöglicht, mehrsprachige Websites und Anwendungen zu erstellen. Wie wir gesehen haben, umfasst der integrierte Laravel -Lokalisierungsprozess mehrere Schritte und erfordert ein gutes Verständnis des Frameworks. Es kann für Anfänger oder diejenigen, die nach einer schnelleren Lösung suchen, eine Herausforderung darstellen.
Tools wie Linguise bieten eine innovative Alternative für diejenigen, die einen optimierten Ansatz suchen. Diese Lösungen bieten schnelle Übersetzungsmöglichkeiten, einfache Integration und benutzerfreundliche Funktionen wie anpassbare Sprachumschalter und Bildübersetzung. Jetzt erstellen Sie Ihr Linguise-Konto und genießen Sie unsere Funktion zur Lokalisierung Ihrer Laravel!
