您可以使用 CMS（後端）中的 pageLabel 配置內容頁面的 URL。 這些頁面標籤無法本地化。

您可以為 Spartacus 中的非內容頁面配置 URL。 這些主要與產品和類別頁面有關。 您可以將屬性（例如產品名稱）配置為 URL 的一部分。 例如，產品頁面的預設配置是 storefront.com/product/1234，但您可以配置 URL 以包含產品相關資料，例如產品或類別標題。

可配置的 URL 通常有助於改進 SEO，但也可用於幫助將現有解決方案遷移到 Spartacus：客戶可以保留其現有 URL，並在 Spartacus 中配置等效 URL。

## site-context-url-serializer.ts (SiteContextUrlSerializer)

透過這種方式定義一個介面，表示 url parameters 支援多個。

```typescript
export interface SiteContextUrlParams {
  [name: string]: string;
}
```
下面的程式碼演示瞭如何使用`裝飾器`設計模式，對 Angular 標準的 `UrlTree` 進行修飾：

```typescript
export interface UrlTreeWithSiteContext extends UrlTree {
  siteContext?: SiteContextUrlParams;
}
```
這種策略就是首先定義新增的欄位 `siteContext` 對應的資料型別。

### urlExtractContextParameters

從輸入的瀏覽器位址列 url 裡，提取 context 引數列表：
![](https://img-blog.csdnimg.cn/img_convert/a21b8f05089abe75a37a6f3b4c4b4fea.png)

使用正規表示式分離出 url 和 query 兩部分：
![](https://img-blog.csdnimg.cn/img_convert/a321448ef36c870dc3269574b0aee739.png)

### urlEncodingParameters

這是一個 getter：

```typescript
  /**
   * Names of site context parameters encoded in the URL
   */
  protected get urlEncodingParameters(): string[] {
    return this.siteContextParams.getUrlEncodingParameters();
  }
```

從註釋看，包含的僅僅是引數名稱。透過注入的 `siteContextParams` 取得。

後者從全域性配置物件裡取得：

```typescript
  getUrlEncodingParameters(): string[] {
    return (this.config.context && this.config.context.urlParameters) || [];
  }
```
這個 getter 的值為一個字串陣列，包含了三個元素：baseSite，language 和 currency

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

拿到 baseSite 在 config 物件裡配置的值：

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

最後結果：

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

### parse

它返回由已識別引數縮短的給定 URL 的 UrlTree，但將引數值儲存在 UrlTree 的自定義屬性中：`siteContext`。

這個方法被 Angular Router 框架呼叫。

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

將 site context 儲存到 urlTree 結構的自定義屬性欄位 siteContext 上：

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

最後 parse 完成的結果：
![](https://img-blog.csdnimg.cn/img_convert/edbfe6fc70691d254bbf67f69976eb42.png)

### serialize

也會被 Angular Router 框架呼叫。

傳入的 Urltree 資料結構，已經包含了 siteContext 自定義屬性的值：

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

```typescript
  /**
   * Returns the site context parameters stored in the custom property
   * of the UrlTree: `siteContext`.
   */
  urlTreeExtractContextParameters(
    urlTree: UrlTreeWithSiteContext
  ): SiteContextUrlParams {
    return urlTree.siteContext ? urlTree.siteContext : {};
  }
```

最後序列化之後的 url：
![](https://img-blog.csdnimg.cn/img_convert/98f3828584a7dc674daa8608496f8dca.png)

SAP 電商雲 Spartacus UI SiteContextUrlParams 的實現明細介紹

相關文章