如何在 sap Spartacus 中为模板内的插槽提供样式

Question

我有一个新模板 LandingPage3Template。

layoutSlots: {
  LandingPage3Template: {
    pageFold: 'Section2B',
    slots: [
      'Section2A',
      'Section2B',
      'Section2C',
      'Section1',
      'Section3',
      'Section4',
      'Section5'
    ],
  }
}

我只是想为插槽提供样式。有人可以帮我写一个自定义 CSS 样式来正确对齐吗？

我正在使用下面提到的代码，但它不起作用。

%cx-page-layout {
  // my code here
  width: 10%;
}

Answer 1

感谢您在我们的 SO 频道提问。

CMS 页面模板名称（即“LandingPage3Template”）和广告位位置（即“Section2A”）映射到 Spartacus DOM 中的 CSS 类。这意味着，您可以使用纯 CSS 规则来创建布局。

页面位置名称不一定在所有页面中都是唯一的（即“Section2A”也可能用于其他页面模板）。但是由于页面槽嵌套在页面模板中，您可以为给定页面模板中使用的页面槽创建 css 规则。

以下 CSS 规则显示了如何在“LandingPage3Template”中为“Section2A”创建规则。

.LandingPage3Template .Section2A {
  width: 10%;
}

虽然这是有效的 css 和 scss 语法，但在 scss 中它看起来像：

.LandingPage3Template {
  .Section2A {
    width: 10%;
  }
}

请注意，选择器前的百分比（即 %cx-page-layout）指的是所谓的占位符选择器。这在 Spartacus 中用于可选的 CSS，因此只有在使用占位符选择器时，CSS 才会出现在最终的 CSS 中。您可以在 https://sap.github.io/spartacus-docs/css-architecture/.

阅读更多关于斯巴达克斯 CSS 设置的信息

如何在 sap Spartacus 中为模板内的插槽提供样式

How to provide style for slots inside the template in sap Spartacus

sap

spartacus-storefront