コアコンセプト

18waysは、いくつかのことについて意見を持っています。これらが明確になると、APIの残りの部分は 簡単になります。

基本ロケール

あなたのbaseLocaleは、あなたが書く言語です。

あなたの製品コピーがイギリス英語で書かれている場合、あなたの基本ロケールはen-GBです。アメリカ英語で書かれている場合、あなたの基本ロケールはen-USです。

現在のロケールがベースロケールと一致する場合、18waysはソーステキストを即座に返し、翻訳作業をスキップします。

ターゲットロケール

ユーザーが現在読んでいる言語が、あなたのターゲットロケールです。

Reactでは、通常それを状態に保持し、ルートに渡します方法。

コンテキスト

コンテキストは、18waysが関連するコピーをグループ化する方法です。

翻訳リクエストを小さく保ち、無関係なテキストを混ぜないようにするために、それらを使用してください。

tsx
インポート { 方法 } から '@18ways/react';
 
エクスポート 関数 AppRoot() {
  戻り値 (
    <方法
      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>
  );
}

ネストされた 方法 スコープは1つのコンテキストパスに構成されます。マーケティング プラス ヒーロー になります マーケティング.ヒーロー。

受け入れられたロケール

18waysは次のように区別します:

  • 認識できるロケール、例えばfr-FR
  • プロジェクトが実際に受け入れるロケール

ランタイムはAPIから受け入れられたロケールリストを取得し、そのリストに対して受信したロケール値を正規化できます。

tsx
インポート { Ways } から '@18ways/react';
 
エクスポート 関数 AppRoot() {
  戻り値 (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="fr-FR"
      baseLocale="en-GB"
      acceptedLocales={[
        'en-GB',
        'fr-FR',
        'de-DE',
      ]}
      context="app"
    >
      <App />
    </Ways>
  );
}

持続性

ランタイムで使用されるロケール設定クッキーは 18ways_locale です。

翻訳が読み込まれるとき

@18ways/reactは、シードされたコンテキストが解決される間にサスペンドでき、クライアント上で共有のメモリ内キャッシュを保持します。

共有されたメンタルモデル

モデルをシンプルに保つ:

  1. アプリに適したパッケージを選択してください。
  2. ベースロケールを正しく設定してください。
  3. コンテキストキーは安定していて意味のあるものに保ってください。
  4. ランタイムにフレーズ全体を翻訳させ、断片ではなくする。

次: メッセージフォーマット