콘텐츠 번역하기

Magic Translate 번역하고 싶은 콘텐츠를 표시해.원본 콘텐츠는 번역이 로드되기 전까지 보여.

<t> 엘리먼트

<t> 요소에 텍스트를 넣어 번역해.HTML을 포함할 수 있어:

<t>This content will be translated</t>

<t>Click <a href="/sale">here</a> to see <b>today's</b> deals.</t>

사용자 지정 요소 이름을 선호한다면 <mt-translate> 도 효과가 있어.

data-t 속성이야.

래퍼 요소를 추가할 수 없으면 기존 요소에 data-t 추가해서 내용을 번역해.

<title data-t>My online shop</title>

<select>
  <option data-t>Small</option>
  <option data-t>Large</option>
</select>

어트리뷰트

data-t-attrs 안에 번역할 속성을 공백으로 구분해서 나열해.

<input placeholder="Search products" data-t-attrs="placeholder" />

<img src="team.jpg" alt="Our team" title="Say hi" data-t-attrs="alt title" />

변수들

이름이나 개수처럼 변경되는 값을 data-v JSON 객체로 넣고 $name 참조해.

<t data-v='{"name": "Bob", "count": 7}'>Hi $name, you have $count new messages</t>

<input placeholder="Search $count products" data-t-attrs="placeholder" data-v='{"count": 3}' />

Magic Translate 는 값 주위의 텍스트를 Hi {0}, you have {1} new messages 으로 한 번 번역하고 값을 페이지에 다시 넣어.번역은 캐시되어 모든 이름과 개수에 적용되며 값 자체는 Magic Translate 로 전송되지 않아.

새 값을 표시하려면 data-v 바꿔라.캐시된 번역은 재사용되고 요청은 없어.

element.dataset.v = JSON.stringify({ name: 'Bob', count: 8 });

값은 처음 나타나는 순서대로 번호가 매겨져 있어.번역은 언어에 필요한 곳 어디든 옮길 수 있어. 예를 들어 {1} neue Nachrichten für {0}.

몇 가지 규칙:

• data-v 키만 교체되므로 $5 같은 텍스트는 그대로 유지돼.두 개의 키가 같은 방식으로 시작하면 (예: count, counts) 가장 긴 쪽이 이겨.
• 같은 이름이 두 번 이상 나타날 수 있어.
• 값은 HTML이 아니라 텍스트로 삽입돼.그 대신 주위의 텍스트에 마크업을 넣어 줘. Hi <b>$name</b>.
• 내용에서 변수는 텍스트로만 바뀌고 href 또는 title 같은 속성에서는 바뀌지 않아.
• data-v 가 유효한 JSON 객체가 아닌 경우, 텍스트는 번역되지 않고 경고가 기록돼.텍스트에 나타나지 않는 키는 경고도 기록해.
• 스크립트가 로드되기 전까지는 $name 볼 수 있어.페이지 초반에 스크립트를 로드하거나 그때까지 요소들을 숨겨.

옵션들

단일 요소에 옵션을 설정하려면 다음 속성을 사용해.

<t data-lang="fr" data-formality="formal">How are you?</t>

변경되는 콘텐츠

나중에 페이지에 추가되거나 스크립트에 의해 변경된 콘텐츠도 번역돼.이것은 자바스크립트로, 예를 들어 htmx나 jQuery로 렌더링한 콘텐츠에서 작동해.

동시에 요청된 모든 번역은 한 번의 요청으로 API로 전송되고 번역은 캐시돼.원하는 만큼 요소를 표시할 수 있어.

한계

단일 요소의 내용은 10KB, 즉 약 5,000자를 초과할 수 없어.중첩된 요소가 부모 <t> 요소의 일부로 번역돼.