TacoTranslate
/
文件說明定價
 
  1. 介紹
  2. 入門指南
  3. 設定與配置
  4. 使用 TacoTranslate
  5. 伺服器端渲染
  6. 進階用法
  7. 最佳實踐
  8. 錯誤處理與除錯
  9. 支援的語言

最佳實踐

將 URL 放入變數中

在翻譯包含 URL 或類似資料的字串時,將這些 URL 放入變數中,然後在模板中引用它們,被視為一種良好做法。

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

使用 ARIA 標籤

在翻譯互動元素(如按鈕)的文字時,包含 ARIA 標籤以確保無障礙性非常重要。ARIA 標籤可幫助螢幕閱讀器提供關於該元素功能的描述性資訊。

例如,如果你有一個讓使用者從程式碼區塊複製文字的按鈕,可以使用 aria-label 屬性來提供清晰的描述:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

這種感覺有點非常元。

全局來源陣列與多重元件來源

這種模式僅在使用 Next.js Pages Router 時有效。

在處理較大型應用程式時,將字串和翻譯拆分成多個較小的來源是有益的。這種方法有助於減少打包大小和傳輸時間,確保本地化的高效與可擴展性。

雖然這在僅於客戶端渲染時相對簡單,但在為伺服器端渲染抓取翻譯時,管理來源會變得複雜。然而,您可以利用 TacoTranslate 客戶端的 origins 陣列來自動化來源管理。

請參考以下範例,我們已將元件和頁面分別放在不同的檔案中。

components/pricing-table.tsx
import TacoTranslate, {Translate} from 'tacotranslate/react';
import tacoTranslate from '../tacotranslate-client';

// Set an origin name for this component
const origin = 'components/pricing-table';

// Push the origin into the origins array as this file is imported
tacoTranslate.origins.push(origin);

export default function PricingTable() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing table" />
			// ...
		</TacoTranslate>
	);
}
pages/pricing.tsx
import TacoTranslate, {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
import PricingTable from '../components/pricing-table';

const origin = 'pages/pricing';
tacoTranslateClient.origins.push(origin);

export default function PricingPage() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing page" />
			<PricingTable />
		</TacoTranslate>
	);
}

// We will now fetch translations for all imported components and their origins automatically
export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

請參閱我們的伺服器端渲染範例,以獲取有關 getTacoTranslateStaticProps 的更多資訊。

錯誤處理與除錯

Nattskiftet 的產品 Nattskiftet挪威製造