文檔地址：

https://sap.github.io/spartacus-docs/page-layout/#outlet-position

Spartacus is based on a single-page application design pattern, but there are still pages that are rendered in the storefront. The concept of a “page” is key to the web and cannot be avoided: pages are identified by URLs, indexed by search engines, shared through social media, stored in browser history, and so on. Pages are fundamental to end users, and to the content creation process as well.

頁面被urls標識

Pages in CMS are constructed with slots and components.

CMS page通過slots和Components組織。

A page contains slots, and slots contain components. To organize common slots and components, Spartacus supports page templates. A page template contains layout and components that can be used globally, such as header and footer sections.

page包含slots，slots包含Components. 為了重用slots和Components，引入了page temolate的概念。

Page template包含layout和Component，這些Component可以被全局使用，不如用在header和footer sections里。

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

CMS只管提供page structure，不管layout定義。

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.

page structure只提供了基于每個slot，包含的Components是什么。但是slots自身并不知道應該如何渲染。

例子：home page slot里包含了兩個Component：

但是home page slot不知道應該按照什么樣的布局來顯示這兩個Component.

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.

因此，SAP Spartacus通過LayoutConfig來定義頁面布局，指定page slot的渲染順序。

看代碼：

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

When page templates, slots or components are rendered dynamically rendered in Spartacus, outlets get added for each slot. Outlets can be use to replace part of a page template in Spartacus. The outlets for the slots are easy to find as their label corresponds to name of the element being wrapped.

outlet可以被用來替換Spartacus里的page template的部分內容。

下列是一個具體的使用outlet結合自定義Custom Add to Cart來替換標準ProductAddToCartComponent的例子。

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

While the slots of the page layout or section layout are rendered, the page template name is added as a CSS class.

template名稱作為CSS class出現在最后渲染的頁面里。

Because the page layout is driven by page template codes and position names, the layout is tightly coupled to the installation data of the back end. If you decide to add or replace page templates and slot positions, you need to adjust the relevant CSS rules as well.

/*** The layout configuration is used to define the overall layout of the storefront.* The configuration includes the following aspects:* - breakpoint layout (AKA screen layout)* - Page sections slot configuration (i.e. header vs footer)* - page template slot configuration (i.e. landing page template vs PDP page template)* - deferred loading configuration** The page slot configurations is directly related to the data in the backend. If you use the* Spartacus sample-data, you will have an aligned setup. However, if you introduce custom page* templates and/or slots, you most likely need to further adjust or replace this configuration.*/

例子：調整Spartacus這個文件：

projects\storefrontlib\src\recipes\config\layout-config.ts

運行時就會看到兩個logo和兩個cart了：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-oxP4pf7z-1604747065607)(https://upload-images.jianshu.io/upload_images/2085791-7224bf34235e6313.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

The Spartacus storefront is implemented using responsive design, rather than adaptive design. For storefront software development, as well as for content production, responsive design is widely accepted as being faster to implement and more cost effective.

Spartacus的實現是responsive設計，而非adaptive design.

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

這里的xs代表extra-small的屏幕。

A responsive-only approach cannot address all use cases for accessibility, such as the ability to re-order components. You may also need to re-order components to optimize the user experience for different devices that access your storefront. The header in Spartacus is a good example: for large screens, all elements are visible, but on small devices, some of the components are hidden behind a hamburger menu, and some components are rearranged.

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

總結

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

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