使用 TacoTranslate
翻譯字串
目前有三種方法可以翻譯字串:Translate
元件、useTranslation
Hook,或是 translateEntries
工具。
使用 Translate
元件。
在 span
元素中輸出翻譯,並支援呈現 HTML。
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
您可以更改元素類型,例如在組件上使用 as="p"
。
使用 useTranslation
hook。
回傳翻譯為純字串。舉例來說,在 meta
標籤中很有用。
import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';
function Page() {
const helloWorld = useTranslation('Hello, world!');
useEffect(() => {
alert(helloWorld);
}, [helloWorld]);
return (
<title>{useTranslation('My page title')}</title>
);
}
使用 translateEntries
工具。
在伺服器端翻譯字串。提升你的 OpenGraph 圖像效果。
import {createEntry, translateEntries} from 'tacotranslate';
async function generateMetadata(locale = 'es') {
const title = createEntry({string: 'Hello, world!'});
const description = createEntry({string: 'TacoTranslate on the server'});
const translations = await translateEntries(
tacoTranslate,
{origin: 'opengraph', locale},
[title, description]
);
return {
title: translations(title),
description: translations(description)
};
}
字串的翻譯方式
當字串抵達我們的伺服器時,我們會先驗證並儲存它們,然後立即回傳機器翻譯。雖然機器翻譯的品質通常不及我們的 AI 翻譯,但它們能提供快速的初步回應。
同時,我們會啟動非同步翻譯工作,為您的字串產生高品質、最先進的 AI 翻譯。一旦 AI 翻譯準備就緒,它將取代機器翻譯,並在您每次請求字串翻譯時一併回傳。
如果您已手動翻譯某個字串,這些翻譯將優先使用並會被回傳。
使用來源
TacoTranslate 專案包含我們所稱的 來源。將它們視為字串或翻譯的入口、資料夾或群組。
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
來源可讓您把字串分成有意義的容器。 例如,您可以為說明文件建立一個來源,為您的行銷頁面建立另一個來源。
若要獲得更細緻的控制,您可以在元件層級設定來源(origins)。
為了達成此目的,請考慮 使用多個 TacoTranslate 提供者 在您的專案中。
請注意,相同的字串在不同的來源中可能會有不同的翻譯。
最終,如何將字串分配到不同的來源取決於你自己的需求。然而,請注意,在單一來源中包含大量字串可能會增加載入時間。
import {Translate} from 'tacotranslate/react';
function Greeting() {
const name = 'Juan';
return <Translate string="Hello, {{name}}!" variables={{name}} />;
}
import {useTranslation} from 'tacotranslate/react';
function useGreeting() {
const name = 'Juan';
return useTranslation('Hello, {{name}}!', {variables: {name}});
}
管理 HTML 內容
預設情況下, Translate
組件支援並呈現 HTML 內容。然而,您可以透過將 useDangerouslySetInnerHTML
設為 false
來選擇不採用此行為。
當翻譯不受信任的內容(例如使用者產生的內容)時,強烈建議停用 HTML 呈現。
所有輸出在渲染之前,始終會使用 sanitize-html 進行淨化。
import {Translate} from 'tacotranslate/react';
function Page() {
return (
<Translate
string={`
Welcome to <strong>my</strong> website.
I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
`}
variables={{url: 'https://tacotranslate.com'}}
useDangerouslySetInnerHTML={false}
/>
);
}
上面的範例將以純文字呈現。