JavaScript

Dịch bất kỳ trang web nào bằng JavaScript đơn giản: thêm thẻ script và đánh dấu văn bản bạn muốn dịch. Điều này hoạt động với HTML đơn giản, các trang được hiển thị trên máy chủ, WordPress và các CMS khác và các ứng dụng được xây dựng với bất kỳ khung nào.

Thiết lập với thẻ tập lệnh

Thêm tập lệnh Magic Translate vào trang của bạn:

<script
  src="https://cdn.jsdelivr.net/npm/@magic-translate/js@1/dist/magic-translate.min.js"
  data-api-key="<your-api-key>"
  data-language="de"
  defer
></script>

Nếu bạn chưa có khóa API, hãy đăng ký Magic Translate để nhận khóa. Vì khóa là một phần của trang của bạn, hãy giới hạn nó trong các tên miền của riêng bạn trong các miền được phép.

Sau đó đặt văn bản bạn muốn dịch vào phần tử <t>:

<h1><t>Please translate me!</t></h1>

Đó là nó. Trang web của bạn hiện có thể được dịch sang hơn 70 ngôn ngữ.

Bỏ data-language để dịch sang ngôn ngữ của trình duyệt của khách truy cập.

Thiết lập với npm

Nếu bạn gói JavaScript của mình, hãy cài đặt ứng dụng khách từ npm thay vào đó:

# using npm
npm i @magic-translate/js

# using yarn
yarn add @magic-translate/js

import { createMagicTranslate, Language } from '@magic-translate/js';

const magicTranslate = createMagicTranslate({
  apiKey: '<your-api-key>',
  language: Language.DE // any supported language
});

createMagicTranslate bắt đầu dịch trang ngay lập tức.

Cấu hình

Thẻ script chấp nhận các thuộc tính sau:

Thuộc tính	Mô tả
`data-api-key`	Bắt buộc. Khóa API Magic Translate của bạn.
`data-language`	Ngôn ngữ nội dung của bạn được dịch sang, ví dụ: `de`. Mặc định là ngôn ngữ của trình duyệt.
`data-source-language`	Ngôn ngữ trang của bạn được viết. Nó được phát hiện tự động, vì vậy chỉ đặt nó nếu phát hiện cho kết quả sai.
`data-formality`	`formal` hoặc `informal`. Không được hỗ trợ cho tất cả các ngôn ngữ.
`data-debug`	Ghi nhật ký các yêu cầu vào bảng điều khiển.

createMagicTranslate chấp nhận các tùy chọn tương ứng: apiKey, language, sourceLanguage, formality và debug. Nó cũng chấp nhận root để giới hạn dịch cho một phần tử cụ thể. Theo mặc định, nó dịch toàn bộ tài liệu.

Thay đổi ngôn ngữ

Gọi setLanguage để dịch trang sang ngôn ngữ khác. Với thẻ script, phiên bản có sẵn dưới dạng window.magicTranslate:

<select onchange="magicTranslate.setLanguage(this.value)">
  <option value="en">English</option>
  <option value="de">Deutsch</option>
  <option value="fr">Français</option>
</select>

Khi bạn sử dụng thẻ tập lệnh, lựa chọn ngôn ngữ của khách truy cập sẽ được lưu để tải trang tiếp theo.

Dự án ví dụ

Bạn có thể tìm thấy một dự án ví dụ trên GitHub và xem nó trực tiếp.