核心概念

18ways 對幾件事情有明確的看法。一旦這些清楚了，API 的其餘部分就會變得簡單明瞭。

基本區域

您的 baseLocale 是您所使用的語言。

如果您的產品文案是用英式英語撰寫的，則您的基本區域設置為 en-GB。如果是用美式英語撰寫的，則您的基本區域設置為 en-US。

當當前語言環境與基本語言環境匹配時，18ways 會立即返回源文本並跳過翻譯工作。

目標語言環境

您的目標語言是用戶當前正在閱讀的語言。

在 React 中，您通常將其保存在狀態中並傳遞給根 Ways。

上下文

上下文是18ways組織相關文案的方式。

使用它們來保持翻譯請求的小型化，並避免將無關的文本混合在一起。

tsx
import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="fr-FR"
      baseLocale="en-GB"
      context="marketing"
    >
      <Ways context="hero">
        <Hero />
      </Ways>
      <Ways context="pricing">
        <Pricing />
      </Ways>
    </Ways>
  );
}

嵌套的 Ways 範圍組合成一個上下文路徑。 marketing 加上 hero 變成 marketing.hero.

接受的區域設定

18ways 區分為：

  • 一個它可以識別的地區，例如 fr-FR
  • 您的專案實際接受的區域設定

運行時可以從 API 獲取接受的語言環境列表，然後根據該列表對傳入的語言環境值進行標準化。

tsx
import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="fr-FR"
      baseLocale="en-GB"
      acceptedLocales={[
        'en-GB',
        'fr-FR',
        'de-DE',
      ]}
      context="app"
    >
      <App />
    </Ways>
  );
}

堅持

運行時使用的地區偏好 cookie 是 18ways_locale.

當翻譯加載時

@18ways/react 可以在一個已種子的上下文解析時暫停，並在客戶端保持一個共享的內存快取。

共享心理模型

保持模型簡單：

  1. 選擇適合您應用程式的正確套件。
  2. 正確設置基本區域設定。
  3. 保持上下文鍵穩定且有意義。
  4. 讓運行時翻譯完整的短語，而不是片段。

下一步: 訊息格式化