Cách bản địa hóa ứng dụng của bạn với jQuery.I18n


Trịnh Phương Nam
3 năm trước
Hữu ích 2 Chia sẻ Viết bình luận 0
Đã xem 4829

Trong tháng qua, tôi đã viết một loạt các bài viết về quốc tế hóa về việc sử dụng I18n trong các ứng dụng Rails cũng như các giải pháp khác nhau cho JavaScript . Khách hôm nay là thư viện jQuery.I18n được trình bày ngắn gọn trong một trong những bài viết trước. Giải pháp này hỗ trợ giới tính, các hình thức ngữ pháp, thay đổi năng động của ngôn ngữ, chuỗi dự phòng, v.v.

Chúng tôi sẽ thảo luận kỹ lưỡng về các tính năng của jQuery.I18n cũng như xem nó hoạt động bằng cách tạo một ứng dụng JavaScript demo. Dưới đây là tổng quan nhanh về các chủ đề mà chúng tôi sẽ đề cập:

  • Thông tin cơ bản về jQuery.I18n.
  • Thiết lập ứng dụng demo và tải các tập tin cần thiết.
  • Quá trình tạo tập tin dịch.
  • Đang tải tập tin dịch và một số vấn đề cần xem xét.
  • Chuyển đổi miền địa phương.
  • Dữ liệu bản địa bền bỉ bằng cách sử dụng API Lịch sử.
  • Hiển thị các thông báo được bản địa hóa dựa trên các data-thuộc tính HTML5 .
  • Hiển thị các tin nhắn được bản địa hóa bằng mã JavaScript tùy chỉnh.
  • Sử dụng thông tin giới tính và số nhiều trong các bản dịch.
  • Làm đẹp mã để tránh lặp lại chính chúng ta.
  • Thêm từ "ma thuật".
  • Tài liệu dịch của bạn.

Mã nguồn cho bài viết này có sẵn tại GitHub .

Lưu ý nhanh về ứng dụng Demo

Để có thể thấy kết quả cuối cùng trong hành động, bạn sẽ cần thiết lập một máy chủ web. Tôi sẽ sử dụng Microsoft IIS , nhưng có rất nhiều giải pháp khác có thể giúp bạn khởi động và chạy trong một phút:

  • MAMP .
  • WAMP .
  • Và những người khác.

Giới thiệu về jQuery.I18n

Tất nhiên, bạn biết Wikipedia là gì và có lẽ đã sử dụng trang web này nhiều lần, vì nó có kiến ​​thức về mọi thứ bắt đầu từ vật lý và hóa học đến phim và trò chơi máy tính phổ biến (và ít phổ biến hơn). Wikipedia được duy trì bởi một công ty có tên Wikimedia Foundation  , cũng đảm nhiệm các dự án như Wikinews , Wikivoyage và nhiều công ty khác. Tất cả các dự án này trên toàn thế giới và có sẵn bằng các ngôn ngữ khác nhau nên việc quốc tế hóa là vô cùng quan trọng đối với Wikimedia.

Do đó, công ty này đã tạo ra một giải pháp dựa trên jQuery phổ biến để quốc tế hóa các ứng dụng JavaScript và gọi nó đơn giản là jQuery.I18n. Không phải là một cái tên rất lạ mắt, nhưng tin tôi đi, có nhiều thứ hơn mắt. Thư viện này thực sự tiện lợi và mạnh mẽ, vì vậy chúng ta đừng lãng phí thời gian và thảo luận về các tính năng của nó ngay bây giờ. Để làm cho cuộc hành trình của chúng tôi thú vị và hữu ích hơn, chúng tôi sẽ áp dụng các khái niệm đã học vào thực tế.

Tập tin dịch

jQuery.I18n lưu trữ các bản dịch trong các tệp JSON đơn giản. Nếu bạn, như tôi, một người hâm mộ Rails, bạn sẽ thấy quá trình này rất giống với việc lưu trữ các bản dịch trong các tệp YAML.

