Nếu các bạn đã làm việc với Laravel, chắc hẳn các bạn đã nghe khái niệm Localization, hay cũng có nghe đến i18n nhỉ. Laravel đã cung cấp cách thức rất đơn giản để ta có thể làm một website localization. Nhưng trong quá trình là project, mình còn có dùng đến JS, có rất nhiều đoạn text (ví dụ như thông báo) được tạo ra từ JS thì làm thế nào để có thể làm chúng đa ngôn ngữ nhỉ? Bài viết này mình sẽ gợi ý cách làm đơn giản để làm localization trong JS. Ngoài ra, trong quá trình tìm hiểu, mình thấy một vài package ở phần cuối bài, các bạn tìm hiểu thêm nhé.
Tóm Tắt
1. Localization là gì?
Nói một cách đơn thuần, website localization là một website hoàn toàn có thể quy đổi từ ngôn từ này sang ngôn từ khác, tùy thuộc vào lựa chọn của người dùng web .Để hoàn toàn có thể quy đổi linh động giữa những ngôn từ, website của bạn phải có vừa đủ bản dịch của những ngôn từ mà bạn muốn quy đổi. Khi đó, website của bạn sẽ có đa ngôn ngữ .
2. Localization trong Laravel
Vì bài viết này mình tập chung vào i18n trong JS nên sẽ chỉ nói qua về i18n trong back-end với Laravel nhé.
Laravel cung cấp cách làm đa ngôn ngữ rất đơn giản, dễ thực hiện. Ngôn ngữ mặc định ban đầu của Laravel là en. Nó được xác định trong file config/app.php, với key là locale. Vì vậy, khi cần thay đổi ngôn ngữ, chúng ta chỉ cần thay đổi config này mà thôi. Laravel cũng cung cấp đầy đủ cách để chúng ta lấy ra hoặc thay đổi config này. Để lấy ra ngôn ngữ đang dùng, có thể dùng config(‘app.locale’) hoặc App::getLocale(). Để thay đổi ngôn ngữ đang dùng, ta dùng App::setLocale($lang) với $lang là ngôn ngữ muốn cài đặt.
Như vậy, việc chúng ta cần làm gần như chỉ là tạo ra các bản dịch của các nội dung bạn muốn hiển thị ra màn hình theo các ngôn ngữ mà ta cần. Các bản dịch được lưu trong thư mục resources/langs.
Khi mới tạo project, ta sẽ thấy trong thư mục này có thư mục en. Đây là bản dịch mặc định bằng tiếng anh, trong đó có phần dịch cho các thông báo xác thực, kiểm tra.
Trong mỗi file ngôn ngữ này, các đoạn text được định nghĩa thông qua 1 mảng kiểu key => value.
Ví dụ: file password.php
| 1234567891011121314151617181920212223 |
vàlt;?php return[ / * | ————————————————————————– | Password Reset Language Lines | ————————————————————————– | | The following language lines are the default lines which match reasons | that are given by the password broker for a password update attempt | has failed, such as for an invalid token or invalid new password . | * / ‘ reset ‘= vàgt;’ Your password has been reset ! ‘, ‘ sent ‘= vàgt;’ We have emailed your password reset link ! ‘, ‘ throttled ‘= vàgt;’ Please wait before retrying. ‘, ‘ token ‘= vàgt;’ This password reset token is invalid. ‘, ‘ user ‘= vàgt;” We can’t find a user with that email address. “, ]; |
Khi cần hiển thị 1 đoạn text, thay vì viết hẳn đoạn text đó ra thì ta sẽ gọi thông qua key của nó được xác định trong file này. Ta có thể dùng hàm trans() hoặc @lang() để xác định đoạn text cần in ra màn hình.
Ví dụ:
trans('auth.failed'); hoặc @lang('auth.failed');
Để tạo bản dịch cho ngôn ngữ khác, ta chỉ cần thêm 1 thư mục ngang hàng với thư mục en, sau đó dịch lại các đoạn text tương ứng với các key trong thư mục en là được. Ví dụ, để thêm tiếng việt, ta thêm 1 thư mục vi, bên trong cũng có 4 file ngôn ngữ như trong en. Sau đó thay đổi locale = ‘vi' thì web sẽ chuyển sang tiếng việt rồi.
Ngắn gọn ý chính như vậy thôi, ta sẽ xem cách làm i18n trong JS nhé .
3. Cách làm localization trong JS trong project Laravel
Ý tưởng ban đầu sẽ là tạo ra 1 biến lưu lại toàn bộ nội dung các bản dịch và có thể truy cập ở tất cả các view. Cách đơn giản nhất có thể nghĩ đến là dùng View::share đúng không các bạn? 
). Ngoài ra các bạn có thể viết riêng thành ViewComposer hoặc dùng Cache để lưu nhé.). Ngoài ra những bạn hoàn toàn có thể viết riêng thành ViewComposer hoặc dùng Cache để lưu nhé .Như vậy, ta có :Bước 1 : Tạo 1 biến được san sẻ cho toàn bộ những view
Bước 2: Ta sẽ gán biến này cho window object để bên JS có thể đọc được dễ dàng.
Bước 3 : Viết JS function để giải quyết và xử lý đa ngôn ngữ .⇒ Cùng xem ví dụ nhé)Vì mình làm ví dụ đơn thuần nên mình chỉ có 1 view với 1 button hiển thị thông tin ( alert ) bằng JS như thế này :Test. blade.php
| 1234567 |
vàlt;body toàn thânvàgt; vàlt;divclass=” container “vàgt; vàlt;buttonclass=” btn “vàgt;{{trans(‘ i18n.alert ‘)}}vàlt;/buttonvàgt; vàlt;/divvàgt; vàlt;scripttype=” text / javascript “src=” js / i18n.js “vàgt;vàlt;/scriptvàgt; vàlt;/body toàn thânvàgt; |
js / i18n.js
| 123456 |
USD(document).ready(function(){ USD(‘. btn ‘).click(function(){ alert(‘Hello’); }) }) |
File đa ngôn ngữ bằng tiếng anh và tiếng việt :en / i18n.php
| 123456789 |
vàlt;?php return[ ‘ alert ‘= vàgt;’ Alert ‘, ‘ message ‘= vàgt;[ ‘ hello ‘= vàgt;’ Hello ! ‘, ], ]; |
vi / i18n.php
| 123456789 |
vàlt;?php return[ ‘ alert ‘= vàgt;’ Thông báo ‘, ‘ message ‘= vàgt;[ ‘ hello ‘= vàgt;’ Xin chào ! ‘, ], ]; |
Như vậy, khi nhấn button Alert, ta sẽ có 1 thông báo hiển thị chữ “Hello” phải không? Dù khi bạn đổi ngôn ngữ thì nó vẫn chỉ là “Hello” mà thôi. Ta cùng làm nó đổi ngôn ngữ nhé.
Bước 1: Tạo 1 ServiceProvider để chia sẻ biến ra toàn bộ các view.
Trong hàm construct(), ta xác định file ngôn ngữ tương ứng với ngôn ngữ hiện tại.
Trong hàm boot(), ta chia sẻ nội dung file ngôn ngữ ở dạng json cho các view, với tên là $translation.
| 12345678910111213141516171819202122232425262728293031323334353637383940
41 4243 |
vàlt;?php namespaceAppProviders; useIlluminateSupportFacadesApp; useIlluminateSupportFacadesFile; useIlluminateSupportServiceProvider; useIlluminateSupportFacadesView; classTranslationServiceProviderextendsServiceProvider { / * * * The path to the current lang files . * * @ var string * / protectedUSDlangPath; / * * * Create a new service provider instance . * * @ return void * / publicfunction__construct() { USDthis-vàgt;langPath=resource_path(‘ lang / ‘.App::getLocale()); } / * * * Bootstrap the application services . * * @ return void * / publicfunctionboot() { View::share(‘ translation ‘,collect(File::allFiles(USDthis-vàgt;langPath))-vàgt;flatMap(function(USDfile){ return[ (USDtranslation=USDfile-vàgt;getBasename(‘. php ‘))= vàgt;trans(USDtranslation), ]; })-vàgt;toJson()); } } |
Bước 2: Gán biến này cho window object
Trong file blade :
| 1234 |
vàlt;scriptvàgt; window.translations={!!USDtranslation!!}; vàlt;/scriptvàgt; |
Bước 3: Viết JS function để xử lý đa ngôn ngữ.
Trong file JS, ta khai báo function trans(key) để sử dụng giống như hàm trans() ở back-end. Tất nhiên, các bạn có thể chọn tên function khác.
| 12345678910 |
functiontrans(key,replace={}){ lettranslation=key.split(‘. ‘).reduce((t,i)= vàgt;t[i]| |null,window.translations); for(varplaceholderinreplace){ translation=translation.replace(`:USD{placeholder}`,replace[placeholder]); } returntranslation; } |
Đọc kỹ function này, bạn sẽ thấy nó chỉ là thao tác tách chuỗi từ key để tìm ra đoạn text tương ứng trong biến window.translations thôi. Khi đó, ta truyền key vào giống hệt như cách dùng với hàm trans() của blade nhé.
Sau khi khai báo xong hàm này, ta sẽ thay đổi phần code thông báo ban đầu một chút. Thay vì chữ “Hello” thì mình sẽ dùng function trans() này nhé.
| 1234 |
USD(‘. btn ‘).click(function(){ alert(trans(‘i18n.message.hello’)); }) |
Bạn sẽ thấy thông tin này biến hóa theo ngôn từ mà bạn chọn rồi đấy .
4. Tổng kết
Ở bài viết này, mình đã đưa ra cách làm đơn thuần để hoàn toàn có thể đa ngôn ngữ trong JS với project Laravel. Các bạn hoàn toàn có thể vận dụng cho những đoạn text giải quyết và xử lý bên JS như những thông tin ví dụ điển hình. Bài viết tiếp theo mình sẽ đưa ra cách làm nâng cao hơn, ví dụ như viết hàm trans_choice ( ) như ở blade)Package về Localization trong JS để những bạn tìm hiểu thêm nhéhttps://github.com/conedevelopment/i18nhttps://github.com/rmariuzzo/Laravel-JS-Localization
https://github.com/martinlindhe/laravel-vue-i18n-generator
Tài liệu tham khảo
https://laravel.com/docs/8.x/localizationhttps://pineco.de/using-laravels-localization-js/https://stackoverflow.com/questions/55262493/laravels-localization-on-javascript-variables
Source: https://final-blade.com
Category: Kiến thức Internet
