[官網地址](https://sap.github.io/spartacus-docs/i18n/#overwriting-individual-translations)

在典型的 Spartacus 店面中，大部分內容要麼來自 CMS，要麼來自產品內容。 但是，對於店面站點標籤（例如按鈕中的文字），內容儲存在單獨的檔案中，並且可以對這些檔案進行本地化（即翻譯）。

Spartacus 使用 i18next 庫作為其翻譯機制，並使用 i18next-xhr-backend 延遲載入翻譯塊。 這兩個庫都有豐富的 API，但 Spartacus 只支援其中的一部分，並將它們視為實現細節。 因此，Spartacus 不支援在您的應用程式中自定義使用 i18next。

![](https://img-blog.csdnimg.cn/img_convert/f6156378fadc38549f6552cc860258ee.png)

為了快速開始，從@spartacus/assets 匯入預定義的 Spartacus 翻譯（目前只有英文），並在 B2cStorefrontModule 的配置中註冊它們。 下面是一個例子：

```typescript
import { translations, translationChunksConfig } from '@spartacus/assets';

// ...

imports: [
  B2cStorefrontModule.withConfig({
    i18n: {
        resources: translations,
        chunks: translationChunksConfig
    }
  })
];
```

# Adding Translations for Other Languages

除了使用預定義的 Spartacus 翻譯，您還可以提供自己的英語翻譯，並新增其他語言的翻譯。 下面是一個例子：

```typescript
import { translations, translationChunksConfig } from '@spartacus/assets';

// ...

imports: [
  B2cStorefrontModule.withConfig({
    i18n: {
        resources: {
            en: translations, // or YOUR_ENGLISH_TRANSLATIONS,
            de: YOUR_GERMAN_TRANSLATIONS,
            ...
        },
        chunks: translationChunksConfig
    }
  })
];
```

這會將翻譯編譯到您的應用程式 JS 包中。 儘管這對於快速啟動來說很好，但在生產中，您可能希望對翻譯塊利用延遲載入。

# Overwriting Individual Translations

要覆蓋單個翻譯，需要在預設翻譯之後提供具有覆蓋的物件。 下面是一個例子：

```typescript
// app.module

import { translations } from '@spartacus/assets';

// ...

export const translationOverwrites = {
  en: { // lang
    cart: { // chunk
      cartDetails: { // keys (nested)
        proceedToCheckout: 'Proceed to Checkout',
      },
    },
  },
};

// ...

imports: [
    B2cStorefrontModule.withConfig({
        i18n: { resources: translations }
    }),
    ConfigModule.withConfig({
        i18n: { resources: translationOverwrites }
    })
]
```

# Fallback Language

如果缺少特定鍵的翻譯，生產模式下的店面將顯示不間斷的空格字元。 為了更容易捕獲丟失的鍵，在開發模式下，Spartacus 顯示翻譯鍵前面帶有塊的名稱和冒號（例如，[common:form.confirm]）。

為了在缺少翻譯時提供更好的使用者體驗，您可以指定後備語言。 設定 fallbackLang 選項可確保對於每個丟失的翻譯，使用後備語言的等效項。

以下是使用英語作為後備語言的示例配置：

```typescript
import { translations, translationChunksConfig } from '@spartacus/assets';

// ...

imports: [
  B2cStorefrontModule.withConfig({
    i18n: {
        resources: translations,
        chunks: translationChunksConfig,
        fallbackLang: 'en',
    }
  })
];
```

# Lazy Loading

翻譯按語言和命名塊進行結構化，因此您只能載入當前語言和當前頁面的翻譯資源。 以下是翻譯資源的結構示例：

```typescript
interface TranslationResources {
  [lang: string]: {
    [chunkName: string]: {
      [key: string]: any; // value or nested object with keys
    };
  };
}
```

要利用延遲載入，您需要為每種特定語言和塊提供不同的 JSON 檔案，並使用 \{{lng}} 語言佔位符和 \{{ns}} 佔位符為塊配置 JSON 檔案的 URL。 下面是一個例子：

```typescript
imports: [
  B2cStorefrontModule.withConfig({
    i18n: {
        backend: {
            loadPath: 'assets/i18n-assets/{{lng}}/{{ns}}.json'
        },
        chunks: translationChunksConfig
    }
  })
];
```

對於 Spartacus，您可以在 @spartacus/storefront 的 /i18n-assets 資料夾中找到帶有翻譯的預定義 JSON 檔案。 您需要從您自己的自定義端點或透過將它們複製到 Angular 應用程式的 /assets 資料夾中來提供這些檔案。

> cp ./node_modules/@spartacus/assets/i18n-assets ./src/assets -r

![](https://img-blog.csdnimg.cn/img_convert/49459f0963ec1bd342db242c92872c1c.png)

# Handling Translations in HTML

要處理 HTML 中的翻譯，您可以使用 cxTranslate 管道。 下面是一個例子：

```html
<input placeholder="{{ 'searchBox.searchHere' | cxTranslate }}">
```

## Configuring Chunks and Namespace Mapping

每個 key 都屬於一個名稱空間，每個名稱空間都封裝在一個chunk中（比如下面例子中的i18n.chunks）。 需要配置來解析哪個鍵屬於哪個名稱空間和塊。 下面是一個[例子](https://sap.github.io/spartacus-docs/i18n/#overwriting-individual-translations)：

```typescript
imports: [
  B2cStorefrontModule.withConfig({
    i18n: {
        backend: {
            loadPath: 'assets/i18n-assets/{{lng}}/{{ns}}.json'
        },
        chunks: {
            ...
            common: ['searchBox', 'sorting', ...],
            cart: ['cartDetails', 'cartItems', ...]
            product: ['productDetails', 'productList', ...]
            ...
        }
    }
  })
];
```
對應的 common.ts 的例子：

![](https://img-blog.csdnimg.cn/img_convert/472bd9d37b0f63dd72b6925535432f23.png)

cxTranslate 也支援傳入引數：
![](https://img-blog.csdnimg.cn/img_convert/cd00de88e5638893f0b1e795dc1d0141.png)

# Using Translations in TypeScript Code

也可以使用 TypeScript 程式碼進行翻譯，即利用 Spartacus 的 TranslationService 服務。

```typescript
import { TranslationService } from '@spartacus/core';

constructor(
    private translation: TranslationService
) {}

getPaymentCardContent(payment: PaymentDetails): Observable<card> {
   return combineLatest([
     this.translation.translate('paymentForm.payment'),
     this.translation.translate('paymentCard.expires', {
       month: payment.expiryMonth,
       year: payment.expiryYear,
     }),
   ]).pipe(
     map(([textTitle, textExpires]) => {
       return {
         title: textTitle,
         textBold: payment.accountHolderName,
         text: [payment.cardType.name, payment.cardNumber, textExpires],
       };
     })
   );
}
```

HTML 裡的用法：

```html
<cx-card async=""></cx-card>
```</card>

SAP Spartacus Translation(翻譯) 相關話題

相關文章