TacoTranslate
/
說明文件定價
 
  1. 介紹
  2. 開始使用
  3. 設定與組態
  4. 使用 TacoTranslate
  5. 伺服器端渲染
  6. 進階用法
  7. 最佳實務
  8. 錯誤處理與除錯
  9. 支援的語言

使用 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>
	);
}

來源可讓您將字串分成有意義的容器。 例如,您可以為文件建立一個來源,為行銷頁面建立另一個來源。

若要更細緻地控制,您可以在元件層級上設定來源。

為了達成此目的,請考慮 使用多個 TacoTranslate 提供者 在您的專案中。

請注意,相同的字串在不同的來源中可能會有不同的翻譯。

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

處理變數

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

字串中的變數以雙大括號宣告,例如 {{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}
		/>
	);
}

上面的範例將以純文字呈現。

伺服器端渲染

來自 Nattskiftet 的產品挪威製造