JavaScript

모든 웹사이트를 일반 자바스크립트로 번역해. 스크립트 태그를 추가하고 번역하려는 텍스트를 표시해.이것은 일반 HTML, 서버에서 렌더링된 페이지, 워드프레스와 다른 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으로 설정

자바스크립트를 번들로 묶는 경우 대신 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에서 예제 프로젝트를 찾아서 라이브로 볼 수 있어.