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和CSS语法，但在CSS中看起来像：

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

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

如何为SAP Spartacus中的模板内部的插槽提供样式

1 个答案: