Hướng dẫn how do you change the language of a website in html? - làm cách nào để thay đổi ngôn ngữ của trang web trong html?

Một trong những cách xung quanh điều này có thể là sử dụng một số loại hệ thống khuôn mẫu khách cho giao diện của bạn. Bằng cách đó, bạn không cần phải tải HTML của mình một cách không cần thiết với một loạt các thuộc tính dữ liệu chi tiết các yêu cầu ngôn ngữ, nhưng chỉ cần mô tả nó một lần trong JavaScript và sử dụng một vài chức năng để hỗ trợ dịch. Tôi đã mã hóa ví dụ nhanh dưới đây để cho bạn thấy ý tôi.

Đây là đối tượng từ điển. Nó chứa tất cả các bản dịch theo mã quốc gia. Điều này có nghĩa là bạn không cần từ điển riêng cho mỗi quốc gia. Điều này rất quan trọng bởi vì nó có nghĩa là chúng ta có thể sử dụng cấu trúc đối tượng duy nhất này rất dễ dàng trong hàm dịch ra như bạn sẽ thấy trong một khoảnh khắc. Nó cũng có nghĩa là bạn có thể thêm bao nhiêu ngôn ngữ và bản dịch tùy thích.

var dict = {
    en: {
        'Hallo': 'Hallo',
        'Goodbye': 'Goodbye',
        'castle': 'castle'
    },
    fr: {
        'Hallo': 'Bonjour',
        'Goodbye': 'Au revoir',
        'castle': 'chateau'
    },
    de: {
        'Hallo': 'Hallo',
        'Goodbye': 'Auf Wiedersehen',
        'castle': 'schloss'
    }
}

Đây là mã quốc gia của chúng tôi và nó liên quan trực tiếp đến khóa mã quốc gia trong đối tượng từ điển của chúng tôi:

var lang = 'fr';

Đầu tiên trong hai chức năng của chúng tôi. Điều này lấy một mẫu và một ngôn ngữ và thực hiện bản dịch, trả lại bất cứ điều gì còn lại (thường là một số loại HTML như trong ví dụ của chúng tôi).

function applyTemplate(tmpl, lang) {

    // find all words within {{word}} a double set of curly braces
    // (this format is similar to the handlebars templating engine)
    var regex = /\{\{([a-zA-Z])\w+\}\}/g

    // for each found word perform the translation and
    // remove the curly braces
    return tmpl.replace(regex, function (word) {
        return translate(dict, lang, word.replace(/[\{\}]/g, ''));
    });
}

Hàm dịch lấy từ điển, ngôn ngữ và một từ và trả về từ được dịch. Lưu ý rằng điều này dễ dàng hơn nhiều với một đối tượng chứa tất cả các bản dịch quốc gia.

function translate(dict, lang, word) {
    return dict[lang][word];
}

Một số HTML. Đây là mẫu của chúng tôi (hiển thị: Không có) và phần tử đầu ra. Lưu ý các từ trong niềng răng xoăn là những từ được dịch.

{{Goodbye}}, {{castle}}

Cuối cùng, đặt tất cả lại với nhau:

//  grab the template
var tmpl = document.querySelector('.template').textContent;
var translation = document.querySelector('#translation');

// grab our translated html and add it to the output element
var html = applyTemplate(tmpl, lang);
translation.insertAdjacentHTML('afterbegin', html);

THỬ NGHIỆM

Bây giờ, rõ ràng bạn không phải sử dụng phương pháp này (có hàng tá động cơ khuôn mẫu JS ngoài kia), nhưng khuôn mẫu đặc biệt hữu ích cho các trang web cần sử dụng nhiều ngôn ngữ. Nhiều người làm điều này ở mặt sau, nhưng như bạn có thể thấy, nó cũng có thể dễ dàng thực hiện phía khách hàng.

Hy vọng điều này là hữu ích và cung cấp cho bạn một vài ý tưởng khác nhau về cách bạn có thể tiếp cận giải pháp của mình.

Câu hỏi

Làm thế nào tôi nên đặt ngôn ngữ của nội dung trong trang HTML của tôi?

