文件說明：使用 TacoTranslate

使用 TacoTranslate

Chinese (Traditional)

翻譯字串

目前有三種方式可以翻譯字串：使用 Translate 元件、useTranslation 鉤子，或是 translateEntries 工具。

使用 Translate 元件。
輸出翻譯內容於 span 元素內，並支援渲染 HTML。

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

您可以使用例如 as="p" 在組件上更改元素類型。

使用 useTranslation 鉤子。
回傳純文字格式的翻譯。適用於例如 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 專案包含我們所稱的 origins。可以將它們視為字串和翻譯的入口點、資料夾或群組。

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Origins 讓您將字串分隔到有意義的容器中。 例如，您可以為文件建立一個 origin，為行銷頁面建立另一個 origin。

若要獲得更精細的控制，您可以在元件層級設置來源。

要實現此目標，請考慮在您的專案中使用多個 TacoTranslate 提供者。

請注意，相同的字串在不同的 origins 可能會有不同的翻譯。

最終，如何將字串劃分到不同的來源取決於您和您的需求。然而，請注意，在同一個來源中包含大量字串可能會增加載入時間。

處理變數

您應該始終為動態內容使用變數，例如用戶名稱、日期、電子郵件地址等。

字串中的變數使用雙大括號宣告，例如 {{variable}}。

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}
		/>
	);
}

上述範例將以純文字方式呈現。

伺服器端渲染