Пошаговая локализация Laravel [Руководство]

от Аоринки Анендъя
4 октября 2024 г

Блог > Руководство > Пошаговая Laravel локализация [Руководство]

Laravel — это мощный инструмент, позволяющий разработчикам создавать многоязычные веб-сайты. Внедрив веб-локализацию в ваши проекты Laravel , вы сможете обеспечить персонализированный пользовательский опыт для посетителей с разными языковыми背景, что в конечном итоге расширит ваш охват и повысит вовлеченность пользователей.

Мы поможем вам внедрить локализацию в ваше приложение Laravel и познакомим вас с инструментом, который может упростить и улучшить ваши усилия по локализации!

Зачем локализовать сайт на Laravel ?

Вот несколько важных причин, по которым вам следует локализовать ваш сайт Laravel .

Охватите глобальную аудиторию: Локализуя свой сайт на Laravel , вы можете расширить охват вашего приложения до международной аудитории. Это позволяет пользователям из разных стран и с разным языковым фоном понимать ваш контент и взаимодействовать с ним.
Улучшает пользовательский опыт: Локализация позволяет пользователям взаимодействовать с приложением на их родном языке, что значительно улучшает пользовательский опыт. Это может повысить показатели вовлеченности, снизить показатели отказов и увеличить конверсии.
Конкурентное преимущество: На конкурентном глобальном рынке предложение приложений на нескольких языках может дать значительное преимущество перед конкурентами. Это демонстрирует вашу приверженность международным рынкам и может помочь вам более эффективно выходить на новые рынки.
Улучшает SEO: Хорошо локализованные сайты, как правило, лучше ранжируются в поисковых системах по запросам на определенном языке. Это может увеличить трафик вашего блога и онлайн-видимость на различных рынках с помощью многоязычного перевода.

Требования для многоязычной локализации Laravel

Существует несколько требований и шагов, которые следует учитывать при внедрении многоязычной локализации в Laravel.

Чтобы получить новейшие функции локализации, убедитесь, что вы используете последнюю версию Laravel (например, версию 10.x).
Базовое понимание PHP и фреймворка Laravel будет полезно в процессе внедрения.
Настройте локальную среду разработки или сервер, поддерживающий Laravel, включая веб-сервер и базу данных.
Определите языки, которые ваше приложение будет поддерживать с самого начала.

Простые переводы Laravel

После понимания того, какие требования должны быть выполнены перед переводом приложения или веб-сайта Laravel , мы предоставим несколько шагов для простого перевода Laravel .

Для этого откройте файл представления, который вы хотите локализовать, например, resources/views/welcome.blade.php. Затем замените тег body следующим кодом.

				
					<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=7abf8" defer></script></body>

Как видите, текст выше сейчас написан непосредственно в коде. Это менее эффективно и затрудняет перевод сайтов на разные языки (интернационализацию).

Мы собираемся сделать приведенный выше текст более гибким, чтобы его можно было легко адаптировать к разным языкам. Laravel предоставляет для этого очень полезную функцию — систему локализации. В качестве первого шага замените существующий текст следующим кодом.

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

Laravel по умолчанию отобразит вышеуказанный текст и выполнит поиск перевода, если пользователь выберет язык, отличный от английского. В этом случае английский будет использоваться в качестве языка приложения по умолчанию.

Настройка локалей в многоязычном веб-проекте Laravel

Но как Laravel определяет текущий язык или узнаёт, какие языки доступны в приложении? Он проверяет настройки локали в файле config/app.php. Откройте этот файл и найдите следующие два ключа.

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

Объяснение выше ключей должно быть понятным. Вкратце, ключ locale содержит локаль по умолчанию для вашего приложения (если в коде не указана другая локаль). Параметр fallback_locale активируется, если в вашем приложении запрашивается несуществующая локаль.

Теперь давайте добавим новый ключ в этот файл, чтобы предоставить список всех поддерживаемых локалей.

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

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

На данный момент мы попробовали Laravel веб для поддержки трех языков, а именно английского, итальянского и французского.

Обзор файлов перевода Laravel

В Laravel, как и во многих других фреймворках, переводы для разных языков хранятся в отдельных файлах. Для организации этих файлов перевода используются два метода.

Старый метод хранит файлы в следующей структуре: resources/lang/{en,fr,it}/{myfile.php}. Новый метод использует файлы JSON, такие как resources/lang/{fr.json, it.json}. Эта статья будет посвящена новому методу, хотя принципы аналогичны для старого метода, за исключением различий в том, как называются и доступны ключи перевода.