Trang này mô tả cách đánh dấu một trang HTML để nó cung cấp thông tin về ngôn ngữ của trang. Nó bắt đầu với một bản tóm tắt tổng thể, sau đó cung cấp chi tiết bổ sung trong các phần tiếp theo.

Câu trả lời nhanh

Luôn sử dụng thuộc tính ngôn ngữ trên thẻ html để khai báo ngôn ngữ mặc định của văn bản trong trang. Điều này được kế thừa bởi tất cả các yếu tố khác. Ví dụ:

Lưu ý rằng bạn nên sử dụng phần tử html thay vì phần tử body, vì phần tử body không bao gồm văn bản bên trong phần tử

var lang = 'fr';
1 của tài liệu.

Khi trang chứa nội dung bằng ngôn ngữ khác, hãy thêm thuộc tính ngôn ngữ vào một phần tử xung quanh nội dung đó. Điều này cho phép bạn tạo kiểu hoặc xử lý nó khác nhau. Ví dụ:

var lang = 'fr';
2

Sử dụng thuộc tính

var lang = 'fr';
3 cho các trang được phục vụ như HTML. .

Sử dụng thẻ ngôn ngữ từ sổ đăng ký phụ ngôn ngữ IANA. Bạn có thể tìm thấy các mục con bằng cách sử dụng công cụ tra cứu phụ không chính thức. (hơn)

Trong một số phần của mã của bạn, bạn có thể có một vấn đề. Nếu bạn có văn bản đa ngôn ngữ trong phần tử

var lang = 'fr';
4, bạn không thể đánh dấu các phần của văn bản cho các ngôn ngữ khác nhau vì thuộc tính
var lang = 'fr';
4 chỉ cho phép các ký tự - không đánh dấu. Điều tương tự cũng xảy ra đối với nhiều ngôn ngữ trong các giá trị thuộc tính. Không có giải pháp tốt cho điều này vào lúc này.

Sử dụng các phần tử lồng nhau để chăm sóc các giá trị thuộc tính và nội dung trên cùng một yếu tố trong các ngôn ngữ khác nhau. (hơn)

Bạn không bao giờ nên sử dụng phần tử

var lang = 'fr';
6 với thuộc tính
var lang = 'fr';
7 được đặt thành
var lang = 'fr';
8 để chỉ ra ngôn ngữ của một trang, nhưng trong một số trường hợp nhất định, bạn có thể muốn phục vụ thông tin ngôn ngữ với tiêu đề HTTP để chỉ ra đối tượng dự định của trang của bạn. Cho dù bạn có sử dụng tiêu đề HTTP hay không, bạn phải luôn luôn khai báo ngôn ngữ của văn bản trong một trang bằng thuộc tính ngôn ngữ trên thẻ html. Để biết thêm thông tin, hãy xem bài viết đồng hành, tiêu đề HTTP, các yếu tố
var lang = 'fr';
6 và thông tin ngôn ngữ.

Thông tin chi tiết

Phần này cung cấp thông tin chi tiết hơn về nhiều chủ đề liên quan đến việc khai báo ngôn ngữ trong HTML.

Điều gì xảy ra nếu nội dung phần tử và giá trị thuộc tính có trong các ngôn ngữ khác nhau?

Thỉnh thoảng ngôn ngữ của văn bản trong một thuộc tính và nội dung phần tử bằng các ngôn ngữ khác nhau. Ví dụ, ở góc trên cùng bên phải của bài viết này có các liên kết đến các phiên bản dịch của trang này. Văn bản liên kết hiển thị ngôn ngữ của trang đích bằng ngôn ngữ của trang đích, nhưng thuộc tính

var lang = 'fr';
4 được liên kết chứa một gợi ý trong ngôn ngữ của trang hiện tại:

Hướng dẫn how do you change the language of a website in html? - làm cách nào để thay đổi ngôn ngữ của trang web trong html?

Nếu mã của bạn trông như sau, các thuộc tính ngôn ngữ thực sự sẽ chỉ ra rằng không chỉ nội dung mà cả văn bản thuộc tính

var lang = 'fr';
4 là bằng tiếng Tây Ban Nha. Điều này rõ ràng là không chính xác.

