Hiển Thị Tiếng Việt Trong Html

     

Hiện nay, đa ngôn ngữ là một trong những tính năng hơi phổ biến. Chúng ta cũng có thể bắt gặp mặt việc chuyển đổi ngôn ngữ trong điện thoại hoặc các website (như www.intel.com). Ta gồm nhiều phương pháp để implement bản lĩnh này.

Bạn đang xem: Hiển thị tiếng việt trong html

Đa ngôn ngữ (Multi Language)thường được áp dụng trên website nhằm mục đích mục đích trình bày thông tin qua không ít loại ngôn ngữ để tăng tính tiếp cận đối với thông tin đó. Đa ngôn từ cũng có nhiều phương thức thực hiện. Trong chuỗi bài viết này mình sẽ giới thiệu hai cách thức để implement anh tài đa ngôn ngữ cho website đó làĐa ngôn ngữ sử dụng JavaScriptĐa ngữ điệu sử dụng .NET Resource.

Trong nội dung bài viết này sẽ giới thiệu phương thức implementĐa ngôn từ sử dụng JavaScript. Thực tế là Đa ngôn từ sử dụng JavaScript với file JSON, nhưng mà thôi dài mẫu quá cần rút bớt lại cho nó ngắn gọn:)

Thiết kế giao diện

Đầu tiên ta xây cất giao diện cơ phiên bản của một trang đăng nhập, vày có tài năng đa ngôn ngữ nên ta đang gắn thêm 2 lá cờ English với Vietnam. Đoạn code html như sau:

*

Và đó là giao diện ta bao gồm được.

*

Chém thôi, đánh hệt nhau như trên không ra tương tự vậy được đâu. Các bạn phải thêm css, bootstrap những kiểu nữa, dẫu vậy mà muốn reviews về nó thì buộc phải viết một bài xích khác, vào phạm vi bài viết này chỉ chú ý tới văn bản hiển thị là được.

Tạo bộ từ điển cho những ngôn ngữ tương ứng

Tiếp theo ta yêu cầu một cỗ từ điển nhằm website biết được nội dung bắt buộc hiển thị ứng cùng với từng các loại ngôn ngữ. Ví dụ như chữ trong nút Login so với tiếng Anh làLogin, đối với tiếng Việt làĐăng nhậpchẳng hạn.

Bộ tự điển sẽ được chứa trong tệp tin JSON với được để trong thư mụclang. Cách tổ chức thư mục như sau:

*

Nội dung tệp tin là những key và ngôn từ của key đó tương ứng với ngôn ngữ.

Xem thêm: Các Shop Bán Phụ Kiện Trên Shopee Bạn Nên Biết, Review: Top 10+ Các Shop Bán Phụ Kiện Trên Shopee

*
*

Bây tiếng ta thêm các keyvào từng thẻ hiển thị câu chữ tương ứng bằng phương pháp thêm nằm trong tínhlangKey.

Ta cũng chế tác thêm input cóid="langCode"dùng để đựng mã ngôn ngữ cần thay đổi (ở phía trên ta có 2 mã làenvàvi)

*

Ta đề xuất tạo tệp tin JavaScript làm nhiệm vụ biến đổi ngôn ngữ cho đều thẻ chứalangKeytrên, đặt tên làlang.js

Mã ngữ điệu mặc định là en để tránh lỗi trong trường hợp$("#langCode")không có mức giá trị.

var langCode = $("#langCode").val() || "en";var jsonUrl = "../Content/lang/" + langCode + ".json";var translate = function (jsdata) $("").each(function (index) var strTr = jsdata<$(this).attr("langKey")>; $(this).html(strTr); $(this).attr("placeholder", strTr); );$.ajax( url: jsonUrl, dataType: "json", async: false, success: translate);Về cơ bạn dạng thì code Đa ngôn từ bằng JavaScript vẫn hoạt động. Bây chừ ta xử trí sự kiện nhấp vào 2 lá cờ để thay đổi giá trị cho$("#langCode")

Xử lý sự kiện

Đầu tiên ta cấp dưỡng RouterConfig nội dung sau

*

Sau kia ta thêm actionChangeCulturevàoHomeController

Cũng trong Controller này ta gán quý giá mặc định cho mã ngữ điệu khi lần đầu truy cập website. Trong ví dụ bên dưới ta gán mã ngôn ngữ mặc định là en

*

Cuối thuộc làtạo thêm hyperlink trỏ cho tới actionChangeCulturecho 2 lá cờ phía trên

*

À ghi nhớ thêm các thư viện jquery nữa nhé.

Kết trái ta nhận được khi nhấn vào lá cờ Vietnam.

Xem thêm: Giải Bài Tập Kinh Tế Vĩ Mô Chương 2 Có Lời Giải, Access To This Page Has Been Denied

*

Tạm kết

Như vậy, bài viết đã hỗ trợ một cách tiến hành implement tuấn kiệt Đa ngôn ngữ cho Website bằng phương pháp sử dụng JavaScript. Đây là phương pháp khá dễ dàng và đơn giản và nhìn cũng tương đối là củ chuối, phù hợp cho đầy đủ trang nhỏ, nên làm nhanh, không đòi hỏi quá chặt chẽ.

Bài viết sau bản thân sẽ giới thiệu phương thức đồ vật hai kia làĐa ngữ điệu sử dụng .NET Resource