Hướng dẫn Từng Bước Định Cứu Laravel [Hướng Dẫn]

by Aorinka Anendya
4 tháng 10 năm 2024

Blog > Hướng dẫn > Từng bước Laravel Bản địa hóa [Hướng dẫn]

Laravel localization là một công cụ mạnh mẽ cho phép các nhà phát triển tạo ra các trang web đa ngôn ngữ. Bằng cách triển khai bản địa hóa web trong các dự án Laravel của bạn, bạn có thể cung cấp trải nghiệm người dùng được cá nhân hóa cho khách truy cập từ các nền tảng ngôn ngữ khác nhau, cuối cùng là mở rộng phạm vi tiếp cận và cải thiện mức độ tương tác của người dùng.

Chúng tôi sẽ hướng dẫn bạn cách triển khai bản địa hóa trong ứng dụng Laravel của bạn và giới thiệu cho bạn một công cụ có thể đơn giản hóa và nâng cao nỗ lực bản địa hóa của bạn!

Tại sao bạn nên bản địa hóa trang web Laravel ?

Dưới đây là một số lý do quan trọng khiến bạn nên bản địa hóa trang web Laravel của mình.

Tiếp cận khán giả toàn cầu: Bằng cách bản địa hóa trang web Laravel của bạn, bạn có thể mở rộng phạm vi tiếp cận ứng dụng của mình đến khán giả quốc tế. Điều này cho phép người dùng từ các quốc gia và nền tảng ngôn ngữ khác nhau hiểu và tương tác với nội dung của bạn.
Cải thiện trải nghiệm người dùng: Bản địa hóa cho phép người dùng tương tác với ứng dụng bằng ngôn ngữ mẹ đẻ của họ, điều này cải thiện đáng kể trải nghiệm người dùng. Điều này có thể tăng tỷ lệ tương tác, giảm tỷ lệ thoát trang và tăng chuyển đổi.
Lợi thế cạnh tranh: Trong một thị trường toàn cầu cạnh tranh, việc cung cấp ứng dụng bằng nhiều ngôn ngữ có thể mang lại lợi thế đáng kể so với đối thủ. Điều này thể hiện cam kết của bạn đối với thị trường quốc tế và có thể giúp bạn thâm nhập thị trường mới hiệu quả hơn.
Cải thiện SEO: Các trang web được bản địa hóa tốt có xu hướng xếp hạng cao hơn trên các công cụ tìm kiếm cho các tìm kiếm bằng một ngôn ngữ cụ thể. Điều này có thể tăng lưu lượng truy cập blog của bạn và khả năng hiển thị trực tuyến trên nhiều thị trường khác nhau với dịch thuật đa ngôn ngữ.

Yêu cầu cho việc bản địa hóa Laravel đa ngôn ngữ

Có một số yêu cầu và bước cần xem xét khi triển khai bản địa hóa đa ngôn ngữ trong Laravel.

Để có các tính năng bản địa hóa mới nhất, hãy đảm bảo bạn đang sử dụng phiên bản mới nhất của Laravel (ví dụ: phiên bản 10.x).
Hiểu biết cơ bản về PHP và framework Laravel sẽ hữu ích trong quá trình triển khai.
Thiết lập môi trường phát triển cục bộ hoặc máy chủ hỗ trợ Laravel, bao gồm máy chủ web và cơ sở dữ liệu.
Xác định các ngôn ngữ mà ứng dụng của bạn sẽ hỗ trợ ngay từ đầu.

Bản dịch Laravel đơn giản

Sau khi hiểu rõ những yêu cầu cần đáp ứng trước khi dịch một ứng dụng hoặc web Laravel , chúng tôi sẽ cung cấp một số bước để dịch Laravel một cách đơn giản.

Để làm điều này, hãy mở tệp view mà bạn muốn bản địa hóa, ví dụ: resources/views/welcome.blade.php. Sau đó, thay thế thẻ body bằng mã sau.

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

Như bạn có thể thấy, văn bản ở trên hiện đang được viết trực tiếp trong mã. Điều này kém hiệu quả và gây khó khăn cho việc dịch trang web sang các ngôn ngữ khác nhau (quốc tế hóa).

Chúng ta sẽ làm cho văn bản trên linh hoạt hơn để có thể dễ dàng thích ứng với các ngôn ngữ khác nhau. Laravel cung cấp một tính năng rất hữu ích cho việc này; hệ thống bản địa hóa. Bước đầu tiên, hãy thay thế văn bản hiện có bằng mã sau.

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

Laravel sẽ hiển thị văn bản ở trên theo mặc định và tra cứu bản dịch nếu người dùng chọn ngôn ngữ khác ngoài tiếng Anh. Trong trường hợp này, tiếng Anh sẽ được sử dụng làm ngôn ngữ mặc định của ứng dụng.

