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-formality`	`formal` 或 `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 上找到一个示例项目并实时观看。