官網(wǎng)地址

在典型的 Spartacus 店面中，大部分內(nèi)容要么來自 CMS，要么來自產(chǎn)品內(nèi)容。 但是，對于店面站點(diǎn)標(biāo)簽（例如按鈕中的文本），內(nèi)容存儲在單獨(dú)的文件中，并且可以對這些文件進(jìn)行本地化（即翻譯）。

Spartacus 使用 i18next 庫作為其翻譯機(jī)制，并使用 i18next-xhr-backend 延遲加載翻譯塊。 這兩個庫都有豐富的 API，但 Spartacus 只支持其中的一部分，并將它們視為實(shí)現(xiàn)細(xì)節(jié)。 因此，Spartacus 不支持在您的應(yīng)用程序中自定義使用 i18next。

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

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

Adding Translations for Other Languages

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

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

這會將翻譯編譯到您的應(yīng)用程序 JS 包中。 盡管這對于快速啟動來說很好，但在生產(chǎn)中，您可能希望對翻譯塊利用延遲加載。

Overwriting Individual Translations

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

// 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

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

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

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

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

Lazy Loading

翻譯按語言和命名塊進(jìn)行結(jié)構(gòu)化，因此您只能加載當(dāng)前語言和當(dāng)前頁面的翻譯資源。 以下是翻譯資源的結(jié)構(gòu)示例：

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 文件夾中找到帶有翻譯的預(yù)定義 JSON 文件。 您需要從您自己的自定義端點(diǎn)或通過將它們復(fù)制到 Angular 應(yīng)用程序的 /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', ...]...}}}) ];

對應(yīng)的 common.ts 的例子：

cxTranslate 也支持傳入?yún)?shù)：

Using Translations in TypeScript Code

也可以使用 TypeScript 代碼進(jìn)行翻譯，即利用 Spartacus 的 TranslationService 服務(wù)。

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的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。