JavaScript đa ngôn ngữ là tính năng phổ biến trên các ứng dụng, phần mềm và website. Theo dõi bài viết này để tìm hiểu:
Chiến lược bản địa hóa website là quá trình chuyển đổi tất cả thành phần website, đảm bảo tương thích với văn hóa của khu vực mục tiêu. Những thành phần được dịch thuật trên website gồm:
JavaScript Localization là:
JavaScript đa ngôn ngữ là tạo tính năng đa ngôn ngữ cho website bằng ngôn ngữ lập trình JavaScript. Hiện nay, có nhiều thư viện có sẵn cho phép thực hiện:
Để tạo JavaScript đa ngôn ngữ cho website, quý vị cần cài đặt tệp multi-language.js
Có 2 cách thực hiện:
Cách 1: Sử dụng CDN. Sao chép và dán đoạn mã sau vào trong thẻ <head> của website.
<script src="https://cdn.jsdelivr.net/gh/askask11/[email protected]/dist/multi-language.min.js" integrity="sha256-xL5PbSBwYLKYaUvdDP2S/lnF9s3oAPm/92GnACZBe2c=" crossorigin="anonymous"></script>Cách 2: Thực hiện thủ công
<script src="js/multi-language.min.js"></script>Tiếp theo, quý vị thực hiện theo các bước dưới đây để tiến hành bản địa hóa JavaScript cho website
Thiết lập ID cho tất cả các phần tử sẽ chạm trực tiếp vào văn bản. Có thể bọc văn bản bằng phần tử span.
Ví dụ:
<!--The id will be used to locate the element.-->
<div id="c1">Internationalization is very important, indeed.</div>
<!--You should label text-only children elements, and use their id for reference later.-->
<div>
<img src="img/image.png" >
<!--Label the element that is directly in contact with the text.-->
<span id="c2">
Do you really want to translate me?
</span>
<!--You may also include simple mark-ups for the text-->
<span id="c3">
Yes, because <strong>you<strong> are <u>not</u> fancy enough.
</span>
</div>Trang dịch là một Mảng JSON chứa các phần tử ID của tài liệu và các văn bản bên trong tương ứng bằng những ngôn ngữ khác nhau. Thư viện này sẽ đọc bản dịch và áp dụng vào tài liệu sao cho phù hợp.
Quý vị có thể thực hiện 1 trong 2 cách:
<script id="translation-sheet" type="application/json">** BẢN DỊCH **</script> trong phần Trang HTML cần dịch. Lưu ý: Viết nó trước khi kích hoạt tập lệnh.
Cấu trúc của bản dịch
Trang dịch là một Mảng JSON bao gồm nhiều Đối tượng JSON. Mỗi đối tượng đại diện cho một phần tử cần dịch.
Ví dụ đơn giản về một bản dịch
[
{
"id":"**THE ID OF THE TEXT ELEMENT**",
"langs":{
"en":"Hello!",
"es":"¡Hola!",
"zh":"你好(nihao)！"
}
},
{
"id":"**THE ID OF ANOTHER TEXT ELEMENT**",
"langs":{
"en":"Goodbye",
"es":"Adiós",
"zh":"再见"
}
},
{...},
{...},
......
]Một trang dịch hoàn chỉnh ví dụ
<img src="welcome.png">
<div id="welcome-txt">
Hello! (I am the default text)
</div>
<br>
...
<br>
<input placeholder="Enter Your Name" id="name-input">
<button id="farewell-btn" title="Thank you for visiting!" onclick="alert('Have a good day!');">
Goodbye!
</button>Một trang dịch JSON
[
{
"id":"welcome-txt",
"langs":
{
"en":"Hello!",
"es":"¡Hola!",
"zh":"你好(nihao)！"
}
},
{
"id":"name-input",
"attr":
{
"placeholder":
{
"en":"Please enter your name",
"es":"Por favor ingrese su nombre aquí",
"zh":"请输入您的姓名"
}
}
},
{
"id":"farewell-btn",
"langs":
{
"en":"Goodbye",
"es":"Adiós",
"zh":"再见"
},"attr":
{
"title":
{
"en":"Thank you for visiting.",
"es":"Gracias por su visita.",
"zh":"谢谢访问！"
},"onclick":
{
"en":"alert('Have a good day!');",
"es":"alert('¡Que tenga un buen día!');",
"zh":"alert('祝您有美好的一天！');",
"ko":"alert('좋은 하루 되세요！');",
"vi":"alert('Chúc bạn ngày mới tốt lành');"
}
}
}
]Để kích hoạt tính năng dịch trên trang web, tạo một trình dịch ở cuối thẻ body trong HTML. Hàm tạo của lớp MultiLingual chấp nhận 3 tham số, không có tham số nào là bắt buộc. Bao gồm:
1. defaultLanguage:
2. externalJSON:
3. select:
<select> có các tùy chọn ngôn ngữ được hỗ trợ. <option> đã chọn. Để tải tệp trang tính bên ngoài vào phần tử, quý vị làm theo ví dụ sau:
var xhr = new XMLHttpRequest(); //Create an xhr instance
var translator = new MultiLanguage(); // define translator, create a default instance
xhr.open("***HTTP METHOD TO USE***","***LINK TO YOUR SHEET.json***"); // Define target file and HTTP method to use.
xhr.onreadystatechange=(e)=>{
if(xhr.readyState === 4 && xhr.status === 200)
{
var jsonResponse = JSON.parse(xhr.responseText); // get response text and parse it into JSON.
translator.addSheet(jsonResponse);
}
}
xhr.send()Nếu đã viết bản dịch vào bên trong HTML thì có thể làm theo ví dụ này:
var json = JSON.parse(document.getElementById("translation-sheet").innerHTML);
var translator = new MultiLanguage("en",json);Lưu ý: Có thể lặp lại các bước trên để nạp nhiều trang nhưng KHÔNG được nạp cùng một trang nhiều lần.
Có thể cho phép người dùng kiểm soát ngôn ngữ trang bằng cách xác định phần tử <select> trong trang. Sau đó, đăng ký <select> cho trình dịch hoặc chuyển đối tượng Element của lựa chọn đó cho hàm tạo.
Quý vị cũng có thể gọi hàm dịch (ngôn ngữ) theo cách thủ công.
Ví dụ chọn HTML:
<select id="languages">
<option value="en">
English (Default)
</option>
<option value="zh">
简体中文
</option>
</select>Để Đăng ký (liên kết), hãy chọn phiên bản dịch:
var translator = new MultiLanguage(select=document.getElementById("languages")); // you may pass it to the constructorHoặc
var translator = new MultiLanguage();
translator.registerSelect(document.getElementById("languages")) // You may call method "registerSelect" to register itGọi lại phương thức trên, quý vị có thể đăng ký nhiều phần tử được chọn. Lưu ý không được đăng ký cùng một phần tử nhiều lần.
Phần tử chọn đăng ký có thể kiểm soát cài đặt ngôn ngữ chung và sẽ thay đổi tương ứng khi cài đặt ngôn ngữ thay đổi.
Như vậy, quý vị đã cài đặt thành công JavaScript đa ngôn ngữ cho website!
API (API web):
API dịch thuật là cách xây dựng website đa ngôn ngữ hiệu quả, nhưng vẫn còn nhiều bất lợi. Tùy từng trường hợp, quý vị cân nhắc có nên sử dụng JavaScript đa ngôn ngữ API hay không.
Dịch vụ trọn gói cho website đa ngôn ngữ ngày càng được quan tâm. Việc triển khai đa ngôn ngữ cho website yêu cầu kiến thức chuyên môn và đội ngũ chuyên gia.
Công ty dịch thuật Thao & Co. tự hào là cầu nối đưa các cá nhân và doanh nghiệp ra quốc tế. Ứng dụng công nghệ cao, chúng tôi mang đến những giải pháp sáng tạo, tối ưu.
Những lợi ích khi hợp tác cùng Thao & Co.:
Để được tư vấn và giải đáp các thắc mắc về dịch vụ dịch thuật website, hãy liên hệ ngay cho Thao & Co. tại trang Nhận Báo Giá.
