天天看点

SAP Spartacus 的页面设计思路

CMS提供了page structure,但不提供clear layout definition.

所谓CMS page structure,即CMS只提供了一个有序清单,包含了slots和Component信息。Slots自身,并没有包含应该如何在layout里渲染的元数据。

所以,SAP Spartacus视图逻辑里的layout信息,通过LayoutConfig配置对象定义。

Spartacus不区分page template和page section.

在LayoutConfig里,slots通过顺序进行配置。

SAP Spartacus 的页面设计思路

我在SAP Spartacus处于运行状态(即ng serve)始终处于运行状态时,进行代码热修改,经常遇到此类错误消息

SAP Spartacus 的页面设计思路
SAP Spartacus 的页面设计思路
SAP Spartacus 的页面设计思路

退出ng serve,重新执行即可:

SAP Spartacus 的页面设计思路
SAP Spartacus 的页面设计思路

Storefront.component.html里包含了整个Storefront layout的框架:

SAP Spartacus 的页面设计思路

page-layout.component.html里,用async将slots$展开,再用cx-page-slot将页面展示出来:

SAP Spartacus 的页面设计思路

slot值:SiteLogo

SAP Spartacus 的页面设计思路

page-slot.component.html:

SAP Spartacus 的页面设计思路

上图的 Section2A,Section2B,Section2C,都是 LandingPage2Template 的 slots,定义在文件 projects\storefrontlib\src\recipes\config\layout-config.ts 里面。

SAP Spartacus 的页面设计思路

继续阅读