最佳實踐

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

使用真實的上下文名稱

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

tsx

import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="en-GB"
      baseLocale="en-GB"
      context="app"
    >
      <Ways context="checkout.payment-form">
        <PaymentForm />
      </Ways>
      <Ways context="dashboard.billing-history">
        <BillingHistory />
      </Ways>
      <Ways context="marketing.pricing-hero">
        <PricingHero />
      </Ways>
    </Ways>
  );
}

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

翻譯完整的思想

好:

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <T>
      Download your latest invoice as{' '}
      <a href="/invoices/latest.pdf">PDF</a>
    </T>
  );
}

避免：

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

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <>
      <T>Download</T>{' '}
      <T>your latest invoice</T>{' '}
      <T>as PDF</T>
    </>
  );
}

保持包裝邊界清晰

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

讓路由與您的產品相匹配

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

保持來源副本的人性化

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

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

最佳實踐

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

使用真實的上下文名稱

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

tsx

import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="en-GB"
      baseLocale="en-GB"
      context="app"
    >
      <Ways context="checkout.payment-form">
        <PaymentForm />
      </Ways>
      <Ways context="dashboard.billing-history">
        <BillingHistory />
      </Ways>
      <Ways context="marketing.pricing-hero">
        <PricingHero />
      </Ways>
    </Ways>
  );
}

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

翻譯完整的思想

好:

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <T>
      Download your latest invoice as{' '}
      <a href="/invoices/latest.pdf">PDF</a>
    </T>
  );
}

避免：

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

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <>
      <T>Download</T>{' '}
      <T>your latest invoice</T>{' '}
      <T>as PDF</T>
    </>
  );
}

保持包裝邊界清晰

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

讓路由與您的產品相匹配

保持來源副本的人性化

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

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

最佳實踐

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

使用真實的上下文名稱

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

tsx

import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="en-GB"
      baseLocale="en-GB"
      context="app"
    >
      <Ways context="checkout.payment-form">
        <PaymentForm />
      </Ways>
      <Ways context="dashboard.billing-history">
        <BillingHistory />
      </Ways>
      <Ways context="marketing.pricing-hero">
        <PricingHero />
      </Ways>
    </Ways>
  );
}

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

翻譯完整的思想

好:

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <T>
      Download your latest invoice as{' '}
      <a href="/invoices/latest.pdf">PDF</a>
    </T>
  );
}

避免：

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

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <>
      <T>Download</T>{' '}
      <T>your latest invoice</T>{' '}
      <T>as PDF</T>
    </>
  );
}

保持包裝邊界清晰

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

讓路由與您的產品相匹配

保持來源副本的人性化

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

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

Best Practices