Các bản dịch thực tế ở định dạng khóa-giá trị, ví dụ

{ "title": "Example Application" }

titletất nhiên là chìa khóa, trong khi đó Example Applicationlà giá trị của nó. Bạn nên đặt tên khóa bằng chữ thường với các từ được phân tách bằng -. Các tài liệu của jQuery.I18n cũng đề xuất tiền tố các khóa của bạn bằng tên của ứng dụng:

{ "myapp-title": "Example Application" }

... nhưng điều đó không bắt buộc.

Ngoài các bản dịch, các tệp có thể lưu trữ siêu dữ liệu, như thông tin về tác giả, ngày cập nhật gần nhất, v.v. Siêu dữ liệu có khóa riêng bắt đầu bằng @:

{
"@metadata": {
    "authors": [
        "Alice",
        "David"
    ],
    "last-updated": "2016-10-25",
    "locale": "en"
},
"title": "Example Application"
}

Thông thường, các tệp dịch đang được đặt trong thư mục i18n . Các bản dịch cho các ngôn ngữ khác nhau thường được lưu trữ riêng trong các tệp được đặt tên theo ngôn ngữ (ví dụ: en.json , de.json , ru.json , v.v.). Tuy nhiên, đối với một ứng dụng đơn giản, bạn có thể đặt mọi thứ trong một tệp duy nhất . Trong trường hợp này, bản dịch nên được đặt dưới khóa được đặt tên theo ngôn ngữ:

"en": {
"title": "Example Application"
},
"ru": {
title: "Тестовое приложение"
}

Ngoài ra, bạn có thể cung cấp đường dẫn đến tệp thay vì đối tượng có bản dịch:

"en": {
"title": "Example Application"
},
"ru": "ru/ru.json"

Để bắt đầu tạo ứng dụng demo của chúng tôi, hãy tạo một thư mục mới với thư mục js / i18n lồng nhau . Đặt các tệp dịch bên trong cho các ngôn ngữ bạn thích. Tôi sẽ làm việc với tiếng Anh và tiếng Nga trong bài viết này:

  • js / i18n / en.json
  • js / i18n / ru.json

Phổ biến các tệp của bạn với một số nội dung cơ bản:

js / i18n / en.json

{
  "@metadata": {
    "authors": [
      "Ilya"
    ],
    "last-updated": "2016-10-25",
    "locale": "en"
  },
  "app-title": "Example Application"
}

js / i18n / ru.json

{
  "@metadata": {
    "authors": [
      "Ilya"
    ],
    "last-updated": "2016-10-25",
    "locale": "ru"
  },
  "app-title": "Тестовое приложение"
}

Bạn có thể cần phải thiết lập loại MIME thích hợp cho tiện ích mở rộng .json trong cấu hình máy chủ của mình.

Ngoài ra, để chuẩn bị cho các bước tiếp theo, hãy sao chép jQuery.I18n cục bộ cùng với các phụ thuộc của nó:

$ git clone https://github.com/wikimedia/jquery.i18n.git
$ cd jquery.i18n
$ git submodule update --init

Trong thư mục dự án của bạn tạo thư mục js / lib / jquery.i18n và sao chép nội dung của thư mục src từ dự án nhân bản bên trong (không có thư mục ngôn ngữ lồng nhau ). Tiếp theo bên trong js / lib tạo một thư mục khác CLDRPluralRuleParser . Sao chép tệp libs / CLDRPluralRuleParser / src / CLDRPluralRuleParser.js từ dự án nhân bản ở đó.

Cuối cùng, bên trong js tạo một tệp có tên global.js nơi chúng tôi sẽ đặt mã tùy chỉnh của mình. Do đó, dự án của bạn sẽ có cấu trúc như sau:

|-- js
|-- global.js
|-- i18n
|-- en.json
|-- ru.json
|-- lib
|-- CLDRPluralRuleParser
|-- CLDRPluralRuleParser.js
|-- jquery.i18n
|-- jquery.i18n.js
|-- jquery.i18n.language.js
|-- ...other files here

Bây giờ trong thư mục gốc của dự án tạo một tệp HTML đơn giản với các thư viện cần thiết được nối theo thứ tự đúng:

demo.html

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8">
  <title>Demo Application</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

  <script src="js/lib/CLDRPluralRuleParser/CLDRPluralRuleParser.js"></script>
  <script src="js/lib/jquery.i18n/jquery.i18n.js"></script>
  <script src="js/lib/jquery.i18n/jquery.i18n.messagestore.js"></script>
  <script src="js/lib/jquery.i18n/jquery.i18n.fallbacks.js"></script>
  <script src="js/lib/jquery.i18n/jquery.i18n.language.js"></script>
  <script src="js/lib/jquery.i18n/jquery.i18n.parser.js"></script>
  <script src="js/lib/jquery.i18n/jquery.i18n.emitter.js"></script>
  <script src="js/lib/jquery.i18n/jquery.i18n.emitter.bidi.js"></script>

  <script src="js/global.js"></script>
</head>
<body>
</body>
</html>

Tôi đang sử dụng jQuery 3 ở đây nhưng bạn có thể chọn Phiên bản 1 hoặc 2 tùy thuộc vào các trình duyệt bạn muốn hỗ trợ (Phiên bản 3 chỉ hoạt động với các trình duyệt hiện đại, vì vậy không có IE7 cho bạn).

Càng xa càng tốt. Chúng ta có thể tiến hành phần tiếp theo và tải bản dịch của mình vào ứng dụng.

Đang tải bản dịch

Tất nhiên, bước quan trọng tiếp theo là  tải bản dịch của bạn . Trong trường hợp đơn giản nhất, bạn sẽ chỉ cung cấp các cặp khóa-giá trị trực tiếp trong mã:

$.i18n().load( {
'en': {
  'app-title': 'Example Application'
}
} );

Hoặc cho một địa phương cụ thể:

$.i18n().load({
'app-title': 'Example Application'
}, 'en');

Tuy nhiên, đối với các ứng dụng phức tạp, đó không phải là lựa chọn tốt nhất. Thay vào đó, tôi khuyên bạn nên chỉ định một URL từ xa như thế này:

$.i18n().load( {
'en': 'dir/en.json'
} );

Lưu ý rằng bạn có thể tải tin nhắn theo từng phần, nghĩa là mã này:

$.i18n().load( {
'en': {
  'app-title': 'Example Application'
}
} );

// ... some instructions

$.i18n().load( {
'en': {
  'another key': 'a value'
}
} );

là hoàn toàn hợp lệ. Chỉ cần đảm bảo rằng bạn không ghi đè bất kỳ khóa hiện có.

Hãy tải bản dịch vào ứng dụng demo ngay bây giờ:

js / global.js

jQuery(function($) {
  $.i18n().load( {
    'en': './js/i18n/en.json',
    'ru': './js/i18n/ru.json'
  } );
});

Một điều quan trọng khác là loadhàm trả về một Promise jQuery , giúp dễ dàng thực hiện một số hành động chỉ sau khi các bản dịch được tải thành công, ví dụ:

  $.i18n().load( {
    'en': 'i18n/en.json',
    'ru': 'i18n/ru.json'
  } ).done( function() { console.log('done!') } );

Bây giờ các bản dịch của chúng tôi đã được tải, chúng tôi có thể giới thiệu một cơ chế để chuyển đổi địa phương .

Chuyển đổi địa điểm

Địa điểm nào sẽ được đặt làm mặc định khi tải trang? Trước hết, ngôn ngữ mặc định có thể được cung cấp dưới dạng tùy chọn được truyền cho $.i18n:

$.i18n( {
    locale: 'en'
} );