Thiết lập ngôn ngữ trong một trang web đa ngôn ngữ Laravel

Nhưng làm thế nào để Laravel xác định ngôn ngữ hiện tại hoặc biết những ngôn ngữ nào có sẵn trong ứng dụng? Nó kiểm tra cài đặt locale trong tệp config/app.php. Mở tệp này và tìm hai khóa sau.

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

Giải thích ở trên về các khóa cần phải rõ ràng. Tóm lại, khóa locale giữ locale mặc định cho ứng dụng của bạn (nếu không có locale nào khác được chỉ định trong mã). fallback_locale được kích hoạt nếu một locale không tồn tại được yêu cầu trong ứng dụng của bạn.

Bây giờ, hãy thêm một khóa mới vào tệp này để cung cấp danh sách tất cả các ngôn ngữ được hỗ trợ.

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

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

Tại thời điểm này, chúng tôi đã thử Laravel web để hỗ trợ ba ngôn ngữ, cụ thể là tiếng Anh, tiếng Ý và tiếng Pháp.

Tổng quan về tệp dịch Laravel

Trong Laravel, cũng như trong nhiều framework khác, các bản dịch cho các ngôn ngữ khác nhau được lưu trữ trong các tệp riêng biệt. Hai phương pháp được sử dụng để tổ chức các tệp dịch này.

Phương pháp cũ lưu trữ tệp theo cấu trúc sau: resources/lang/{en,fr,it}/{myfile.php}. Phương pháp mới hơn sử dụng tệp JSON, chẳng hạn như resources/lang/{fr.json, it.json}. Bài viết này sẽ tập trung vào phương pháp mới hơn, mặc dù các nguyên tắc tương tự đối với phương pháp cũ hơn, ngoại trừ sự khác biệt về cách đặt tên và truy cập các khóa dịch.

Đối với các ngôn ngữ có biến thể theo khu vực, bạn nên đặt tên thư mục hoặc tệp ngôn ngữ theo tiêu chuẩn ISO 15897. Ví dụ: tiếng Anh Anh sẽ được đặt tên là en_GB thay vì en-gb.

Thông tin chung

Trong Laravel, cũng như nhiều framework khác, bản dịch cho các ngôn ngữ khác nhau được lưu trữ trong các tệp riêng biệt. Có hai phương pháp chính để tổ chức các tệp dịch Laravel .

Cách tiếp cận cũ liên quan đến việc lưu trữ các tệp dưới đường dẫn: resources/lang/{en,fr,it}/{myfile.php}.
Cách tiếp cận hiện đại sử dụng các tệp resources/lang/{fr.json, it.json}.

Bài viết này sẽ tập trung vào phương pháp thứ hai, mặc dù các nguyên tắc có thể áp dụng cho cả hai (với sự khác biệt về cách đặt tên và truy cập các khóa dịch).

Đối với các ngôn ngữ khác nhau theo khu vực, bạn nên đặt tên thư mục/tệp ngôn ngữ theo tiêu chuẩn ISO 15897. Ví dụ: tiếng Anh Anh sẽ được ký hiệu là en_GB thay vì en-gb.

Tạo tệp dịch Laravel

Sau khi đã cấu hình các locale cho ứng dụng của chúng ta, chúng ta có thể tiến hành dịch thông điệp chào mừng mặc định.

Hãy bắt đầu bằng cách tạo các tệp bản địa hóa mới ở định dạng JSON trong thư mục resources/lang. Đầu tiên, chúng ta sẽ tạo tệp resources/lang/it.json và điền vào đó các bản dịch phù hợp.

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

Tiếp theo, thêm tệp resources/lang/fr.json.

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

Như bạn có thể thấy, chúng ta đang liên tục tham chiếu thông điệp mặc định từ tệp welcome.blade.php ({{ __(‘Welcome to Linguise website!’) }}). Không cần tạo tệp en.json, vì Laravel tự động nhận ra rằng các thông điệp mặc định là tiếng Anh.

Thiết lập trình chuyển đổi ngôn ngữ trong ứng dụng đa ngôn ngữ Laravel

Hơn nữa, Laravel chưa được thiết lập để ghi đè ngôn ngữ cục bộ, vì vậy hiện tại, chúng ta sẽ xử lý bản dịch trực tiếp trong route. Sửa đổi route welcome mặc định bên trong tệp routes/web.php như thế này.

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

Trong trường hợp này, chúng tôi đang nắm bắt một tham số GET locale tùy chọn và đặt locale hiện tại dựa trên nó (nếu locale được yêu cầu được hỗ trợ).

