最佳實踐

獲得糟糕翻譯的最快方法是讓運行時繞過可避免的應用結構問題。

使用真實的上下文名稱

良好的上下文鍵解釋了文案的位置：

ts
await engine.t('Pay now', {
  context: 'checkout.payment-form',
});
 
await engine.t('Billing history', {
  context: 'dashboard.billing-history',
});
 
await engine.t('Simple pricing', {
  context: 'marketing.pricing-hero',
});

避免使用像 page1、copy 或 misc 這樣的匿名桶。

翻譯完整的思想

好:

ts
const label = await engine.t(
  'Download your latest invoice as PDF'
);

避免：

18ways 可以將常見的鏈接情況作為一條消息處理。 <T><a href="#">點擊這裡</a> 查看更多</T> 應該保持為一句話，而不是被拆分並重新拼接在一起。

ts
const first = await engine.t('Download');
const second = await engine.t(
  'your latest invoice'
);
const third = await engine.t('as PDF');
 
const stitched = [first, second, third].join(' ');

保持包裝邊界清晰

  • 如果您在 Next.js 中，請使用 @18ways/next 進行區域解析和元數據。
  • 如果您只使用 React，請在您的應用中保持區域狀態並使用 @18ways/react。
  • 如果您在 React 之外，請使用 @18ways/core 並自行負責 UI 整合。

讓路由與您的產品相匹配

公共行銷頁面通常希望基於路徑的區域路由以便於SEO。而內部儀表板和內部工具的路由則通常不需要。因此，當前網站將/dashboard、/__design和/__email排除在路徑路由之外。

保持來源副本的人性化

18ways 在源文本像真正的產品文案，而不是像壓縮的翻譯鍵時效果最佳。

良好的源代碼提供了更好的上下文，並為您的團隊提供了可讀的代碼。