Ngoài ra, jQuery.I18n sẽ kiểm tra giá trị của tập langthuộc tính cho htmlthẻ. Hãy thêm nó ngay bây giờ:

demo.html

<html lang="en" dir="ltr">

Nếu ngôn ngữ mặc định không được đặt theo bất kỳ cách nào trong hai cách này, thư viện sẽ cố gắng để cài đặt ngôn ngữ được trình duyệt thông qua. Trong nội bộ, ngôn ngữ mặc định được đặt thành tiếng Anh. Để tránh mọi hành vi không mong muốn, nên đặt địa điểm mặc định một cách rõ ràng.

Tất nhiên, có thể chuyển đổi ngôn ngữ đã chọn sau đó bằng cách sửa đổi localetùy chọn:

$.i18n().locale = 'ru';

Hãy thêm liên kết để chuyển đổi ngôn ngữ ngay bây giờ:

demo.html

<ul class="switch-locale">
  <li><a href="#" data-locale="en">English</a></li>
  <li><a href="#" data-locale="ru">Русский</a></li>
</ul>

Xử lý sự kiện nhấp bằng cách ngăn hành động mặc định và chuyển đổi ngôn ngữ dựa trên data-localethuộc tính:

js / global.js

jQuery(function($) {
// ...
  $.i18n().load( {
    'en': './js/i18n/en.json',
    'ru': './js/i18n/ru.json'
  } ).done(function() {
  $('.switch-locale').on('click', 'a', function(e) {
    e.preventDefault();
    $.i18n().locale = $(this).data('locale');
  });
});
});

Lưu ý rằng tôi sẽ đưa trình xử lý sự kiện này vào trong lời hứa để đảm bảo rằng các bản dịch được tải trước.

Địa điểm liên tục

Một điều khác mà chúng ta sẽ làm là duy trì ngôn ngữ được chọn bằng cách thêm nó vào URL dưới dạng một tham số GET. Vì vậy, ví dụ, URL http://localhost/demo.html?locale=runày sẽ yêu cầu phiên bản tiếng Nga của trang web. Điều này rất quan trọng để làm như vậy bởi vì khi người dùng chia sẻ một liên kết, anh ta hy vọng rằng những người khác sẽ thấy cùng một phiên bản của trang web.

Tuy nhiên, để đạt được điều này, chúng tôi sẽ cần hai thư viện bổ sung. Cái đầu tiên là API Lịch sử hỗ trợ API Lịch sử / Trạng thái HTML5 . Tôi sẽ lấy phiên bản html4 + html5 đi kèm cho jQuery có thể tìm thấy ở đây .

Thứ hai là  thư viện URL giúp làm việc với các URL trong JavaScript một cách dễ dàng. Lấy phiên bản rút gọn ở đây .

Kết nối hai thư viện này ngay bây giờ:

demo.html

<!-- ... -->
  <script src="js/lib/history/jquery.history.js"></script>
  <script src="js/lib/url/url.min.js"></script>
  <script src="js/global.js"></script>
<!-- ... -->

Bây giờ mã một hàm đơn giản để thay đổi miền địa phương:

js / global.js

var set_locale_to = function(locale) {
  if (locale)
    $.i18n().locale = locale;
};

Nó nên được gọi khi trang được tải và dịch xong. Bản thân ngôn ngữ nên được tìm nạp từ ?localetham số:

js / global.js

jQuery(function() {
  $.i18n().load( {
// ...
  } ).done(function() {
    set_locale_to(url('?locale'));
// ...
});
});

url('?locale')lấy giá trị của localetham số GET. Ngoài ra, chúng ta cần lắng nghe statechangesự kiện (ví dụ, điều đó xảy ra khi pushStatephương thức được gọi) và thay đổi miền địa phương cho phù hợp:

js / global.js

jQuery(function() {
  $.i18n().load( {
// ...
  } ).done(function() {
    set_locale_to(url('?locale'));
History.Adapter.bind(window, 'statechange', function(){
  set_locale_to(url('?locale'));
});
// ...
});
});

