我有一个新的模板LandingPage3Template。`
layoutSlots: {
LandingPage3Template: {
pageFold: 'Section2B',
slots: [
'Section2A',
'Section2B',
'Section2C',
'Section1',
'Section3',
'Section4',
'Section5'
],
}
}
`
我只是想为广告位提供样式。有人可以帮助我编写自定义CSS样式以使其正确对齐吗？
我正在使用下面提到的代码，但是它不起作用。
`%cx-page-layout{
//my code here
E.g width: 10%;
}`
感谢您在我们的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设置的更多信息。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句