Dịch nội dung

Đánh dấu nội dung bạn muốn Magic Translate dịch. Nội dung gốc được hiển thị cho đến khi bản dịch tải.

Yếu tố <t>

Đặt văn bản trong một phần tử <t> để dịch nó. Nó có thể chứa HTML:

<t>This content will be translated</t>

<t>Click <a href="/sale">here</a> to see <b>today's</b> deals.</t>

<mt-translate> cũng hoạt động, nếu bạn thích tên phần tử tùy chỉnh.

Thuộc tính data-t

Nếu bạn không thể thêm phần tử wrapper, hãy thêm data-t vào phần tử hiện có để dịch nội dung của nó:

<title data-t>My online shop</title>

<select>
  <option data-t>Small</option>
  <option data-t>Large</option>
</select>

Thuộc tính

Liệt kê các thuộc tính để dịch trong data-t-attrs, được phân tách bằng dấu cách:

<input placeholder="Search products" data-t-attrs="placeholder" />

<img src="team.jpg" alt="Our team" title="Say hi" data-t-attrs="alt title" />

Biến

Đặt các giá trị thay đổi, chẳng hạn như tên hoặc đếm, trong data-v dưới dạng đối tượng JSON và tham chiếu chúng là $name:

<t data-v='{"name": "Bob", "count": 7}'>Hi $name, you have $count new messages</t>

<input placeholder="Search $count products" data-t-attrs="placeholder" data-v='{"count": 3}' />

Magic Translate dịch văn bản xung quanh các giá trị một lần, là Hi {0}, you have {1} new messages và đặt các giá trị trở lại trang. Bản dịch được lưu trong bộ nhớ cache và hoạt động cho mọi tên và mọi đếm, và bản thân các giá trị không bao giờ được gửi đến Magic Translate.

Để hiển thị các giá trị mới, thay đổi data-v. Bản dịch được lưu trong bộ nhớ cache được sử dụng lại và không có yêu cầu nào được thực hiện:

element.dataset.v = JSON.stringify({ name: 'Bob', count: 8 });

Các giá trị được đánh số theo thứ tự chúng xuất hiện lần đầu tiên. Bản dịch có thể di chuyển chúng bất cứ nơi nào ngôn ngữ cần chúng, ví dụ {1} neue Nachrichten für {0}.

Một vài quy tắc:

• Chỉ có các phím data-v được thay thế, vì vậy văn bản như $5 vẫn giữ nguyên. Nếu hai phím bắt đầu theo cùng một cách, chẳng hạn như count và counts, phím dài nhất sẽ thắng.
• Tên tương tự có thể xuất hiện nhiều hơn một lần.
• Các giá trị được chèn dưới dạng văn bản, không bao giờ là HTML. Thay vào đó, hãy đánh dấu trong văn bản xung quanh chúng: Hi <b>$name</b>.
• Trong nội dung, các biến chỉ được thay thế trong văn bản, không phải trong các thuộc tính như href hoặc title.
• Nếu data-v không phải là một đối tượng JSON hợp lệ, văn bản sẽ không được dịch và cảnh báo sẽ được ghi lại. Một khóa không xuất hiện trong văn bản cũng ghi lại cảnh báo.
• $name hiển thị cho đến khi tập lệnh được tải. Tải tập lệnh sớm trong trang hoặc ẩn các phần tử này cho đến lúc đó.

Tùy chọn

Sử dụng các thuộc tính này để đặt các tùy chọn cho một phần tử duy nhất:

<t data-lang="fr" data-formality="formal">How are you?</t>

Nội dung thay đổi

Nội dung được thêm vào trang sau đó, hoặc được thay đổi bởi các tập lệnh của bạn, cũng được dịch. Điều này hoạt động cho nội dung được hiển thị bởi JavaScript, ví dụ với htmx hoặc jQuery.

Tất cả các bản dịch được yêu cầu cùng một lúc được gửi đến API trong một yêu cầu duy nhất và các bản dịch được lưu trong bộ nhớ cache. Bạn có thể đánh dấu nhiều yếu tố tùy thích.

Hạn chế

Nội dung của một phần tử không thể vượt quá 10 KB, tức là khoảng 5.000 ký tự. Các phần tử lồng nhau được dịch như một phần của phần tử <t> cha của chúng.