Và cuối cùng sử dụng pushStatemột khi một liên kết để chuyển đổi ngôn ngữ đã được nhấp. Đây là phiên bản cuối cùng của kịch bản:

js / global.js

var set_locale_to = function(locale) {
  if (locale)
    $.i18n().locale = locale;
};

jQuery(function() {
  $.i18n().load( {
    'en': './js/i18n/en.json',
    'ru': './js/i18n/ru.json'
  } ).done(function() {
    set_locale_to(url('?locale'));

    History.Adapter.bind(window, 'statechange', function(){
      set_locale_to(url('?locale'));
    });

    $('.switch-locale').on('click', 'a', function(e) {
      e.preventDefault();
      History.pushState(null, null, "?locale=" + $(this).data('locale'));
    });
  });
});

Ngay cả khi localetham số bị thiếu, chúng tôi vẫn có lang="en"bộ cho htmlthẻ.

Hiển thị bản dịch với API dữ liệu

Cách dễ nhất để hiển thị nội dung được bản địa hóa là sử dụng data-các thuộc tính. Tất cả những gì bạn cần làm là cung cấp một data-i18nthuộc tính và đặt khóa của bản dịch làm giá trị của nó. Ví dụ: hãy hiển thị tên trang web của chúng tôi:

demo.html

<h1 data-i18n="app-title"></h1>

app-title, như bạn nhớ lại, đã được định nghĩa bên trong tệp en.json như "app-title": "Example Application"và trong ru.json"app-title": "Тестовое приложение".

Để thực sự hiển thị thông báo sử dụng i18n()phương thức mà không có bất kỳ đối số. Phương pháp này nên được áp dụng cho phần tử chính xác hoặc cho cha mẹ của nó. Chúng ta có thể nói một cách đơn giản body:

js / global.js

var set_locale_to = function(locale) {
  if (locale) {
    $.i18n().locale = locale;
  }
  $('body').i18n();
};
// ...

Để cung cấp văn bản dự phòng sẽ được hiển thị trong khi bản dịch đang được tải, chỉ cần đặt nó vào thẻ:

demo.html

<h1 data-i18n="app-title">Example Application</h1>

Bây giờ tải lại trang của bạn và quan sát kết quả!

Các thông số, giới tính và số nhiều trong các bản dịch

Trong phần trước, chúng ta đã thấy ví dụ đơn giản nhất về hiển thị các thông điệp được bản địa hóa bằng cách sử dụng data-i18ntham số. Rõ ràng, trong nhiều trường hợp, điều đó là không đủ. Để tìm nạp bản dịch cho một khóa tùy ý, bạn có thể sử dụng mã sau đây :

$.i18n('some-key');

Bằng cách này, ví dụ, chúng ta có thể hiển thị thông báo chào mừng (với văn bản dự phòng):

demo.html

<body>
<!-- ... -->
<h2 id="welcome">Welcome</h2>
</body>

Thêm bản dịch:

en.json

"welcome": "Welcome!"

ru.json

"welcome": "Добро пожаловать!"

và chỉnh sửa mã:

global.js

var set_locale_to = function(locale) {
// ...
$('#welcome').text($.i18n('welcome'));
};

Khá đẹp, nhưng sẽ tốt hơn nếu hiển thị tên người dùng. Để làm điều này, chúng ta cần thêm tham số bên trong tin nhắn. Các thông số trong jQuery.I18n đang được đặt tên $1, $2, $3vv:

en.json

"welcome": "Welcome, $1!"

ru.json

"welcome": "Добро пожаловать, $1!"

Để đặt giá trị của tham số, chỉ cần chuyển một đối số khác cho $.i18n:

global.js

var set_locale_to = function(locale) {
// ...
$('#welcome').text($.i18n('welcome', 'John'));
};

