Đa ngôn ngữ (Multi Language) là một tính năng phổ biến trên các ứng dụng, phần mềm và website. Mở rộng khả năng tiếp cận thông qua việc cung cấp nhiều ngôn ngữ khác nhau được xem là chức năng bắt buộc trong thời đại hiện nay. Có rất nhiều phương pháp thực hiện đa ngôn ngữ cho website, bài viết này sẽ hướng dẫn quý vị cách tạo JavaScript đa ngôn ngữ đơn giản.
Chiến lược bản địa hóa website là quá trình chuyển đổi tất cả các thành phần của 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 bao gồm nội dung bằng văn bản, âm thanh, hình ảnh, các biểu tượng, màu sắc, ký hiệu, đôi khi là cả bố cục, giao diện và chức năng.
Bản địa hóa website giúp trang web có thể dễ dàng tiếp cận với thị trường mục tiêu, thông qua việc chuyển đổi các thành phần trang web sao cho nội dung dễ hiểu, dễ đọc và gần gũi.
JavaScript Localization là thuật ngữ chỉ quá trình chuyển đổi mã JavaScript sang nhiều ngôn ngữ. Hay nói cách khác là thiết kế website có thể xử lý nhiều định dạng ngôn ngữ khác nhau bằng mã JavaScript. Hoạt động này cần những chuyên gia có kinh nghiệm bản địa hóa JavaScript để đạt hiệu quả tối ưu.
JavaScript đa ngôn ngữ là việc tạo tính năng đa ngôn ngữ cho website bằng cách sử dụng ngôn ngữ lập trình JavaScript. Hiện nay, quý vị có thể tìm thấy nhiều thư viện có sẵn, cho phép thực hiện nhiều hành động như xử lý đa ngôn ngữ, bản địa hóa nội dung, tải tệp JSON, phát hiện ngôn ngữ mặc định, phát hiện các cụm từ không tồn tại,…
Để tạo JavaScript đa ngôn ngữ cho website, quý vị cần cài đặt tệp multi-language.js, có hai cách thực hiện:
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>Đầu tiên, quý vị cần tải xuống tệp multi-language.js và phân phối nó từ nguồn của mình. Lưu ý, quý vị phải kiểm tra các phiên bản trước khi tải xuống, giải nén sau khi hoàn tất, đến thư mục dist trong thư mục gốc và đặt tệp multi-language.js hoặc multi-language.min.js trong thư mục dự án web của quý vị và đưa nó vào trang web bằng câu lệnh sau:
<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
Điều đầu tiên quý vị cần làm là phải xác định mã riêng cho từng ngôn ngữ. Giả sử, quý vị có thể sử dụng ký tự “en” để đại diện cho ngôn ngữ là tiếng Anh, “ko” cho tiếng Hàn hay “vi” cho tiếng Việt.
Quý vị có thể tham khảo bảng mã ngôn ngữ ISO 639 được sử dụng phổ biến trên toàn thế giới để chuẩn hóa cách sử dụng ký hiệu, tránh gây thiếu nhất quán.
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. Quý vị 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 của chú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ể viết trang tính này vào một tệp JSON bên ngoài hoặc viết trực tiếp nó vào trong mã bằng một thẻ như <script id="translation-sheet" type="application/json">** BẢN DỊCH **</script> trong phần Trang HTML cần dịch. Viết nó trước khi kích hoạt tập lệnh.
Trang dịch là một Mảng JSON bao gồm nhiều Đối tượng JSON và mỗi đối tượng đại diện cho một phần tử cầ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":"再见"
}
},
{...},
{...},
......
] <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>[
{
"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, quý vị phải 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:
<select> có các tùy chọn chứa các ngôn ngữ được hỗ trợ. Ngôn ngữ hiện tại sẽ được thay đổi thành thuộc tính value của <option> đã chọn. Quý vị có thể đăng ký nhiều lựa chọn sau khi gọi phương thức registerSelect(select).Để 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 quý vị đã 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);Quý vị 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.
Quý vị 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 hay trong trường hợp này là API web là một giao diện lập trình ứng dụng cho phép máy chủ và trình duyệt web giao tiếp với nhau. Các API này sẽ tự động dịch các nội dung trên website sang bất kỳ ngôn ngữ nào mà người dùng mong muốn bằng cách lấy dữ liệu từ một website hoặc phần mềm khác. Ví dụ, API Google dịch sẽ lấy dữ liệu ngôn ngữ từ Google và biên dịch nội dung trang web khi được yêu cầu.
Mặc dù, sử dụng API dịch thuật là một cách làm hiệu quả để xây dựng website đa ngôn ngữ nhưng vẫn còn tồn tại những bất lợi. Tùy từng trường hợp mà quý vị cân nhắc có nên sử dụng JavaScript đa ngôn ngữ API hay không.
Việc tìm kiếm một dịch vụ trọn gói cho website đa ngôn ngữ ngày càng được quan tâm. Quốc tế hóa mang đến nhiều lợi ích cho các doanh nghiệp như mở rộng thị trường, tiếp cận khách hàng tiềm năng,… Tuy nhiên, triển khai đa ngôn ngữ cho website yêu cầu nhiề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ế. Là một trong những công ty dịch thuật ứng dụng công nghệ cao giúp quý vị truyền đạt thông điệp bằng nhiều ngôn ngữ, Thao & Co. cung cấp những giải pháp sáng tạo, tối ưu như dịch vụ dịch thuật và Bản địa hóa Website hay Tích hợp Tùy chỉnh và Đánh giá Ngôn ngữ.
Đội ngũ dịch giả bản xứ với nhiều năm kinh nghiệm trong lĩnh vực dịch thuật ngành quảng cáo và marketing sẽ giúp quý vị có được bản dịch chuẩn chỉnh, tạo cảm giác gần gũi và thu hút khách hàng mục tiêu.
Với quy trình dịch thuật B2B nhanh gọn được quản lý chặt chẽ và bảo mật thông qua nền tảng độc quyền, quý vị sẽ được trải nghiệm dịch vụ trọn vẹn và hài lòng từ chất lượng thành phẩm cho đến sự tiện lợi và tối ưu thời gian.
Dịch thuật website không chỉ dừng lại ở việc cung cấp bản dịch mà còn phải tích hợp bản dịch vào trang web. Điều quan trọng là phải đảm bảo bản dịch tương thích với giao diện và các chức năng trên web.
Công việc tích hợp, đặc biệt là tích hợp thủ công dù cần có chuyên môn và tiêu tốn nhiều thời gian nhưng sẽ giúp doanh nghiệp dễ dàng kiểm soát và quản lý, hạn chế rủi ro về trải nghiệm và tăng cường bảo mật.
Nhằm đáp ứng nhu cầu dịch thuật ngày càng tăng, Thao & Co. cung cấp giải pháp Tích hợp Tùy chỉnh và Đánh giá Ngôn ngữ. Tích hợp tùy chỉnh giúp bản dịch tự nhiên, phù hợp với ngữ cảnh và tương thích các chức năng. Nhờ đó, nâng cao trải nghiệm người dùng, tăng cường bảo mật và đặc biệt là tiết kiệm thời gian, công sức.
JavaScript đa ngôn ngữ là một trong những cách tạo tính năng đa ngôn ngữ cho website hiệu quả. Tuy nhiên, công việc triển khai có thể yêu cầu kiến thức chuyên môn và tiêu tốn nhiều thời gian để có thành phẩm hoàn chỉnh. Giải pháp toàn diện được nhiều doanh nghiệp lựa chọn là sử dụng dịch vụ dịch thuật.
Hy vọng bài viết này có thể giúp quý vị thành công trong việc tạo JavaScript đa ngôn ngữ. Để đượ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á.