Hướng dẫn how do you change the language of a website in html? - làm cách nào để thay đổi ngôn ngữ của trang web trong html?
Mã xấu. Đừng sao chép!

function applyTemplate(tmpl, lang) {

    // find all words within {{word}} a double set of curly braces
    // (this format is similar to the handlebars templating engine)
    var regex = /\{\{([a-zA-Z])\w+\}\}/g

    // for each found word perform the translation and
    // remove the curly braces
    return tmpl.replace(regex, function (word) {
        return translate(dict, lang, word.replace(/[\{\}]/g, ''));
    });
}
3

Thay vào đó, hãy di chuyển thuộc tính chứa văn bản bằng một ngôn ngữ khác sang một phần tử khác, như được hiển thị trong ví dụ này, trong đó phần tử

function applyTemplate(tmpl, lang) {

    // find all words within {{word}} a double set of curly braces
    // (this format is similar to the handlebars templating engine)
    var regex = /\{\{([a-zA-Z])\w+\}\}/g

    // for each found word perform the translation and
    // remove the curly braces
    return tmpl.replace(regex, function (word) {
        return translate(dict, lang, word.replace(/[\{\}]/g, ''));
    });
}
4 kế thừa cài đặt
function applyTemplate(tmpl, lang) {

    // find all words within {{word}} a double set of curly braces
    // (this format is similar to the handlebars templating engine)
    var regex = /\{\{([a-zA-Z])\w+\}\}/g

    // for each found word perform the translation and
    // remove the curly braces
    return tmpl.replace(regex, function (word) {
        return translate(dict, lang, word.replace(/[\{\}]/g, ''));
    });
}
5 mặc định của phần tử html.

function applyTemplate(tmpl, lang) {

    // find all words within {{word}} a double set of curly braces
    // (this format is similar to the handlebars templating engine)
    var regex = /\{\{([a-zA-Z])\w+\}\}/g

    // for each found word perform the translation and
    // remove the curly braces
    return tmpl.replace(regex, function (word) {
        return translate(dict, lang, word.replace(/[\{\}]/g, ''));
    });
}
7

Điều gì sẽ xảy ra nếu không có yếu tố để treo thuộc tính của bạn trên?

Nếu bạn muốn chỉ định ngôn ngữ của một số nội dung nhưng không có đánh dấu xung quanh nó, hãy sử dụng một phần tử như

function applyTemplate(tmpl, lang) {

    // find all words within {{word}} a double set of curly braces
    // (this format is similar to the handlebars templating engine)
    var regex = /\{\{([a-zA-Z])\w+\}\}/g

    // for each found word perform the translation and
    // remove the curly braces
    return tmpl.replace(regex, function (word) {
        return translate(dict, lang, word.replace(/[\{\}]/g, ''));
    });
}
8,
function applyTemplate(tmpl, lang) {

    // find all words within {{word}} a double set of curly braces
    // (this format is similar to the handlebars templating engine)
    var regex = /\{\{([a-zA-Z])\w+\}\}/g

    // for each found word perform the translation and
    // remove the curly braces
    return tmpl.replace(regex, function (word) {
        return translate(dict, lang, word.replace(/[\{\}]/g, ''));
    });
}
9 hoặc
function translate(dict, lang, word) {
    return dict[lang][word];
}
0 xung quanh nội dung. Đây là một ví dụ:

function translate(dict, lang, word) {
    return dict[lang][word];
}
1

Chọn giá trị ngôn ngữ

Xác định các thay đổi ngôn ngữ trong tài liệu

Làm cách nào để thêm ngôn ngữ vào trang web của mình trong HTML?language tags, such as

function applyTemplate(tmpl, lang) {

    // find all words within {{word}} a double set of curly braces
    // (this format is similar to the handlebars templating engine)
    var regex = /\{\{([a-zA-Z])\w+\}\}/g

    // for each found word perform the translation and
    // remove the curly braces
    return tmpl.replace(regex, function (word) {
        return translate(dict, lang, word.replace(/[\{\}]/g, ''));
    });
}
5 for English or
function translate(dict, lang, word) {
    return dict[lang][word];
}
3 for French, BCP 47 describes how to compose language tags that allow you specify regional dialects, scripts and other variants related to that language.

