Page Structure - 頁面結構

Pages in CMS are constructed with slots and components. A page contains slots, and slots contain components.

CMS 頁面由 slots 和 components 組成。 頁面包含 slots，slots 包含 Components.

To organize common slots and components, Spartacus supports page templates.

為了支持通用 slots 和 Components，Spartacus 支持 page template.

A page template contains layout and components that can be used globally, such as header and footer sections.

下面這張圖展示了 id 為 homepage 的頁面，其頁面模板為 Landing Page 2 Template.

home 頁面包含的 Content slots：

把 SiteLogo 拿出來單獨看。

在 SiteLogo 這個 Slot 里查看，他放置了哪些 Component：

這里能查看到一個 slot 里到底分配了哪些 Components：

The CMS provides the page structure, but it does not provide a clear layout definition.

CMS 只定義了頁面結構，但不負責提供頁面布局定義。

The page structure only provides an ordered list of components per slot, but the slots themselves do not have meta info on how they should be rendered in the layout.

頁面結構只定義了一個 slots的有序列表，每個 slots 里又包含了一個 Components 的有序列表。Slots 本身并不包含布局信息。

To provide layout information to the view logic, Spartacus uses a LayoutConfig configuration object to render the page slots in a given order. Additionally, you can use CSS rules to provide a specific layout.

Spartacus 使用 LayoutConfig 配置對象，來按照順序渲染頁面 slots.

Spartacus makes no distinction between page templates and page sections, and you can configure both with the LayoutConfig.

Spartacus 不區分 Page template 和 page section.

For each template or section, the slots can be configured in a specific order.

對于每一個 page template，Spartacus 還提供了額外的配置自由度：可以再次調整 slots 的相對順序。

const defaultLayoutConfig: LayoutConfig = {header: {slots: ['TopHeaderSlot','NavigationSlot']},footer: {slots: ['FooterSlot']},LandingPageTemplate: {slots: ['Section1','Section2A','Section2B']} };

Using Outlets to Override Page Templates

When page templates, slots or components are rendered dynamically rendered in Spartacus, outlets get added for each slot.

每個 outlet 都關聯了一個 outlet.

Outlets can be use to replace part of a page template in Spartacus.

outlet 可以被用來替換 Spartacus page template 的一部分。

The outlets for the slots are easy to find as their label corresponds to name of the element being wrapped.

下列是一個例子，如何用自定義 HTML 片段替換標準的 Component：

<ng-template cxOutletRef="ProductAddToCartComponent"><div>Custom Title</div><custom-add-to-cart></custom-add-to-cart> </ng-template>

當然，用 Component 替換方式更簡單直接。

Outlet 上下文

前面說過，outlet reference 可以關聯一個 page template，一個 page slot / section 或者一個 template.

根據關聯元素類型的不同，其上下文(outlet context) 也不相同。

看個例子：

<ng-template cxOutletRef="Section1" let-model>"Section1" position<pre>{{ model.components$ | async | json }}</pre></ng-template>

毫無疑問，Section1 是一個 Slot：

注意，Backoffice 里搜索屬性需要點擊 + icon，添加成功后，才能在搜索中生效。

Section1 slot 里包含的是如下兩個 Splash Banner Components：類型都為SimpleResponsiveBannerComponent.

第二個 Component：

按照 SAP 幫助文檔的介紹，outlet context 包含的 components$ 包含的是 slot 里包含的 Component 列表。

outlet 生效的頁面：

原始界面：

另一個例子：

<ng-template cxOutletRef="ProductDetailsPageTemplate" cxOutletPos="before"><div class="before-pdp">Campaign UI for Canon</div> </ng-template>

效果：

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

總結

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

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