[Creating New Pages and Components](https://sap.github.io/spartacus-docs/creating-pages-and-components/)

Spartacus 是一個單頁面的應用程式，但它仍然使用頁面的概念來區分應用程式內的不同檢視。 Spartacus 頁面來自 CMS，由插槽和元件構成。 頁面包含插槽，插槽包含元件。 為了組織公共插槽和元件，Spartacus 支援頁面模板。 頁面模板包含佈局以及可全域性使用的元件，例如頁首和頁尾部分。

Spartacus 從 CMS 接收每個頁面，其中包含一個插槽和元件列表，該列表用於呈現相應的元件。

# Creating a New Page

Spartacus 中的頁面基於使用負責 API 從 SAP Commerce 後端獲取的 CMS 頁面。 來自 SAP Commerce 端的資料定義了後設資料，如 url、標題等，以及頁面的結構。 結構意味著可用的部分型別以及分配給這些部分的 CMS 元件。 Spartacus 接收此資訊併為該結構提供真正的元件，包括邏輯、ui、響應式設計、樣式等。由於這種定義的方法，它需要 2 個步驟來建立新的 Spartacus 頁面。 首先，需要在 SAP Commerce 端建立 CMS 頁面。 其次，需要建立 Spartacus 端的元件並將其分配給 CMS 元件。

要在 Spartacus 中建立新頁面，首先需要在 CMS 中建立相關頁面。

SmartEdit 提供了一個直觀的嚮導，您可以使用它為內容目錄建立類別、內容、電子郵件和產品頁面。您還可以向頁面新增限制，以指定在何種條件下向客戶顯示頁面。

SmartEdit 提供了一個直觀的嚮導來幫助您為內容目錄建立頁面。您可以建立類別、內容、電子郵件和產品頁面。建立頁面時，您可以選擇建立主頁面或變體頁面。

主頁(Primary page)是始終向所有使用者顯示的預設版本。您建立的所有變體頁面都基於主頁面。您不能為主頁分配限制。當不存在變體頁面或不存在與當前顯示條件匹配的變體頁面時，即顯示條件不滿足應用於現有的時間、使用者組、類別等限制規則時，顯示主頁面變體頁面。

變體頁面(viration page)基於主頁面，但新增了限制。限制指定在何種條件下顯示變體頁面，例如當屬於特定組的使用者檢視頁面時，或者當使用者在指定日期期間選擇頁面並且存在要在指定日期顯示的變體頁面時.您可以為變體頁面新增類別、時間、使用者組和其他限制。您可以新增到變體頁面的限制型別取決於頁面的型別。

建立頁面時，您應該注意以下事項：

* 如果主頁尚不存在，則您無法建立變體頁面。 變體頁面必須基於主頁面。
* 您只能為類別和產品頁面型別建立一個主頁。
* 您可以為內容頁面型別(content page type)建立多個主頁面。
* 您只需要為內容頁面指定一個頁面標籤(page label)，並且它在內容目錄版本中必須是唯一的。 您在主頁上指定一個頁面標籤，它會被所有關聯的變體頁面繼承。
* 您可以基於單個主頁面建立多個變體頁面。
* 您必須向變體頁面新增至少一個限制。

SAP 建議您將頁面新增到目錄的暫存版本，以便您以後可以將更改與目錄的線上版本同步。

具體的步驟可以參考這個[頁面](https://help.sap.com/viewer/9d346683b0084da2938be8a285c0c27a/2011/en-US/3afd0f992d9041b2a7b82032774260ba.html)

作為第一步，讓我們從 SAP Commerce 端定義開始。建立一個新的 CMS 頁面需要為不同型別的型別建立多個例項。我們先談談這些型別。

* 模板 Template：模板定義了頁面的各個部分。
* ContentPage：它是頁面本身。它包含諸如 url、應使用哪個模板、標題等值。 url 儲存在這種型別的屬性“標籤”上。
* ContentSlot：這是可以分配給 section 的型別，負責內容本身。它自己沒有內容，但可以將元件分配給插槽。該元件包含基於 Spartacus 方分配的內容。
* CMS 元件：標準商務系統中有多種 CMS 元件可用，也可以建立新型別。如果不需要特殊屬性，則可以使用通用 CMSFlexComponent 型別來建立元件例項。
* ContentSlotForPage：此型別僅處理將 ContentSlot 例項分配給 ContentPage 例項的部分。部分由這種型別的“位置”屬性處理。

也可以透過 Impex 完成建立。

建立這些例項的 Impex 始終具有相同的結構，並且可以重複用於建立新的 CMS 頁面。 只需根據您的需要修改內容。 它也可以在後臺手動完成，但我建議使用 impex 並將其匯入 HAC。 只需登入，轉到控制檯選項卡和 ImpEx 匯入並貼上修改後的 impex 內容。 Impex 看起來像這樣：

```sql
$contentCatalog=electronics-spaContentCatalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged]
$siteResource=jar:de.hybris.platform.spartacussampledataaddon.constants.SpartacussampledataaddonConstants&/spartacussampledataaddon/import/contentCatalogs/electronicsContentCatalog
 
###### Components and Pages ######
 
INSERT_UPDATE CMSFlexComponent;$contentCV[unique=true];uid[unique=true];name;flexType
;;ZBestsellerComponent;ZBestsellerComponent;ZBestsellerComponent
 
# Create the missing pages
INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];name;masterTemplate(uid,$contentCV);label;defaultPage[default='true'];approvalStatus(code)[default='approved'];homepage[default='false']
;;ZBestseller;Bestseller Page;ContentPage1Template;/ourbestseller
 
INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(uid,$contentCV)
;;Section2A-ZBestseller;Section 2A Slot for Bestseller Page;true;ZBestsellerComponent
 
INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true];contentSlot(uid,$contentCV)[unique=true]
;;Section2A-ZBestseller;Section2A;ZBestseller;Section2A-ZBestseller
 
#Language settings
$language=en
INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];title[lang=$language]
;;ZBestseller;Our Bestseller
```

在 CMS 中建立新頁面後，Spartacus 會自動新增它，無需任何配置。 Spartacus 中頁面的 URL 與 CMS 標籤相同。

# Creating a New Component

要在 Spartacus 中建立新元件，首先需要在 CMS 中建立相關元件。您可以透過將元件型別新增到內容槽來建立元件。新增元件型別時，會出現元件編輯器供您定義元件的屬性。 您可以定義的屬性取決於元件所基於的元件型別。 建立元件後，它會出現在“新增元件”皮膚的“儲存的元件”選項卡中，可供您和其他使用者新增到目錄的其他頁面。

建立元件時，您可以在元件編輯器中指定元件的屬性。 它由以下三 (3) 個選項卡組成：

* 內容 Content：允許您指定元件的名稱和內容。 您可以在此處指定的內容取決於元件所基於的元件型別。 例如，建立 Paragraph 元件時，可以指定文字或 HTML 程式碼，建立簡單的橫幅元件時，可以指定要顯示的影像以及外部或內部 URL 等。
* 基本資訊 Basic Info：顯示元件的 ID，以及元件建立和上次修改的日期和時間。
* 可見性 Visibility：允許您更改元件的可見性併為其分配限制，如下所示：

(1)顯示元件設定允許您隱藏可見元件並使隱藏元件可見。 請注意，如果您處於高階編輯模式，則只能使隱藏的零部件可見。
(2)限制編輯器允許您新增、編輯和刪除限制。 請注意，如果可見性設定為 OFF，則限制不適用。

由於元件的內容根據其所基於的元件型別而有所不同，因此在描述每個元件型別的文件中描述了指定元件的內容。

具體步驟參考這個[連結](https://help.sap.com/viewer/9d346683b0084da2938be8a285c0c27a/2011/en-US/fe7f25cd80ec42e5a197b322dc7aafbc.html)

在 CMS 中建立新元件後，需要將其對映到新的 Angular 元件。

以下示例顯示瞭如何對映新的願望清單元件。 在這種情況下，願望清單元件具有以下檔案結構：

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

然後你可以在 wishlist.module.ts 中對映願望清單元件，如下所示：

```typescript
/*...*/
imports: [
  ConfigModule.withConfig({
    cmsComponents: {
      YOUR_NEW_COMPONENT_TYPE: {
        component: WishlistComponent // The class of your Angular component
      }
    }
  })
]
```

此邏輯會在 CMS 中的任何位置注入 WishlistComponent。

# Static Pages

您還可以透過建立靜態頁面來建立帶有自定義元件的自定義頁面。

以下過程描述瞭如何使用願望清單元件建立靜態願望清單頁面。

(1) 建立靜態頁面和靜態路由。

以下示例在 Wishlist-page.module.ts 中建立了一個願望清單頁面：

```typescript
import { RouterModule, Routes } from '@angular/router';
 import { CmsPageGuard } from '@spartacus/storefront';
 /*...*/

const staticRoutes: Routes = [{
   path: 'wishlist',
   component: WishlistPageComponent // Custom page component,
   canActivate: [CmsPageGuard]
 }];

/*...*/
 imports: [RouterModule.forChild(staticRoutes)];
```

(2) 將元件新增到頁面，就像新增任何常規 Angular 元件一樣。

在以下示例中，元件新增到 wishlist-page.component.html 中：

```html

   <wishlist-component></wishlist-component>
```

[Creating New Pages and Components](https://sap.github.io/spartacus-docs/creating-pages-and-components/)

Spartacus 是一個單頁面的應用程式，但它仍然使用頁面的概念來區分應用程式內的不同檢視。 Spartacus 頁面來自 CMS，由插槽和元件構成。 頁面包含插槽，插槽包含元件。 為了組織公共插槽和元件，Spartacus 支援頁面模板。 頁面模板包含佈局以及可全域性使用的元件，例如頁首和頁尾部分。

Spartacus 從 CMS 接收每個頁面，其中包含一個插槽和元件列表，該列表用於呈現相應的元件。

# Creating a New Page

Spartacus 中的頁面基於使用負責 API 從 SAP Commerce 後端獲取的 CMS 頁面。 來自 SAP Commerce 端的資料定義了後設資料，如 url、標題等，以及頁面的結構。 結構意味著可用的部分型別以及分配給這些部分的 CMS 元件。 Spartacus 接收此資訊併為該結構提供真正的元件，包括邏輯、ui、響應式設計、樣式等。由於這種定義的方法，它需要 2 個步驟來建立新的 Spartacus 頁面。 首先，需要在 SAP Commerce 端建立 CMS 頁面。 其次，需要建立 Spartacus 端的元件並將其分配給 CMS 元件。

要在 Spartacus 中建立新頁面，首先需要在 CMS 中建立相關頁面。

SmartEdit 提供了一個直觀的嚮導，您可以使用它為內容目錄建立類別、內容、電子郵件和產品頁面。您還可以向頁面新增限制，以指定在何種條件下向客戶顯示頁面。

SmartEdit 提供了一個直觀的嚮導來幫助您為內容目錄建立頁面。您可以建立類別、內容、電子郵件和產品頁面。建立頁面時，您可以選擇建立主頁面或變體頁面。

主頁(Primary page)是始終向所有使用者顯示的預設版本。您建立的所有變體頁面都基於主頁面。您不能為主頁分配限制。當不存在變體頁面或不存在與當前顯示條件匹配的變體頁面時，即顯示條件不滿足應用於現有的時間、使用者組、類別等限制規則時，顯示主頁面變體頁面。

變體頁面(viration page)基於主頁面，但新增了限制。限制指定在何種條件下顯示變體頁面，例如當屬於特定組的使用者檢視頁面時，或者當使用者在指定日期期間選擇頁面並且存在要在指定日期顯示的變體頁面時.您可以為變體頁面新增類別、時間、使用者組和其他限制。您可以新增到變體頁面的限制型別取決於頁面的型別。

建立頁面時，您應該注意以下事項：

* 如果主頁尚不存在，則您無法建立變體頁面。 變體頁面必須基於主頁面。
* 您只能為類別和產品頁面型別建立一個主頁。
* 您可以為內容頁面型別(content page type)建立多個主頁面。
* 您只需要為內容頁面指定一個頁面標籤(page label)，並且它在內容目錄版本中必須是唯一的。 您在主頁上指定一個頁面標籤，它會被所有關聯的變體頁面繼承。
* 您可以基於單個主頁面建立多個變體頁面。
* 您必須向變體頁面新增至少一個限制。

SAP 建議您將頁面新增到目錄的暫存版本，以便您以後可以將更改與目錄的線上版本同步。

具體的步驟可以參考這個[頁面](https://help.sap.com/viewer/9d346683b0084da2938be8a285c0c27a/2011/en-US/3afd0f992d9041b2a7b82032774260ba.html)

作為第一步，讓我們從 SAP Commerce 端定義開始。建立一個新的 CMS 頁面需要為不同型別的型別建立多個例項。我們先談談這些型別。

* 模板 Template：模板定義了頁面的各個部分。
* ContentPage：它是頁面本身。它包含諸如 url、應使用哪個模板、標題等值。 url 儲存在這種型別的屬性“標籤”上。
* ContentSlot：這是可以分配給 section 的型別，負責內容本身。它自己沒有內容，但可以將元件分配給插槽。該元件包含基於 Spartacus 方分配的內容。
* CMS 元件：標準商務系統中有多種 CMS 元件可用，也可以建立新型別。如果不需要特殊屬性，則可以使用通用 CMSFlexComponent 型別來建立元件例項。
* ContentSlotForPage：此型別僅處理將 ContentSlot 例項分配給 ContentPage 例項的部分。部分由這種型別的“位置”屬性處理。

也可以透過 Impex 完成建立。

建立這些例項的 Impex 始終具有相同的結構，並且可以重複用於建立新的 CMS 頁面。 只需根據您的需要修改內容。 它也可以在後臺手動完成，但我建議使用 impex 並將其匯入 HAC。 只需登入，轉到控制檯選項卡和 ImpEx 匯入並貼上修改後的 impex 內容。 Impex 看起來像這樣：

```sql
$contentCatalog=electronics-spaContentCatalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged]
$siteResource=jar:de.hybris.platform.spartacussampledataaddon.constants.SpartacussampledataaddonConstants&/spartacussampledataaddon/import/contentCatalogs/electronicsContentCatalog
 
###### Components and Pages ######
 
INSERT_UPDATE CMSFlexComponent;$contentCV[unique=true];uid[unique=true];name;flexType
;;ZBestsellerComponent;ZBestsellerComponent;ZBestsellerComponent
 
# Create the missing pages
INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];name;masterTemplate(uid,$contentCV);label;defaultPage[default='true'];approvalStatus(code)[default='approved'];homepage[default='false']
;;ZBestseller;Bestseller Page;ContentPage1Template;/ourbestseller
 
INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(uid,$contentCV)
;;Section2A-ZBestseller;Section 2A Slot for Bestseller Page;true;ZBestsellerComponent
 
INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true];contentSlot(uid,$contentCV)[unique=true]
;;Section2A-ZBestseller;Section2A;ZBestseller;Section2A-ZBestseller
 
#Language settings
$language=en
INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];title[lang=$language]
;;ZBestseller;Our Bestseller
```

在 CMS 中建立新頁面後，Spartacus 會自動新增它，無需任何配置。 Spartacus 中頁面的 URL 與 CMS 標籤相同。

# Creating a New Component

要在 Spartacus 中建立新元件，首先需要在 CMS 中建立相關元件。您可以透過將元件型別新增到內容槽來建立元件。新增元件型別時，會出現元件編輯器供您定義元件的屬性。 您可以定義的屬性取決於元件所基於的元件型別。 建立元件後，它會出現在“新增元件”皮膚的“儲存的元件”選項卡中，可供您和其他使用者新增到目錄的其他頁面。

建立元件時，您可以在元件編輯器中指定元件的屬性。 它由以下三 (3) 個選項卡組成：

* 內容 Content：允許您指定元件的名稱和內容。 您可以在此處指定的內容取決於元件所基於的元件型別。 例如，建立 Paragraph 元件時，可以指定文字或 HTML 程式碼，建立簡單的橫幅元件時，可以指定要顯示的影像以及外部或內部 URL 等。
* 基本資訊 Basic Info：顯示元件的 ID，以及元件建立和上次修改的日期和時間。
* 可見性 Visibility：允許您更改元件的可見性併為其分配限制，如下所示：

(1)顯示元件設定允許您隱藏可見元件並使隱藏元件可見。 請注意，如果您處於高階編輯模式，則只能使隱藏的零部件可見。
(2)限制編輯器允許您新增、編輯和刪除限制。 請注意，如果可見性設定為 OFF，則限制不適用。

由於元件的內容根據其所基於的元件型別而有所不同，因此在描述每個元件型別的文件中描述了指定元件的內容。

具體步驟參考這個[連結](https://help.sap.com/viewer/9d346683b0084da2938be8a285c0c27a/2011/en-US/fe7f25cd80ec42e5a197b322dc7aafbc.html)

在 CMS 中建立新元件後，需要將其對映到新的 Angular 元件。

以下示例顯示瞭如何對映新的願望清單元件。 在這種情況下，願望清單元件具有以下檔案結構：

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

然後你可以在 wishlist.module.ts 中對映願望清單元件，如下所示：

```typescript
/*...*/
imports: [
  ConfigModule.withConfig({
    cmsComponents: {
      YOUR_NEW_COMPONENT_TYPE: {
        component: WishlistComponent // The class of your Angular component
      }
    }
  })
]
```

此邏輯會在 CMS 中的任何位置注入 WishlistComponent。

# Static Pages

您還可以透過建立靜態頁面來建立帶有自定義元件的自定義頁面。

以下過程描述瞭如何使用願望清單元件建立靜態願望清單頁面。

(1) 建立靜態頁面和靜態路由。

以下示例在 Wishlist-page.module.ts 中建立了一個願望清單頁面：

```typescript
import { RouterModule, Routes } from '@angular/router';
 import { CmsPageGuard } from '@spartacus/storefront';
 /*...*/

const staticRoutes: Routes = [{
   path: 'wishlist',
   component: WishlistPageComponent // Custom page component,
   canActivate: [CmsPageGuard]
 }];

/*...*/
 imports: [RouterModule.forChild(staticRoutes)];
```

(2) 將元件新增到頁面，就像新增任何常規 Angular 元件一樣。

在以下示例中，元件新增到 wishlist-page.component.html 中：

```html

   <wishlist-component></wishlist-component>
```

如何給 SAP Spartacus Storefront 建立新的頁面

相關文章