官網地址

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

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

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

import { translations, translationChunksConfig } from '@spartacus/assets';// ...imports: [B2cStorefrontModule.withConfig({i18n: {resources: translations,chunks: translationChunksConfig}}) ];

Adding Translations for Other Languages

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

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

要覆蓋單個翻譯，需要在默認翻譯之后提供具有覆蓋的對象。 下面是一個例子：

// app.moduleimport { translations } from '@spartacus/assets';// ...export const translationOverwrites = {en: { // langcart: { // chunkcartDetails: { // keys (nested)proceedToCheckout: 'Proceed to Checkout',},},}, };// ...imports: [B2cStorefrontModule.withConfig({i18n: { resources: translations }}),ConfigModule.withConfig({i18n: { resources: translationOverwrites }}) ]

Fallback Language

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

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

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

import { translations, translationChunksConfig } from '@spartacus/assets';// ...imports: [B2cStorefrontModule.withConfig({i18n: {resources: translations,chunks: translationChunksConfig,fallbackLang: 'en',}}) ];

Lazy Loading

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

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

要利用延遲加載，您需要為每種特定語言和塊提供不同的 JSON 文件，并使用 {{lng}} 語言占位符和 {{ns}} 占位符為塊配置 JSON 文件的 URL。 下面是一個例子：

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

Handling Translations in HTML

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

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

Configuring Chunks and Namespace Mapping

每個 key 都屬于一個命名空間，每個命名空間都封裝在一個chunk中（比如下面例子中的i18n.chunks）。 需要配置來解析哪個鍵屬于哪個命名空間和塊。 下面是一個例子：

imports: [B2cStorefrontModule.withConfig({i18n: {backend: {loadPath: 'assets/i18n-assets/{{lng}}/{{ns}}.json'},chunks: {...common: ['searchBox', 'sorting', ...],cart: ['cartDetails', 'cartItems', ...]product: ['productDetails', 'productList', ...]...}}}) ];

對應的 common.ts 的例子：

cxTranslate 也支持傳入參數：

Using Translations in TypeScript Code

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

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 里的用法：

<cx-card[content]="getPaymentCardContent(order.paymentInfo) | async" ></cx-card>

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP Spartacus Translation (翻译) 相关话题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。