官方文檔

Spartacus 基于單頁面應用程序設計模式，但仍有頁面呈現在店面中。 “頁面”的概念是網絡的關鍵并且無法避免：頁面由 URL 標識、由搜索引擎索引、通過社交媒體共享、存儲在瀏覽器歷史記錄中等等。 頁面是最終用戶的基礎，也是內容創建過程的基礎。

Page structure

CMS 中的頁面由槽和組件構成。 頁面包含插槽，插槽包含組件。 為了組織公共插槽和組件，Spartacus 支持頁面模板。 頁面模板包含可全局使用的布局和組件，例如頁眉和頁腳部分。

CMS 提供了頁面結構，但沒有提供清晰的布局定義。 頁面結構只為每個插槽提供一個有序的組件列表，但插槽本身沒有關于它們應該如何在布局中呈現的元信息。

為了向視圖邏輯提供布局信息，Spartacus 使用 LayoutConfig 配置對象以給定的順序呈現頁面插槽。 此外，您可以使用 CSS 規則來提供特定的布局。

如何配置布局

Spartacus 不區分頁面模板和頁面部分，您可以使用 LayoutConfig 配置兩者。 與任何 Spartacus 配置一樣，您可以向 ConfigModule 提供 LayoutConfig。

對于每個模板或部分，可以按特定順序配置插槽。 下面是一個例子：

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

為了簡化項目的初始設置，如果頁面布局配置不完整，則所有頁面槽都在頁面上呈現。 此外，還會向控制臺打印一條警告，以及有關可配置的可用頁槽的信息。

Using Outlets to Override Page Templates

outlet 無法完全重定義新的 Component，只能插入自定義 HTML 代碼到標準 Component 的 HTML 里。

當頁面模板、插槽或組件在 Spartacus 中動態呈現時，Spartacus 將為每個插槽添加 Outlets。 Outlets 可用于替換 Spartacus 中的部分頁面模板。 插槽的出口很容易找到，因為它們的標簽對應于被包裝元素的名稱。

以下是如何使用插座替換 ProductAddToCartComponent 的示例：

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

Outlet Context

插座包含一個上下文，它是一個對象，包含可以在插座內使用的各種屬性。 每個出口的上下文根據其包含的元素而不同。

以下示例演示了如何使用上下文來獲取插槽內的組件列表：

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

CSS Layout Rules

在呈現頁面布局或部分布局的插槽時，頁面模板名稱的值被添加為 DOM 元素的 CSS 類。 您還可以使用插槽的 cx-page-slot 或位置名稱來選擇每個插槽。 您可以使用這些 CSS 類以松散耦合的方式將特定的樣式規則映射到布局。 Spartacus 提供的 CSS 是可選的，因此您可以添加新樣式或修改現有樣式。

由于頁面布局由頁面模板代碼和位置名稱驅動，因此布局與后端的安裝數據緊密耦合。 如果您決定添加或替換頁面模板和插槽位置，您還需要調整相關的 CSS 規則。

Choosing an Adaptive or Responsive Layout

Spartacus 店面是使用響應式設計而非自適應設計實現的。對于店面軟件開發以及內容制作，響應式設計被廣泛接受，因為它實施速度更快且更具成本效益。

但是，沒有什么能阻止您在 Spartacus 店面中使用自適應設計方法。 SAP Commerce Cloud 后端支持多站點實施，并且可以針對不同站點配置不同的內容（目錄）。

UI 層中的自適應設計可以在可訪問性和性能方面為最終用戶帶來更好的體驗。對于這兩個方面，Spartacus 允許為每個斷點進行自適應配置。可以為每個斷點提供特定的插槽配置。下面的示例配置顯示了用于超小 (xs) 屏幕的替代插槽配置，具有不同的順序（以提高可訪問性）和有限數量的插槽（以提高性能）。

const defaultLayoutConfig: LayoutConfig = {header: {slots: ['FirstSlot','SecondSlot','LastSlot'],xs: ['LastSlot','FirstSlot']} };

Accessibility

僅響應式方法無法解決可訪問性的所有用例，例如重新排序組件的能力。 您可能還需要重新對組件排序以優化訪問您店面的不同設備的用戶體驗。 Spartacus 中的標題就是一個很好的例子：對于大屏幕，所有元素都是可見的，但在小設備上，一些組件隱藏在漢堡菜單后面，一些組件被重新排列。

盡管 CSS 支持 DOM 元素的重新排序，包括 flex-box 和 grid，但重新排序的 DOM 元素與 HTML Tab 系統不同步。 這不會為使用標簽系統瀏覽店面的人提供最佳體驗。 每個斷點的插槽配置解決了這個問題。 為每個斷點（重新）構建布局。

服務器端渲染

使用服務器端呈現 (SSR) 在服務器上呈現頁面時需要特別注意。 每當 SSR 進程或邊緣緩存層無法尋址客戶端設備時，該進程應決定合適的斷點來呈現屏幕。 能夠完整呈現所有內容的斷點更適合搜索引擎，這對于桌面斷點來說是典型的。 另一方面，針對性能進行優化的斷點可為在移動設備上訪問店面的最終用戶提供更好的體驗。

在 Spartacus 中，始終呈現所有內容。 如果可能的話，可以根據設備檢測改進服務器端渲染，或者提供標準視口（移動優先）。

總結

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

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