最佳實務
將 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 的更多資訊。