Bây giờ, bạn có thể truy cập trang web của mình và thêm bất kỳ ngôn ngữ được hỗ trợ nào làm phân đoạn đầu tiên trong URL. Ví dụ: truy cập localhost/it hoặc localhost/fr sẽ hiển thị nội dung được bản địa hóa. Nếu bạn không chỉ định locale hoặc chọn một locale không được hỗ trợ, Laravel sẽ mặc định là tiếng Anh (en).

Middleware bản địa hóa cho Laravel

Việc bao gồm locale trong mọi URL có thể không lý tưởng và có thể làm gián đoạn tính thẩm mỹ của trang web. Để giải quyết vấn đề này, chúng ta sẽ thiết lập một trình chuyển đổi ngôn ngữ và sử dụng phiên người dùng để hiển thị nội dung đã dịch. Bạn có thể tạo middleware mới trong tệp app/Http/Middleware/Localization.php hoặc tạo nó bằng cách chạy lệnh artisan make:middleware Localization.

Sau đó, thêm đoạn mã sau vào bên trong.

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

Middleware này sẽ hướng dẫn Laravel sử dụng vị trí do người dùng chọn nếu tùy chọn này có trong phiên.

Vì chúng ta cần thao tác này chạy trên mọi yêu cầu, hãy thêm nó vào ngăn xếp middleware mặc định trong app/Http/Kernel.php cho nhóm middleware web.

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

Sửa đổi các tuyến đường

Tiếp theo, định nghĩa một route để thay đổi locale trong file routes/web.php. Ở đây chúng ta đang sử dụng closure route, nhưng bạn có thể đặt cùng đoạn code đó bên trong một controller nếu muốn.

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

Ngoài ra, hãy xóa tính năng chuyển đổi ngôn ngữ đã được thêm trước đó vào tuyến đường chào mừng mặc định. Tuyến đường gốc của bạn bây giờ sẽ trông như thế này.

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

Sau khi hoàn tất, người dùng chỉ có thể chuyển đổi ngôn ngữ đang hoạt động bằng cách truy cập localhost/language/{locale}. Ngôn ngữ đã chọn sẽ được lưu trong phiên và người dùng sẽ được chuyển hướng trở lại trang trước đó (như được xử lý bởi middleware Localization).

Để kiểm tra, hãy truy cập localhost/language/it (giả sử cookie phiên đang hoạt động trong trình duyệt của bạn), và bạn sẽ thấy nội dung đã được dịch. Bạn có thể điều hướng trang web hoặc làm mới trang, và ngôn ngữ đã chọn sẽ vẫn có hiệu lực.

Triển khai tính năng chuyển đổi ngôn ngữ

Bây giờ, chúng ta cần cung cấp cho người dùng một tùy chọn có thể nhấp để thay đổi trình chuyển đổi ngôn ngữ Laravel web thay vì yêu cầu họ nhập mã ngôn ngữ vào URL theo cách thủ công. Để đạt được điều này, hãy tạo một trình chuyển đổi ngôn ngữ đơn giản. Thêm một tệp mới tại resources/views/partials/language_switcher.blade.php và chèn đoạn mã sau.

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

Để bao gồm công cụ chuyển đổi ngôn ngữ mới được tạo trong chế độ xem “welcome”, chỉ cần thêm dòng sau vào tệp welcome.blade.php của bạn tại vị trí bạn muốn công cụ chuyển đổi xuất hiện.

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

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

Mở tệp app/Providers/AppServiceProvider.php và thêm mã sau vào phương thức boot() để chia sẻ ngôn ngữ hiện tại với tất cả các chế độ xem khi công cụ chuyển đổi ngôn ngữ được sử dụng

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

Các tính năng dịch thuật nâng cao trong Laravel PHP

Trong phần thảo luận này, chúng ta sẽ xử lý các thành phần bản địa hóa khác, cụ thể là ngày, số và tiền tệ. Dưới đây là các bước.

Ngày tháng được bản địa hóa trong Laravel

Xử lý ngày và giờ là rất quan trọng trong quá trình localization. Laravel sử dụng Carbon để quản lý ngày và giờ. Đây là cách bạn có thể sử dụng Carbon để hiển thị ngày đã được bản địa hóa.

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

Đoạn mã này thiết lập ngôn ngữ Carbon dựa trên ngôn ngữ hiện tại của ứng dụng và định dạng ngày tháng cho phù hợp.

Để hiển thị ngày đã bản địa hóa trong một view:

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

Định dạng số và tiền tệ

Các quốc gia khác nhau có nhiều cách định dạng số khác nhau. Ví dụ.

