如何更改 Spartacus 中的页面布局？答案

【问题标题】：How to change Layout of the Page in Spartacus?如何更改 Spartacus 中的页面布局？
【发布时间】：2021-02-24 03:06:27
【问题描述】：

地狱专家，

我是 spartacus 的新手，正在尝试自定义页面布局。如下图改变布局（页面结构）的方法是什么

Page layout

【问题讨论】：

标签： spartacus-storefront

【解决方案1】：

您可以通过创建自定义布局文件并将该文件用作app.module.ts中的布局文件来自定义页面模板的布局

您可以在 ts 文件中更改插槽的顺序，即页面结构，并从 layout.scss 调整布局的 css 以使您的页面看起来像照片中的那样

你可以找到默认的 spartacus 布局配置文件here

例如：

custom-layout-config.ts

import { LayoutConfig } from '@spartacus/storefront';

    export const customLayoutConfig: LayoutConfig = {
      layoutSlots: {
        header: {
          lg: {
            slots: [
              'PreHeader',
              'SiteContext',
              ...
            ],
          },
          slots: ['PreHeader', 'SiteLogo', 'SearchBox', 'MiniCart'],
        },
        navigation: {
          lg: { slots: [] },
          slots: ['SiteLogin', 'NavigationBar', 'SiteContext', 'SiteLinks'],
        },
        footer: {
          slots: ['Footer'],
        },
        LandingPage2Template: {
          pageFold: 'Section2B',
          slots: [
            'Section1',
            'Section2A',
            'Section2B',
            'Section2C',
            'Section3',
            'Section4',
            'Section5',
          ],
        },
        ProductDetailsPageTemplate: {
          lg: {
            pageFold: 'UpSelling',
          },
          pageFold: 'Summary',
          slots: [
            'Summary',
            'UpSelling',
            'CrossSelling',
            'Tabs',
            'PlaceholderContentSlot',
          ],
        },
...
    };

app.module.ts

B2cStorefrontModule.withConfig({
...
layoutSlots: customLayoutConfig.layoutSlots,
...
})

【讨论】：

【解决方案2】：

也许您可以在 Page Layout 和 CSS Architecture 的 Spartacus 文档中找到有关如何执行此操作的一些信息

【讨论】：