JavaScript

Przetłumacz dowolną stronę za pomocą zwykłego JavaScript: dodaj tag skryptu i zaznacz tekst, który chcesz przetłumaczyć. Działa to ze zwykłym HTML, stronami renderowanymi przez serwer, WordPress i innymi CMS-ami oraz aplikacjami zbudowanymi z dowolnego frameworka.

Konfiguracja za pomocą znacznika skryptu

Dodaj skrypt Magic Translate do swojej strony:

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

Jeśli nie masz jeszcze klucza API, zarejestruj się w Magic Translate, aby go otrzymać. Ponieważ klucz jest częścią Twojej strony, ogranicz go do własnych domen w dozwolonych domenach.

Następnie umieść tekst, który chcesz przetłumaczyć w elemencie <t>:

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

To wszystko. Twoja strona internetowa może być teraz przetłumaczona na ponad 70 języków.

Pomiń data-language, aby przetłumaczyć na język przeglądarki odwiedzającego.

Konfiguracja z npm

Jeśli pakujesz swój JavaScript, zainstaluj klienta z npm zamiast tego:

# 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 od razu zaczyna tłumaczyć stronę.

Konfiguracja

Znacznik skryptu akceptuje następujące atrybuty:

atrybut	Opis
`data-api-key`	Wymagane. Twój klucz API Magic Translate.
`data-language`	Język, na który jest przetłumaczona treść, na przykład `de`. Domyślnie język przeglądarki.
`data-source-language`	Język, w którym napisana jest Twoja strona. Jest wykrywany automatycznie, więc ustaw go tylko wtedy, gdy wykrycie daje błędne wyniki.
`data-formality`	`formal` lub `informal`. Nie jest obsługiwany we wszystkich językach.
`data-debug`	Rejestruje żądania do konsoli.

createMagicTranslate akceptuje odpowiednie opcje: apiKey, language, sourceLanguage, formality i debug. Akceptuje również root, aby ograniczyć tłumaczenie do określonego elementu. Domyślnie tłumaczy cały dokument.

Zmiana języków

Zadzwoń pod numer setLanguage, aby przetłumaczyć stronę na inny język. Z tagiem skryptu instancja jest dostępna jako 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>

Gdy używasz znacznika skryptu, wybór języka odwiedzającego jest zapisywany do następnego ładowania strony.

Przykładowy projekt

Możesz znaleźć przykładowy projekt na GitHub i zobaczyć go na żywo.