Laravel Lokalisierung ist ein leistungsstarkes Werkzeug, mit dem Entwickler mehrsprachige Websites erstellen können. Durch die Implementierung der Weblokalisierung in Ihren Laravel Projekten bieten Sie Besuchern mit unterschiedlichem sprachlichen Hintergrund ein personalisiertes Nutzererlebnis und erweitern so Ihre Reichweite und verbessern die Nutzerbindung.
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 sollte man die Laravel Website lokalisieren?
Hier sind einige wichtige Gründe, warum Sie Ihre Laravel Website lokalisieren sollten.
- Erreichen 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 Nutzern aus verschiedenen Ländern und mit unterschiedlichem Sprachhintergrund, Ihre Inhalte zu verstehen und mit ihnen zu interagieren.
- Verbessert die Nutzererfahrung: Durch die Lokalisierung können Nutzer in ihrer Muttersprache mit der App interagieren, was die Nutzererfahrung deutlich verbessert. Dies kann die Interaktionsraten erhöhen, die Absprungraten senken und die Konversionsraten steigern.
- Wettbewerbsvorteil: In einem wettbewerbsintensiven globalen Markt kann das Angebot von Apps in mehreren Sprachen einen entscheidenden Vorsprung gegenüber Mitbewerbern verschaffen. Es unterstreicht Ihr Engagement auf internationalen Märkten und kann Ihnen den effektiveren Markteintritt erleichtern.
- Verbessert die Suchmaschinenoptimierung: Gut lokalisierte Websites erzielen in Suchmaschinen bei Suchanfragen in der jeweiligen Sprache tendenziell bessere Platzierungen. Dies kann Ihren Blog-Traffic und Ihre Online-Sichtbarkeit in verschiedenen Märkten durch mehrsprachige Übersetzungen steigern.
Anforderungen an eine mehrsprachige Laravel Lokalisierung
Bei der Implementierung mehrsprachiger Lokalisierung in Laravelsind einige Anforderungen und Schritte zu beachten.
- Um die neuesten Lokalisierungsfunktionen nutzen zu können, stellen Sie sicher, dass Sie die neueste Version von Laravel verwenden (z. B. Version 10.x).
- Grundlegende Kenntnisse von PHP und des Laravel -Frameworks sind für die Umsetzung hilfreich.
- Richten Sie eine lokale Entwicklungsumgebung oder einen Server ein, der Laravelunterstützt, einschließlich eines Webservers und einer Datenbank.
- Legen Sie von Anfang an fest, welche Sprachen Ihre Anwendung unterstützen soll.
Einfache Laravel -Übersetzungen
Nachdem wir verstanden haben, welche Anforderungen vor der Übersetzung einer Laravel Anwendung oder eines Webauftritts erfüllt sein müssen, werden wir einige Schritte zur einfachen Übersetzung Laravel vorstellen.
Öffnen Sie dazu die Ansichtsdatei, die Sie lokalisieren möchten, beispielsweise resources/views/welcome.blade.php. Ersetzen Sie anschließend 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||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),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://www.linguise.com/wp-content/litespeed/js/dcfb0d8aef9b57b394f38c36a44631fb.js?ver=7271c"></script></body>
Wie Sie sehen, ist der obige Text derzeit direkt im Quellcode geschrieben. Dies ist weniger effizient und erschwert die Übersetzung von Webseiten in verschiedene Sprachen (Internationalisierung).
Wir werden den obigen Text flexibler gestalten, damit er sich leicht an verschiedene Sprachen anpassen lässt. Laravel bietet hierfür eine sehr hilfreiche Funktion: das Lokalisierungssystem. Ersetzen Sie als ersten Schritt den vorhandenen Text durch den folgenden Code.
{{ __('Welcome to Linguise website!') }}
Laravel zeigt standardmäßig den obigen Text an und ruft die Übersetzung ab, wenn der Benutzer eine andere Sprache als Englisch auswählt. In diesem Fall wird Englisch als Standardsprache der Anwendung verwendet.
Einrichten von Gebietsschemata in einer mehrsprachigen Laravel Website
Aber wie ermittelt Laravel die aktuelle Sprache bzw. welche Sprachen in der Anwendung verfügbar sind? Es prüft die Gebietsschemaeinstellungen in der Datei `config/app.php`. Öffnen Sie diese Datei und suchen Sie nach den folgenden beiden 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 Erläuterungen zu den Schlüsseln sollten selbsterklärend sein. Zusammenfassend enthält der Schlüssel `locale` die Standardsprache Ihrer Anwendung (sofern im Code keine andere Sprache angegeben ist). Die Option `fallback_locale` wird aktiviert, wenn in Ihrer Anwendung eine nicht vorhandene Sprache angefordert wird.
Fügen wir nun einen neuen Schlüssel zu dieser Datei hinzu, um eine Liste aller unterstützten Gebietsschemas bereitzustellen.
/*
|--------------------------------------------------------------------------
| Available locales
|--------------------------------------------------------------------------
|
| List all locales that your application works with
|
*/
'available_locales' => [
'English' => 'en',
'Italian' => 'it',
'French' => 'fr',
],
Bisher haben wir Laravel Web so getestet, dass es drei Sprachen unterstützt, nämlich Englisch, Italienisch und Französisch.
Übersicht Laravel -Übersetzungsdateien
In Laravelwerden, wie in vielen anderen Frameworks, Übersetzungen für verschiedene Sprachen in separaten Dateien gespeichert. Für die Organisation dieser Übersetzungsdateien werden zwei Methoden verwendet.
Die ältere Methode speichert Dateien in folgender Struktur: resources/lang/{en,fr,it}/{myfile.php}. Die neuere Methode verwendet JSON-Dateien, z. B. resources/lang/{fr.json, it.json}. Dieser Artikel konzentriert sich auf die neuere Methode, obwohl die Prinzipien – abgesehen von den Unterschieden in der Benennung und dem Zugriff auf die Übersetzungsschlüssel – ähnlich sind.
Bei Sprachen mit regionalen Unterschieden sollten Sie die Sprachverzeichnisse oder -dateien gemäß dem ISO-15897-Standard benennen. Beispielsweise würde britisches Englisch „en_GB“ statt „en-gb“ heißen.
allgemeine Informationen
In Laravelwerden, wie bei vielen Frameworks, Übersetzungen für verschiedene Sprachen in separaten Dateien gespeichert. Es gibt zwei Hauptmethoden zur Organisation von Laravel Übersetzungsdateien.
- Bei der herkömmlichen Methode werden die Dateien unter folgendem Pfad gespeichert: resources/lang/{en,fr,it}/{myfile.php}.
- Der moderne Ansatz verwendet Dateien aus dem Verzeichnis resources/lang/{fr.json, it.json}.
Dieser Artikel konzentriert sich auf die zweite Methode, obwohl die Prinzipien auf beide anwendbar sind (mit Unterschieden in der Benennung und dem Zugriff auf Übersetzungsschlüssel).
Bei Sprachen, die regional variieren, empfiehlt es sich, Sprachverzeichnisse/-dateien gemäß ISO 15897 zu benennen. Beispielsweise würde britisches Englisch als en_GB und nicht als en-gb bezeichnet.
Erstellen Laravel -Übersetzungsdateien
Nachdem wir die Gebietsschemas für unsere Anwendung konfiguriert haben, können wir mit der Übersetzung unserer Standard-Willkommensnachricht fortfahren.
Beginnen wir mit dem Erstellen neuer Lokalisierungsdateien im JSON-Format im Verzeichnis resources/lang. Zuerst erstellen wir eine Datei namens resources/lang/it.json und fügen die entsprechenden Übersetzungen hinzu.
{
"Welcome to Linguise website!": "Benvenuti nel sito web di Linguise!"
}
Als Nächstes fügen Sie eine Datei resources/lang/fr.json hinzu.
{
"Welcome to Linguise website!": "Bienvenue sur le site de Linguise"
}
Wie Sie sehen, verwenden wir durchgehend die Standardnachricht aus der Datei welcome.blade.php ({{ __('Willkommen auf Linguise Website!') }}). Es ist nicht nötig, eine en.json-Datei zu erstellen, da Laravel automatisch erkennt, dass die Standardnachrichten auf Englisch sind.
Sprachumschalter in einer mehrsprachigen Laravel App einrichten
Da Laravel die lokale Sprache noch nicht überschreibt, werden wir die Übersetzung vorerst direkt in der Route vornehmen. Ändern Sie die Standard-Willkommensroute in 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 Locale-GET-Parameter und legen basierend darauf das aktuelle Locale fest (sofern das angeforderte Locale unterstützt wird).
Sie können Ihre Website nun besuchen und eine der unterstützten Sprachen als ersten Teil der URL angeben. Wenn Sie beispielsweise localhost/it oder localhost/fr aufrufen, wird der lokalisierte Inhalt angezeigt. Falls Sie keine Sprache angeben oder eine nicht unterstützte auswählen, verwendet Laravel standardmäßig Englisch (en).
Lokalisierungs-Middleware für Laravel
Die Einbindung der Sprache in jede URL ist möglicherweise nicht optimal und könnte die visuelle Darstellung der Website beeinträchtigen. Um dies zu vermeiden, richten wir einen Sprachumschalter ein und nutzen die Benutzersitzung, um die übersetzten Inhalte anzuzeigen. Sie können neue Middleware in der Datei `app/Http/Middleware/Localization.php` erstellen oder sie mit dem Befehl `artisan make:middleware Localization` generieren.
Fügen Sie anschließend 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 Speicherort zu verwenden, sofern diese Option in der Sitzung vorhanden ist.
Da die Operation bei jeder Anfrage ausgeführt werden muss, fügen Sie sie dem Standard-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 zum Ändern des Gebietsschemas in der Datei routes/web.php. Wir verwenden hier eine Closure-Route, Sie können den gleichen Code aber auch in einem Controller platzieren, wenn Sie das bevorzugen.
Route::get('language/{locale}', function ($locale) {
app()->setLocale($locale);
session()->put('locale', $locale);
return redirect()->back();
});
Entfernen Sie außerdem die zuvor der Standard-Willkommensroute hinzugefügte Gebietsschemaumschaltung. Ihre Stammroute sollte nun wie folgt aussehen.
Route::get('/', function () {
return view('welcome');
});
Sobald dies abgeschlossen ist, kann der Benutzer die aktive Sprache nur noch über localhost/language/{locale} ändern. Die ausgewählte Sprache wird in der Sitzung gespeichert, und die Benutzer werden (wie von der Lokalisierungs-Middleware verarbeitet) auf ihre vorherige Seite zurückgeleitet.
Um dies zu testen, rufen Sie localhost/language/it auf (vorausgesetzt, der Session-Cookie ist in Ihrem Browser aktiv). Dort sollten Sie den übersetzten Inhalt sehen. Sie können auf der Website navigieren oder die Seite aktualisieren; die gewählte Sprache bleibt erhalten.
Implementierung des Sprachumschalters
Wir benötigen nun eine anklickbare Option, um die Sprache Laravel Web , anstatt die Sprachcodes manuell in die URL eingeben zu müssen. Erstellen Sie dazu 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 die „Willkommensansicht“ einzubinden, fügen Sie einfach die folgende Zeile in Ihre welcome.blade.php-Datei an der Stelle ein, an der 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/dcfb0d8aef9b57b394f38c36a44631fb.js?ver=7271c"></script></body>
Öffnen Sie die Datei app/Providers/AppServiceProvider.php und fügen Sie den folgenden Code in die Methode boot() ein, um die aktuelle Sprache 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 behandeln wir weitere Lokalisierungskomponenten, nämlich Datum, Zahl und Währung. Hier sind die einzelnen Schritte.
Lokalisierte Datumsangaben in Laravel
Die korrekte Verarbeitung von Datum und Uhrzeit ist im Lokalisierungsprozess unerlässlich. Laravel verwendet Carbon zur Verwaltung von Datum und Uhrzeit. Hier erfahren Sie, wie Sie Carbon zur Anzeige eines lokalisierten Datums nutzen 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 legt das Carbon-Gebietsschema basierend auf dem aktuellen Gebietsschema der Anwendung fest und formatiert das Datum entsprechend.
So zeigen Sie das lokalisierte Datum in einer Ansicht an:
{{ __('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
In verschiedenen Ländern gibt es unterschiedliche Arten, 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);
Man kann Zahlen auch in einer bestimmten Sprache ausschreiben.
<?php
$num = NumberFormatter::create('en_US', NumberFormatter::SPELLOUT);
$num2 = NumberFormatter::create('it', NumberFormatter::SPELLOUT);
Hier sind die Währungen. Für die französische Lokalisierung („fr“) wird die Währung in Euro (€) angezeigt, für die US-amerikanische Lokalisierung („en_US“) in US-Dollar ($).
<?php
$currency1 = NumberFormatter::create('it', NumberFormatter::CURRENCY);
$currency2 = NumberFormatter::create('en_US', NumberFormatter::CURRENCY);
Alternative Lösung: Laravel -Lokalisierung mit Linguise
Nachdem man die im Artikel beschriebenen Schritte der Laravel Lokalisierung verstanden hat, wird deutlich, dass dieser Prozess viele Schritte umfasst, die ein tiefes Verständnis des Laravel -Programmcodes erfordern.
Dies kann es unerfahrenen Nutzern, die ihre Anwendungen lokalisieren möchten, sicherlich erschweren. Daher ist eine innovativere Lösung erforderlich, die eine schnelle Übersetzung ermöglicht, die Lokalisierung unterstützt und sich mit wenigen einfachen Schritten implementieren lässt.
Eine vielversprechende Lösung ist Linguise. Linguise bietet einen einfacheren und effizienteren Ansatz zur Lokalisierung Laravel Anwendungen, ohne dass tiefgreifende Programmierkenntnisse erforderlich sind. Zu den wichtigsten Funktionen von Linguise gehören:.
- Einfache Integration mit Laravel
- Sprachumschalter ohne Programmierung anpassen
- Bildübersetzung
- Live-Editor zur Anpassung der Übersetzungen an den lokalen Kontext
- Dynamische Übersetzung für dynamisch generierte Inhalte
- SEO-Optimierung für mehrsprachige Versionen
Die Installation Linguise auf Laravel -Websites ist ebenfalls einfach. Hier eine kurze Erklärung.
- Erstellen Sie ein Linguise Konto (nutzen Sie die 30-tägige kostenlose Testversion)
- Registrieren Sie Ihre Laravel Webdomain und geben Sie einige Informationen ein. Sie erhalten dann einen API-Schlüssel.
- Laden Sie das Linguise Übersetzungsskript in den von Ihnen erstellten Laravel Ordner hoch und verbinden Sie es.
- Sprach-URLs in der .htaccess-Datei einrichten.
- Fügen Sie das Skript zum Umschalten der Sprache im Head-Bereich Ihres HTML-Codes ein.
- Passen Sie den Sprachumschalter nach Bedarf an
- Der Sprachumschalter wird auf der Laravel -Webseite angezeigt, und die Inhalte können automatisch übersetzt werden.
Wie? Bei Linguisemüssen Sie sich lediglich registrieren und aktivieren, und schon erscheint der Sprachumschalter. Anschließend können Sie Ihre Texte lokalisieren, beispielsweise über den Live-Editor, Medien, Bilder usw. übersetzen.
Fazit
Die Lokalisierung Laravel ist eine leistungsstarke Funktion, mit der Entwickler mehrsprachige Websites und Anwendungen erstellen können. Wie wir gesehen haben, umfasst der integrierte Lokalisierungsprozess Laravel mehrere Schritte und erfordert ein gutes Verständnis des Frameworks. Für Anfänger oder diejenigen, die eine schnellere Lösung suchen, kann dies eine Herausforderung darstellen.
Tools wie Linguise bieten eine innovative Alternative für alle, die einen effizienteren Ansatz suchen. Diese Lösungen bieten schnelle Übersetzungsfunktionen, einfache Integration und benutzerfreundliche Features wie anpassbare Sprachumschalter und Bildübersetzung. Erstellen Sie jetzt Ihr Linguise Konto und nutzen Sie unsere Funktion zur Lokalisierung Ihres Laravel !