Tất nhiên, nếu bạn có hai tham số, dĩ nhiên, bạn sẽ truyền hai đối số cho phương thức và tham số đầu tiên sẽ được gán cho $1biến, trong khi thứ hai - cho $2.

Bây giờ, những gì về thông tin giới tính ? Ví dụ, giả sử, chúng tôi muốn hiển thị một loạt e-mail từ những người khác nhau với tiêu đề "Bạn đã nhận được một lá thư mới từ Ai đó. Anh ấy / cô ấy nói:". Trước hết, thêm một đánh dấu mới:

demo.html

<!-- ... -->
<div id="letter-1">
  <p><em></em></p>
  <p>letter's text...</p>
</div>

<div id="letter-2">
  <p><em></em></p>
  <p>letter's text...</p>
</div>

Bây giờ dịch:

en.json

"letter": "A letter from $1! {{GENDER:$2|He|She}} says:"

ru.json

"letter": "Письмо от $1! {{GENDER:$2|Он|Она}} говорит:"

Vì vậy, GENDER:hoạt động như một công tắc. Nó nhận tham số và chọn một trong hai tùy chọn: đầu tiên được chọn cho giới tính nam, trong khi thứ hai - cho nữ. Để có thể sử dụng thông báo này, hãy cung cấp malehoặc femalelàm đối số thứ hai:

global.js

var set_locale_to = function(locale) {
// ...
  $('#letter-1').find('p > em').text($.i18n('letter', 'Ann', 'female'));
  $('#letter-2').find('p > em').text($.i18n('letter', 'Rick', 'male'));
}

Ngoài ra, hãy hiển thị bao nhiêu chữ cái mà người dùng có. Đối với điều này, chúng ta sẽ cần PLURAL: switch .

demo.html

<p id="letters"></p>

Các thông điệp:

en.json

"letters": "You have $1 {{PLURAL:$1|letter|letters}}"

ru.json

"letters": "У вас $1 {{PLURAL:$1|письмо|писем|письма}}"

Ngôn ngữ tiếng Nga có các quy tắc số nhiều phức tạp hơn nên tôi phải cung cấp tùy chọn bổ sung cho công PLURAL:tắc. Bây giờ mã:

global.js

var set_locale_to = function(locale) {
// ...
$('#letters').text($.i18n('letters', 5));
};

Tất cả thông tin về giới tính và số nhiều được lưu trữ bên trong tệp jquery.i18n.l Language.js .

Chuẩn bị mã

Mọi thứ đang hoạt động khá tốt đẹp, nhưng mọi thứ đang trở nên tẻ nhạt. Đối với mỗi bản dịch riêng biệt, tôi phải viết một dòng mã khác không đặc biệt. Những gì tôi muốn làm là viết một chu trình lấy từng phần tử yêu cầu dịch và hiển thị một thông điệp bên trong dựa trên các tham số của nó.

Bước đầu tiên, sửa đổi đánh dấu:

demo.html

<!-- ... -->
<h1 class="translate" data-args="app-title">Example Application</h1>
<h2 class="translate" data-args="welcome,John">Welcome</h2>

<p class="translate" data-args="letters,5"></p>

<div>
  <p><em class="translate" data-args="letter,Ann,female"></em></p>
  <p>letter's text...</p>
</div>

<div>
  <p><em class="translate" data-args="letter,Rick,male"></em></p>
  <p>letter's text...</p>
</div>

Bây giờ với mỗi phần tử với .translatelớp chúng ta cần lấy giá trị của data-args, chia nó thành một mảng và truyền cho $.i18nphương thức. Vấn đề duy nhất là chúng ta không biết có bao nhiêu đối số sẽ được thông qua. Tuy nhiên, đó không phải là vấn đề với phương pháp áp dụng :

