根据 Spartacus 中的页面插槽更改 PageTemplate 样式

Question

嗨，斯巴达克斯专家，

我通过 Impex 创建了一个名为 xyz 的页面模板，在前端 cx-page-layout 元素将接收 class xyz，但我如何添加额外的 classes 这个 cx-page-layout 元素？我将模板用于 2 个案例（每个案例使用不同的 cx-page-slot 并且将不同的 CSS 样式应用到 cx-page-layout 和 xyz class 会很棒取决于所应用的情况。

重要的是要说明样式应该应用于 CSS 中的 PageTemplate，而不是插槽。

Answer 1

将 classes 应用于 css 中的页面模板 class 会更好吗？将 classes 添加到动态呈现的 <cx-page-layout> 元素似乎不是一个好主意，并且您已经有一个 class 可用作通过继承修改页面模板样式的方法。

根据您使用的 if/which 预处理器，这里有几种继承属性的方法：Can a CSS class inherit one or more other classes?

Answer 2

我解决原问题的办法纯粹是靠CSS。因为这只是一个定位问题：我添加了 display: flex 所以我可以将 align-items: center 应用到名为 EmptyCartCenterContent 的 cx-page-slot，而其他 cx-page-slot 不受影响通过它。

.CartPageTemplate{
  margin: 0;
  display: flex;
  height: 100%;
  padding: map_get($spacers, 6) 0 0 0;
  max-width: none;

  .EmptyCartCenterContent {
    align-items: center;
  }
}

根据 Spartacus 中的页面插槽更改 PageTemplate 样式

Change PageTemplate style depending on the page slot in Spartacus

css

spartacus-storefront