Spartacus 每個 UI 劃分成不同的區域 section，每個區域由若干個 slots 組成。每個 slot 可以包含一個或多個 CMS Component.

我曾經寫過一篇 文章 詳細介紹過。

以 homepage為例，其實現的 HTML 位置：projects\storefrontlib\src\layout\main\storefront.component.html

看這個 header 區域：

這個 header 區域分配的 slots，定義在文件 layout-config.ts 里：

這些 slots 里包含的 CMS Components，運行時渲染好之后，顯示的內容如下圖高亮區域所示：

客戶可以通過配置的方式，決定這些 slots 哪些顯示，哪些不顯示，以及調換slots 間的相對位置。

比如我讓 header 區域只顯示一個 Sitelogo：

最后的效果如下圖：

我曾經出于調試目的，把 UI 上每個區域的 slot id 和 Component id 都打印出來，如下圖所示：

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP 电商云 Spartacus UI 页面布局的设计原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。