var set_locale_to = function(locale) {
// ...
  $('.translate').each(function() {
    var args = [], $this = $(this);
    if ($this.data('args'))
      args = $this.data('args').split(',');
    $this.html( $.i18n.apply(null, args) );
};

applychấp nhận hai đối số: đầu tiên là giá trị thisbên trong hàm được gọi và thứ hai là một mảng biểu thị tất cả các đối số cần truyền.

Bây giờ bạn có thể tải lại trang và quan sát kết quả. Tất nhiên giải pháp này không lý tưởng nhưng bạn có thể mở rộng hơn nữa khi cần thiết.

Từ kỳ diệu

PLURAL:GENDER:cả hai từ "ma thuật" mà thư viện hỗ trợ. Tuy nhiên, bạn có thể giới thiệu các từ ma thuật mới khi cần bằng cách mở rộng $.i18n.parser.emitter:

global.js

jQuery(function() {
  $.extend($.i18n.parser.emitter, {
    sitename: function() {
      return "Demo";
    }
});
});

Vì vậy, sitenametên của từ ma thuật và các hàm tương ứng trả về giá trị của nó. Để tìm nạp giá trị này, hãy sử dụng cú pháp giống như mẫu (tương tự như những gì Tay lái sử dụng): {{SITENAME}}hoặc {{sitename}}. :là không cần thiết bởi vì sitenamekhông chấp nhận bất kỳ đối số.

Bây giờ bạn có thể sử dụng từ ma thuật này trong bản dịch của bạn:

en.json

"copyright": "{{SITENAME}}. All rights reserved."

ru.json

"copyright": "{{SITENAME}}. All rights reserved."

Đánh dấu:

demo.html

<!-- ... -->
<footer class="translate" data-args="copyright"></footer>

Các từ ma thuật có thể phức tạp hơn. Ví dụ, cái này sẽ xây dựng một liên kết với tiêu đề và URL được chỉ định:

global.js

// ...
  $.extend($.i18n.parser.emitter, {
    sitename: function() {
      return "Demo";
    },
    link: function (nodes) {
      return '<a href="' + nodes[1] + '">' + nodes[0] + '</a>';
    }
  } );

nodeslà một mảng các đối số. Sử dụng những từ kỳ diệu này giống như gender:hoặcplural:

en.json

"about": "{{link:About {{SITENAME}}|localhost/about?locale=en}}"

ru.json

"about": "{{link:{{SITENAME}}|localhost/about?locale=ru}}"

Lưu ý rằng các từ ma thuật có thể được lồng vào nhau, như thể hiện trong ví dụ này.

Tài liệu dịch của bạn

Bản địa hóa một ứng dụng là khó . Trong nhiều trường hợp, chỉ đơn giản là dịch các tin nhắn là không đủ vì bạn cần biết ngữ cảnh của chúng. Do đó, bản dịch của jQuery.i18n có thể được ghi lại . Thông thường, nó được thực hiện bên trong một tệp có tên qqq.json . Bên trong bạn cung cấp các khóa dịch và mô tả của họ. Ví dụ:

i18n / qqq.json

{
  "@metadata": {
    "authors": [
      "Ilya"
    ]
  },
  "app-title": "App's title",
  "welcome": "Welcoming message. Should be friendly.",
  "letter": "Notification about letter from someone. Should be informal.",
  "letters": "Total letters count.",
  "copyright": "The name of the site (transliterated) and copyrights.",
  "about": "Link to About Us page. The URL should contain the proper locale."
}

Có tập tin như vậy tại chỗ là thực sự hữu ích.

Phần kết luận

Trong bài viết này, chúng tôi đã thấy thư viện jQuery.i18n của Wikimedia Foundation hoạt động. Chúng tôi đã thảo luận về tất cả các tính năng chính của nó và hy vọng, đến bây giờ, bạn cảm thấy tự tin hơn khi sử dụng nó. Tất nhiên, có những giải pháp tương tự khác (và không quá giống nhau) có sẵn để bạn có thể muốn thử chúng.

Tôi cảm ơn bạn đã ở lại với tôi và hẹn gặp lại!

Hữu ích 2 Chia sẻ Viết bình luận 0
Đã xem 4829