Để đặt ngôn ngữ chính của trang của chúng tôi làm tiếng Anh, chúng tôi sử dụng thuộc tính 'Lang' cùng với mã ngôn ngữ 'en' của chúng tôi và áp dụng nó cho phần tử HTML ở đầu mỗi trang. Nếu bạn đang sử dụng XHTML, bạn sẽ cần áp dụng một thuộc tính bổ sung để đặt ngôn ngữ được sử dụng trong tài liệu XML.

Bạn có thể thay đổi trang web thành tiếng Anh không?

Trên máy tính của bạn, mở chrome. Chuyển đến một trang web được viết bằng ngôn ngữ khác. Ở bên phải của thanh địa chỉ, nhấp vào dịch. Chrome sẽ dịch trang web hiện tại của bạn.

Thông tin chi tiết

function translate(dict, lang, word) {
    return dict[lang][word];
}
6

Phần này cung cấp thông tin chi tiết hơn về nhiều chủ đề liên quan đến việc khai báo ngôn ngữ trong HTML.

{{Goodbye}}, {{castle}}
1

Điều gì xảy ra nếu nội dung phần tử và giá trị thuộc tính có trong các ngôn ngữ khác nhau?

Nếu bạn đang phục vụ trang của mình dưới dạng XML (tức là sử dụng loại MIME như

{{Goodbye}}, {{castle}}
7), bạn không cần thuộc tính
var lang = 'fr';
3. Thuộc tính
function translate(dict, lang, word) {
    return dict[lang][word];
}
9 một mình sẽ đủ.

//  grab the template
var tmpl = document.querySelector('.template').textContent;
var translation = document.querySelector('#translation');

// grab our translated html and add it to the output element
var html = applyTemplate(tmpl, lang);
translation.insertAdjacentHTML('afterbegin', html);
0

Thông tin thêm

Thông tin trong phần này ít có khả năng hữu ích, nhưng được cung cấp cho sự hoàn chỉnh.

Chỉ định siêu dữ liệu về ngôn ngữ đối tượng

Ngoài việc bao gồm một thuộc tính ngôn ngữ trong trang trên thẻ html (mà bạn nên luôn luôn làm), bạn cũng có thể bắt gặp các khai báo ngôn ngữ trong tiêu đề HTTP (được phục vụ trong trang) hoặc các yếu tố

var lang = 'fr';
6.

Điều quan trọng, khai báo ngôn ngữ trong trang luôn ghi đè thông tin HTTP khi xác định ngôn ngữ thực của văn bản, nhưng thông tin HTTP có thể cung cấp thông tin chung hơn về việc sử dụng tài nguyên dự định. Việc sử dụng các yếu tố

var lang = 'fr';
6 trong trang HTML để khai báo ngôn ngữ không được khuyến nghị.
var lang = 'fr';
6 elements in the HTML page for declaring language is not recommended
.

Để biết thông tin về

var lang = 'fr';
8 trong HTTP và trong các phần tử
var lang = 'fr';
6, hãy xem các tiêu đề HTTP, các yếu tố
var lang = 'fr';
6 và thông tin ngôn ngữ.

Nhiều thứ không liên quan

Chỉ vì biện pháp tốt, và vì lợi ích của sự kỹ lưỡng, có lẽ đáng để đề cập đến một vài điểm khác không liên quan đến cuộc thảo luận này.not relevant to this discussion.

Đầu tiên, không thể khai báo ngôn ngữ của văn bản bằng CSS.

Thứ hai,

//  grab the template
var tmpl = document.querySelector('.template').textContent;
var translation = document.querySelector('#translation');

// grab our translated html and add it to the output element
var html = applyTemplate(tmpl, lang);
translation.insertAdjacentHTML('afterbegin', html);
7 sẽ bắt đầu bất kỳ tệp HTML nào có thể chứa những gì trông giống như một số người như khai báo ngôn ngữ.
//  grab the template
var tmpl = document.querySelector('.template').textContent;
var translation = document.querySelector('#translation');