Для языков с региональными вариациями следует называть каталоги или файлы языков в соответствии со стандартом ISO 15897. Например, британский английский должен называться en_GB, а не en-gb.

Общая информация

В Laravel, как и во многих фреймворках, переводы для разных языков хранятся в отдельных файлах. Существует два основных метода организации файлов перевода Laravel .

Устаревший подход предполагает хранение файлов по пути: resources/lang/{en,fr,it}/{myfile.php}.
Современный подход использует файлы resources/lang/{fr.json, it.json}.

Эта статья будет посвящена второму методу, хотя принципы применимы к обоим (с различиями в том, как называются и используются ключи перевода).

Для языков, которые различаются в зависимости от региона, рекомендуется называть каталоги и файлы языков в соответствии со стандартами ISO 15897. Например, британский английский следует обозначать как en_GB, а не en-gb.

Создание файлов перевода Laravel

Настроив локали для нашего приложения, мы можем приступить к переводу нашего стандартного приветственного сообщения.

Давайте начнем с создания новых файлов локализации в формате JSON в каталоге resources/lang. Сначала мы создадим файл resources/lang/it.json и заполним его соответствующими переводами.

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

Затем добавьте файл resources/lang/fr.json.

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

Как вы можете заметить, мы постоянно ссылаемся на сообщение по умолчанию из файла welcome.blade.php ({{ __(‘Добро пожаловать на сайт Linguise !’) }}). Нет необходимости создавать файл en.json, так как Laravel автоматически распознает, что сообщения по умолчанию на английском языке.

Настройка переключателя языков в многоязычном приложении Laravel

Кроме того, Laravel еще не настроен для переопределения локального языка, поэтому пока мы будем обрабатывать перевод непосредственно в маршруте. Измените маршрут приветствия по умолчанию в файле routes/web.php следующим образом.

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

В этом случае мы захватываем необязательный GET-параметр локали и устанавливаем текущую локаль на его основе (если запрошенная локаль поддерживается).

Теперь вы можете посетить свой сайт и добавить любой из поддерживаемых языков в качестве первого сегмента URL-адреса. Например, переход по адресу localhost/it или localhost/fr отобразит локализованный контент. Если вы не укажете локаль или выберете неподдерживаемую, Laravel по умолчанию будет использовать английский (en).

Промежуточное ПО локализации для Laravel

Включение локали в каждый URL может быть не идеальным решением и способно нарушить визуальную привлекательность сайта. Чтобы решить эту проблему, мы настроим переключатель языков и будем использовать пользовательскую сессию для отображения переведённого контента. Вы можете создать новое промежуточное программное обеспечение в файле app/Http/Middleware/Localization.php или сгенерировать его, выполнив команду artisan make:middleware Localization.

Затем добавьте следующий код внутрь.

				
					<?php

namespace App\Http\Middleware;

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

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

Это промежуточное программное обеспечение направит Laravel использовать местоположение, выбранное пользователем, если эта опция присутствует в сессии.

Поскольку нам нужно, чтобы операция выполнялась при каждом запросе, добавьте её в стандартный стек промежуточного программного обеспечения в app/Http/Kernel.php для группы веб-промежуточного программного обеспечения.

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

Изменение маршрутов

Затем определите маршрут для изменения локали в файле routes/web.php. Здесь мы используем замыкающий маршрут, но вы можете разместить тот же код внутри контроллера, если предпочитаете.

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

Кроме того, удалите переключение локали, которое ранее было добавлено в маршрут приветствия по умолчанию. Теперь ваш корневой маршрут должен выглядеть так.

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

После этого пользователь может переключить активный язык только путем перехода по адресу localhost/language/{locale}. Выбранная локаль будет сохранена в сессии, а пользователи будут перенаправлены обратно на предыдущую страницу (как это реализовано в промежуточном программном обеспечении локализации).

Чтобы проверить это, перейдите по адресу localhost/language/it (при условии, что сессионный файл cookie активен в вашем браузере), и вы должны увидеть переведённый контент. Вы можете перемещаться по сайту или обновить страницу, и выбранный язык останется активным.

Реализация переключателя языков

Теперь нам нужно предоставить пользователю кликабельную опцию для изменения переключателя языков Laravel веб , вместо того чтобы требовать от него вручную вводить коды локалей в URL. Для этого создайте простой переключатель языков. Добавьте новый файл по пути resources/views/partials/language_switcher.blade.php и вставьте следующий код.

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

