Each UI of Spartacus is divided into different sections, and each section is composed of several slots. Each slot can contain one or more CMS Component.
I once wrote a article which introduced it in detail.
Take homepage as an example, its implemented HTML location: projects\storefrontlib\src\layout\main\storefront.component.html
Look at this header area:
The slots allocated for this header area are defined in the file layout-config.ts:
After the CMS Components contained in these slots are rendered at runtime, the displayed content is shown in the highlighted area in the following figure:
The customer can decide which of these slots to display and which are not to be displayed through configuration, and to exchange the relative positions of the slots.
For example, I let the header area only display a Sitelogo:
The final effect is as follows:
I used to print out the slot id and component id of each area on the UI for debugging purposes, as shown in the following figure:
More original articles by Jerry, all in: "Wang Zixi":
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。