JavaScript

Переведите любой веб-сайт с помощью простого JavaScript: добавьте тег script и отметьте текст, который хотите перевести. Это работает с обычным HTML-кодом, страницами, созданными на сервере, WordPress и другими CMS, а также приложениями, созданными на любой платформе.

Настройка с помощью тега script

Добавьте скрипт Magic Translate на свою страницу:

<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>

Если у вас еще нет ключа API, зарегистрируйтесь на Magic Translate, чтобы получить его. Поскольку ключ находится на вашей странице, ограничьте его своими доменами в разделе «Разрешенные домены».

Затем поместите текст, который хотите перевести, в элемент <t>:

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

Вот и все. Теперь ваш сайт можно перевести более чем на 70 языков.

Опустите data-language, чтобы перевести его на язык браузера посетителя.

Настройка с помощью npm

Если вы объединяете свой JavaScript, вместо этого установите клиент из npm:

# 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 сразу же начинает переводить страницу.

Конфигурация

Тег script принимает следующие атрибуты:

Атрибут	Описание
`data-api-key`	Обязательно. Ваш ключ API Magic Translate.
`data-language`	Язык, на который переводится ваш контент, например `de`. По умолчанию используется язык браузера.
`data-source-language`	Язык, на котором написана ваша страница. Он обнаруживается автоматически, поэтому устанавливайте его только в том случае, если обнаружение дает неверные результаты.
`data-formality`	`formal` или `informal`. Поддерживается не на всех языках.
`data-debug`	Записывает запросы в консоль.

createMagicTranslate принимает соответствующие варианты: apiKey, language, sourceLanguage, formality и debug. Он также принимает вариант root, чтобы ограничить перевод определенным элементом. По умолчанию он переводит весь документ.

Смена языков

Вызовите setLanguage, чтобы перевести страницу на другой язык. В теге script экземпляр доступен как 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>

При использовании тега script выбранный язык посетителя сохраняется для загрузки следующей страницы.

Пример проекта

Вы можете найти пример проекта на GitHub и посмотреть его вживую.