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

我曾經(jīng)寫過一篇 文章 詳細(xì)介紹過。

以 homepage為例，其實(shí)現(xiàn)的 HTML 位置：projects\storefrontlib\src\layout\main\storefront.component.html

看這個(gè) header 區(qū)域：

這個(gè) header 區(qū)域分配的 slots，定義在文件 layout-config.ts 里：

這些 slots 里包含的 CMS Components，運(yùn)行時(shí)渲染好之后，顯示的內(nèi)容如下圖高亮區(qū)域所示：

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

比如我讓 header 區(qū)域只顯示一個(gè) Sitelogo：

最后的效果如下圖：

我曾經(jīng)出于調(diào)試目的，把 UI 上每個(gè)區(qū)域的 slot id 和 Component id 都打印出來，如下圖所示：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。