创建新页面和组件Spartacus是一个单页应用程序，但它仍然使用页面的概念来区分应用程序内的不同视图。Spartacus页面来自CMS，由插槽和组件组成。页面包含插槽，插槽包含组件。为了组织公共插槽和组件，Spartacus支持页面模板。页面模板包含布局和全局可用的组件，例如页眉和页脚部分。Spartacus从CMS接收每个页面，其中包含用于呈现相应组件的插槽和组件列表。创建新页面Spartacus中的页面基于使用ResponsibleAPI从SAPCommerce后端获取的CMS页面。来自SAPCommerce端的数据定义了url、标题等元数据和页面结构。结构意味着可用的部分类型和分配给这些部分的CMS组件。Spartacus获取这些信息并为该结构提供真正的组件，包括逻辑、用户界面、响应式设计、样式等。由于采用这种定义的方法，创建新的Spartacus页面需要2个步骤。首先，需要在SAPCommerce端创建一个CMS页面。其次，需要创建Spartacus端组件并将其分配给CMS组件。要在Spartacus中创建新页面，您首先需要在CMS中创建相关页面。SmartEdit提供了一个直观的向导，您可以使用它为您的内容目录创建类别、内容、电子邮件和产品页面。您还可以向页面添加限制，以指定向客户显示页面的条件。SmartEdit提供了一个直观的向导来帮助您为内容目录创建页面。您可以创建类别、内容、电子邮件和产品页面。创建页面时，您可以选择创建主页面或变体页面。主页（Primarypage）是始终向所有用户显示的默认版本。您创建的所有变体页面都基于主页。您不能为页面分配限制。当没有变体页面或没有与当前显示条件匹配的变体页面时，即当显示条件不满足现有的时间、用户组、类别等限制规则时，主页面的变体页面为显示。变体页面（virationpage）基于主页，但添加了限制。限制指定显示变体页面的条件，例如当属于特定组的用户查看页面时，或者当用户在指定日期期间选择页面并且在指定日期有要显示的变体页面时。可以设置Pages添加类别、时间、用户组等限制。您可以添加到变体页面的限制类型取决于页面类型。创建页面时，您应该注意以下事项：如果主页尚不存在，则无法创建变体页面。变体页面必须基于主页。您只能为类别和产品页面类型创建一个主页。您可以为一种内容页面类型创建多个母版页。你只需要为内容页面指定一个页面标签，它在内容目录版本中必须是唯一的。您在主页上指定一个页面标签，它会被所有关联的变体页面继承。您可以基于单个主页创建多个变体页面。您必须向变体页面添加至少一项限制。SAP建议您将页面添加到暂存版本的目录，以便稍后可以将更改与在线版本的目录同步。具体步骤可以参考这个页面作为第一步，我们先从SAPCommerce端的定义说起。创建一个新的CMS页面需要创建多个不同类型的实例。让我们先谈谈类型。Template模板：模板定义了页面的各个部分。ContentPage：它是页面本身。它包含像url，应该使用哪个模板，标题等值。url存储在该类型的属性“tag”上。ContentSlot：这是可以分配给一个部分的类型，负责内容本身。它没有自己的内容，但可以将组件分配给插槽。该组件包含基于斯巴达克斯派对分配的内容。CMS组件：各种CMS组件在标准商务系统中可用，也可以创建新类型。如果不需要特殊属性，可以使用通用CMSFlexComponent类型来创建组件实例。ContentSlotForPage：该类型只处理将ContentSlot实例分配给ContentPage实例的部分。部分由该类型的“position”属性处理。也可以通过Impex进行创建。创建这些实例的Impex始终具有相同的结构，并且可以重复用于创建新的CMS页面。只需根据您的需要修改内容即可。它也可以在后台手动完成，但我建议使用impex并将其导入HAC。只需登录，转到控制台选项卡，ImpEx导入并粘贴修改后的impex内容。Impex看起来像这样：$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######组件和页面######INSERT_UPDATECMSFlexComponent;$contentCV[unique=true];uid[unique=true];name;flexType;;ZBestsellerComponent;ZBestsellerComponent;ZBestsellerComponent#创建缺失的页面INSERT_UPDATECon??tentPage;$contentCV[unique=true];uid[unique=true];name;masterTemplate(uid,$contentCV);label;defaultPage[default='true'];approvalStatus(code)[default='approved'];主页[default='false'];;ZBestseller;BestsellerPage;ContentPage1Template;/ourbestsellerINSERT_UPDATECon??tentSlot;$contentCV[unique=true];uid[unique=true]；名称；活动；cmsComponents(uid,$contentCV);;Section2A-ZBestseller;Section2ASlotforBestsellerPage;true;ZBestsellerComponentINSERT_UPDATECon??tentSlotForPage;$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=enINSERT_UPDATECon??tentPage;$contentCV[unique=true];uid[unique=true];title[lang=$language];;ZBestseller;OurBestseller在CMS中创建新页面后，Spartacus会自动添加，无需任何配置Spartacus中页面的URL是相同的作为CMS标签。创建新组件要在Spartacus中创建新组件，您首先需要在CMS中创建相关组件。您可以通过将组件类型添加到内容槽来创建组件。添加组件类型时，会出现组件编辑器，供您定义组件的属性。您可以定义的属性取决于组件所基于的组件类型。创建组件后，它会出现在“添加组件”面板的“保存的组件”选项卡中，您和其他用户可以将其添加到目录的其他页面。创建组件时，您可以在组件编辑器中指定组件的属性。它由以下三(3)个选项卡组成：内容：允许您指定组件的名称和内容。您可以在此处指定的内容取决于组件所基于的组件类型。例如，在创建Paragraph组件时，您可以指定文本或HTML代码，在创建简单的横幅组件时，您可以指定要显示的图像、外部或内部URL等等。BasicInformationBasicInfo：显示组件的ID，以及创建和最后修改组件的日期和时间。VisibilityVisibility：允许您更改组件的可见性并为其分配约束，如下所示：(1)ShowComponents设置允许您隐藏可见组件并使隐藏组件可见。请注意，如果您处于高级编辑模式，则只能使隐藏的组件可见。(2)限制编辑器允许您添加、编辑和删除限制。请注意，如果可见性设置为OFF，则该限制不适用。由于组件的内容根据其所基于的组件类型而有所不同，因此在描述每种组件类型的文档中描述了给定组件的内容。具体步骤参考此链接。在CMS中创建新组件后，需要将其映射到新的Angular组件。以下示例显示了如何映射新的心愿单组件。在这种情况下，wishlist组件具有以下文件结构：然后您可以像这样在wishlist.module.ts中映射wishlist组件：/*...*/imports:[ConfigModule.withConfig({cmsComponents:{YOUR_NEW_COMPONENT_TYPE:{component:WishlistComponent//TheclassofyourAngularcomponent}}})]此逻辑将WishlistComponent注入CMS中的任何位置。静态页面您还可以通过创建静态页面来创建带有自定义组件的自定义页面。以下过程描述了如何使用心愿单组件创建静态心愿单页面。(1)创建静态页面和静态路由。以下示例在Wishlist-page.module.ts中创建了一个心愿单页面：从'@spartacus/storefront'导入{CmsPageGuard}；/*...*/conststaticRoutes:Routes=[{path:'wishlist',component:WishlistPageComponent//自定义页面组件,canActivate:[CmsPageGuard]}];/*...*/imports:[RouterModule.forChild(staticRoutes)];(2)将组件添加到页面，就像添加任何常规Angular组件一样。在以下示例中，组件被添加到wishlist-page.component.html：
