ドキュメンテーション

JavaScript

プレーンなJavaScriptであらゆるウェブサイトを翻訳する：スクリプトタグを追加して、翻訳したいテキストをマークする。これは、プレーンHTML、サーバーでレンダリングされたページ、WordPress、その他のCMS、および任意のフレームワークで構築されたアプリで動作する。

スクリプトタグを使ったセットアップ

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 はすぐにページの翻訳を開始する。

構成

スクリプトタグには次の属性を受け入れる。

属性説明
data-api-key必須。あなたの Magic Translate APIキー。
data-languageコンテンツが翻訳された言語、例えば de。デフォルトはブラウザの言語だ。
data-source-languageページが書かれている言語。自動的に検出されるので、検出結果が間違っている場合にのみ設定して。
data-formalityformal または informal。すべての言語でサポートされているわけではない。
data-debugリクエストをコンソールに記録する。

createMagicTranslate は apiKey、language、sourceLanguage、formality、debug という対応するオプションを受け入れる。また、翻訳を特定の要素に限定する root も受け付けている。デフォルトでは、文書全体を翻訳する。

言語を変える

setLanguage に電話して、ページを別の言語に翻訳する。スクリプトタグを使用すると、インスタンスは 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>

スクリプトタグを使用すると、訪問者の言語選択は次のページの読み込み時に保存される。

サンプルプロジェクト

GitHubでサンプルプロジェクトを見つけて、ライブで見ることができる。

前へuseTranslate composable次はコンテンツを翻訳する