Чтобы включить только что созданный переключатель языка в представление “welcome”, просто добавьте следующую строку в ваш файл welcome.blade.php в том месте, где вы хотите, чтобы появился переключатель.

				
					<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=7abf8" defer></script></body>

Откройте файл app/Providers/AppServiceProvider.php и добавьте следующий код в метод boot(), чтобы передавать текущую локаль во все представления при использовании переключателя языков

				
					* 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'));
    });
}

Расширенные возможности перевода в Laravel PHP

В этом обсуждении мы затем рассмотрим другие компоненты локализации, а именно дату, число и валюту. Вот шаги.

Локализованные даты в Laravel

Обработка дат и времени имеет решающее значение в процессе локализации. Laravel использует Carbon для управления датами и временем. Вот как можно использовать Carbon для отображения локализованной даты.

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

Этот код устанавливает локаль Carbon на основе текущей локали приложения и соответствующим образом форматирует дату.

Чтобы отобразить локализованную дату в представлении:

				
					{{ __('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 }}

Форматирование чисел и валют

В разных странах существуют различные способы форматирования чисел. Например.

Франция → 123 123,12
Германия → 123.123,12
Япония → 123,123

Чтобы учесть эти вариации в вашем приложении Laravel , вы можете использовать NumberFormatter.

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

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

Вы также можете записывать числа словами на определенном языке.

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

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

Вот валюты. Для французской локали (`fr`) валюта будет отображаться в евро (€), а для американской локали (`en_US`) — в долларах США ($).

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

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

Преодолеть языковые барьеры

Попрощайтесь с языковыми барьерами и откройте для себя безграничный рост! Попробуйте наш сервис автоматического перевода уже сегодня.

Начать перевод сейчас

Альтернативное решение Laravel локализация с Linguise

После ознакомления с этапами локализации Laravel , описанными в статье, становится ясно, что этот процесс включает множество шагов, требующих от пользователей глубокого понимания программного кода Laravel .

Это, безусловно, может создать трудности для начинающих пользователей, которые хотят локализовать свои приложения. Поэтому необходимо более инновационное решение, способное обеспечить быстрый перевод, поддерживающее локализацию и требующее всего нескольких простых шагов для внедрения.

Одним из перспективных решений является Linguise. Linguise предлагает более простой и эффективный подход к локализации Laravel без необходимости глубоких знаний программирования. Ключевые особенности Linguise включают.

Простая интеграция с Laravel
Настройте переключатель языка без программирования
Перевод изображений
Живой редактор для настройки переводов под местный контекст
Динамический перевод для динамически генерируемого контента
SEO-оптимизация для многоязычных версий

Шаги по установке Linguise на Laravel сайты также можно выполнить легко. Вот краткое объяснение.

Создайте аккаунт Linguise (используйте 30-дневную бесплатную пробную версию)
Зарегистрируйте ваш веб-домен Laravel и введите некоторую информацию. Вы получите API-ключ.
Загрузите и подключите скрипт перевода Linguise к полученной папке Laravel .
Настройте языковые URL-адреса в файле htaccess.
Вставьте скрипт переключателя языка в раздел head вашего HTML.
Настройте переключатель языка по мере необходимости
Переключатель языка появится на веб-сайте Laravel , и содержимое может быть переведено автоматически.

Как? С Linguiseвам нужно только зарегистрироваться и активировать, и переключатель языков появится. После этого вы можете свободно локализовать, например, через live-редактор, переводить медиа, изображения и т. д.

Готовы исследовать новые рынки? Попробуйте наш автоматический сервис перевода бесплатно с нашим 1-месячным безрисковым испытанием. Кредитная карта не требуется!

Получите 1-месячный бесплатный пробный период

Заключение

Локализация Laravel — это мощная функция, которая позволяет разработчикам создавать многоязычные веб-сайты и приложения. Как мы видели, встроенный процесс локализации Laravel включает несколько шагов и требует хорошего понимания фреймворка. Это может быть сложно для новичков или тех, кто ищет более быстрое решение.

Такие инструменты, как Linguise , предлагают инновационную альтернативу для тех, кто ищет более упрощённый подход. Эти решения обеспечивают быстрый перевод, лёгкую интеграцию и удобные функции, такие как настраиваемые переключатели языков и перевод изображений. Теперь создайте свою учётную запись Linguise и воспользуйтесь нашей функцией локализации вашего Laravel!