Pháp → 123 123,12
Đức → 123.123,12
Nhật Bản → 123,123

Để thích ứng với những biến thể này trong ứng dụng Laravel của bạn, bạn có thể sử dụng NumberFormatter.

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

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

Bạn cũng có thể viết số bằng chữ trong một ngôn ngữ cụ thể.

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

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

Đây là các loại tiền tệ. Đối với ngôn ngữ Pháp (`fr`), tiền tệ sẽ được hiển thị bằng euro (€), trong khi đối với ngôn ngữ Hoa Kỳ (`en_US`), nó sẽ được hiển thị bằng đô la Mỹ ($).

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

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

Phá vỡ rào cản ngôn ngữ

Tạm biệt rào cản ngôn ngữ và chào đón sự phát triển không giới hạn! Hãy dùng thử dịch vụ dịch tự động của chúng tôi ngay hôm nay.

Bắt đầu dịch ngay

Giải pháp thay thế bản địa hóa Laravel với Linguise

Sau khi hiểu các bước của Laravel localization như được mô tả trong bài viết, quá trình này bao gồm nhiều bước yêu cầu người dùng hiểu sâu về mã chương trình Laravel .

Điều này chắc chắn có thể gây khó khăn cho người dùng mới muốn bản địa hóa ứng dụng của họ. Do đó, cần một giải pháp sáng tạo hơn có khả năng dịch nhanh, hỗ trợ bản địa hóa và chỉ cần một vài bước đơn giản để triển khai.

Một giải pháp đầy hứa hẹn là Linguise. Linguise cung cấp một cách tiếp cận dễ dàng và hiệu quả hơn để bản địa hóa Laravel mà không cần kiến thức lập trình chuyên sâu. Các tính năng chính của Linguise bao gồm.

Tích hợp dễ dàng với Laravel
Tùy chỉnh trình chuyển đổi ngôn ngữ mà không cần viết mã
Dịch hình ảnh
Trình chỉnh sửa trực tiếp để tùy chỉnh bản dịch theo ngữ cảnh địa phương
Dịch động cho nội dung được tạo động
Tối ưu hóa SEO cho các phiên bản đa ngôn ngữ

Các bước để cài đặt Linguise trên các trang web Laravel cũng có thể được thực hiện dễ dàng. Dưới đây là giải thích ngắn gọn.

Tạo tài khoản Linguise (sử dụng bản dùng thử miễn phí 30 ngày)
Đăng ký tên miền web Laravel của bạn và nhập một số thông tin. Bạn sẽ nhận được khóa API.
Tải lên và kết nối tập lệnh dịch Linguise với thư mục Laravel bạn đã nhận.
Thiết lập URL ngôn ngữ trong tệp htaccess.
Chèn script chuyển đổi ngôn ngữ vào phần head của HTML của bạn.
Tùy chỉnh trình chuyển đổi ngôn ngữ theo nhu cầu
Công tắc chuyển đổi ngôn ngữ sẽ xuất hiện trên web Laravel và nội dung có thể được dịch tự động.

Bằng cách nào? Với Linguise, bạn chỉ cần đăng ký và kích hoạt, và trình chuyển đổi ngôn ngữ sẽ xuất hiện. Sau đó, bạn có thể tự do bản địa hóa, ví dụ như thông qua trình chỉnh sửa trực tiếp, dịch phương tiện, hình ảnh, v.v.

Sẵn sàng khám phá thị trường mới? Hãy thử dịch vụ dịch tự động của chúng tôi miễn phí với thử nghiệm không rủi ro 1 tháng. Không cần thẻ tín dụng!

Yêu cầu dùng thử miễn phí 1 tháng

Kết luận

Bản địa hóa Laravel là một tính năng mạnh mẽ cho phép các nhà phát triển tạo ra các trang web và ứng dụng đa ngôn ngữ. Như chúng ta đã thấy, quy trình bản địa hóa Laravel tích hợp sẵn bao gồm nhiều bước và đòi hỏi sự hiểu biết tốt về framework. Điều này có thể gây khó khăn cho người mới bắt đầu hoặc những người đang tìm kiếm một giải pháp nhanh chóng hơn.

Các công cụ như Linguise cung cấp một giải pháp thay thế sáng tạo cho những ai đang tìm kiếm một cách tiếp cận tinh gọn hơn. Những giải pháp này mang lại khả năng dịch nhanh chóng, tích hợp dễ dàng và các tính năng thân thiện với người dùng như công cụ chuyển đổi ngôn ngữ có thể tùy chỉnh và dịch hình ảnh. Bây giờ, hãy tạo Linguise tài khoản của bạn và tận hưởng tính năng bản địa hóa Laravel của chúng tôi!