// grab our translated html and add it to the output element
var html = applyTemplate(tmpl, lang);
translation.insertAdjacentHTML('afterbegin', html);
7 trong ví dụ dưới đây chứa văn bản EN, là viết tắt của 'tiếng Anh'. Tuy nhiên, điều này chỉ ra ngôn ngữ của lược đồ liên quan đến tài liệu này - nó không liên quan gì đến ngôn ngữ của chính tài liệu.

//  grab the template
var tmpl = document.querySelector('.template').textContent;
var translation = document.querySelector('#translation');

// grab our translated html and add it to the output element
var html = applyTemplate(tmpl, lang);
translation.insertAdjacentHTML('afterbegin', html);
9

Thứ ba, đôi khi mọi người cho rằng thông tin về ngôn ngữ tự nhiên có thể được suy ra từ mã hóa ký tự. Tuy nhiên, một mã hóa ký tự không cho phép xác định rõ ràng ngôn ngữ tự nhiên: phải có ánh xạ một-một giữa mã hóa và ngôn ngữ để suy luận này hoạt động và không có ai. Ví dụ: một mã hóa ký tự duy nhất có thể được sử dụng cho nhiều ngôn ngữ, ví dụ. Latin 1 (ISO-8859-1) có thể mã hóa cả tiếng Pháp và tiếng Anh, cũng như rất nhiều ngôn ngữ khác. Ngoài ra, mã hóa ký tự có thể thay đổi theo một ngôn ngữ duy nhất, ví dụ tiếng Ả Rập có thể sử dụng các mã hóa như 'Windows-1256' hoặc 'ISO-8859-6' hoặc 'UTF-8'.

Tuy nhiên, tất cả các ví dụ mã hóa này hiện nay đều được đưa ra, vì tất cả nội dung nên được tác giả trong UTF-8, bao gồm tất cả các ngôn ngữ hiếm nhất trong một mã hóa ký tự.

Điều tương tự cũng xảy ra với hướng văn bản. Cũng như mã hóa và ngôn ngữ, không phải lúc nào cũng có ánh xạ một-một giữa ngôn ngữ và kịch bản, và do đó là định hướng. Ví dụ, Azerbaijani có thể được viết bằng cả các tập lệnh từ phải sang trái (tiếng Ả Rập) và từ trái sang phải (tiếng Latin hoặc cyrillic) và mã ngôn ngữ html0 có thể phù hợp với một trong hai. Ngoài ra, đánh dấu hướng văn bản được sử dụng với văn bản nội tuyến áp dụng một loạt các giá trị khác nhau cho văn bản, trong khi ngôn ngữ là một công tắc đơn giản không tùy thuộc vào các tác vụ cần thiết.

đọc thêm

  • Bắt đầu? Ngôn ngữ trên web

  • Hướng dẫn, làm việc với ngôn ngữ trong HTML

  • Các liên kết liên quan, tác giả HTML & CSS

    • Ngôn ngữ
    • Sử dụng các thuộc tính để khai báo ngôn ngữ
    • Chọn giá trị ngôn ngữ
    • Xác định các thay đổi ngôn ngữ trong tài liệu

Làm cách nào để thêm ngôn ngữ vào trang web của mình trong HTML?

Để đặt ngôn ngữ chính của trang của chúng tôi làm tiếng Anh, chúng tôi sử dụng thuộc tính 'Lang' cùng với mã ngôn ngữ 'en' của chúng tôi và áp dụng nó cho phần tử HTML ở đầu mỗi trang.Nếu bạn đang sử dụng XHTML, bạn sẽ cần áp dụng một thuộc tính bổ sung để đặt ngôn ngữ được sử dụng trong tài liệu XML.use the 'lang' attribute along with our 'en' language code and apply this to the HTML element at the beginning of each page. If you are using XHTML, you will need to apply an additional attribute to set the language used in an XML document.

Bạn có thể thay đổi trang web thành tiếng Anh không?

Trên máy tính của bạn, mở chrome.Chuyển đến một trang web được viết bằng ngôn ngữ khác.Ở bên phải của thanh địa chỉ, nhấp vào dịch.Chrome sẽ dịch trang web hiện tại của bạn.On the right of the address bar, click Translate . Chrome will translate your current web page.