使用 Sitecore 占位符和 SXA 列拆分器组件时如何避免重复 divs.row？

Question

当结合使用 Sitecore 的 placeholder 和 SXA Column-splitter 时，多个 <div class="row"> added/rendered.这会在我们的布局中导致意外的边距和填充。

问题：

有没有办法避免这种情况？
这不是打算在 placeholder 中使用 Sitecore 的 Column-splitter 组件吗？
我可以在 Placeholder 上设置一些属性，让我不渲染它本身生成的 <div class="row"> 吗？

此外，我尝试更改 Sitecore 中的网格设置设置，但我发现的唯一选项是为整个网格以及所有占位符和 SXA 组件全局删除 <div class="row" 的生成。这不是我想要的。

这是我用来制作占位符的代码：

@Html.Sitecore().Placeholder("SomePlaceholder")

当我在其中添加 Sitecore 的 SXA Column-splitter 时，我得到了一个额外的 <div class="row">（如下面浏览器控制台的屏幕截图所示），这导致了问题.

我希望只有一个 <div class="row"> 具有由网格设置的继承边距和填充。（在我的例子中，Bootstrap 4 网格，在 Sitecore 的网格设置中为我们的 SXA 主题分配）

Answer 1

您可以通过指定要从生成行中排除的某些占位符来修补配置。

<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <experienceAccelerator>
      <grid>
        <placeholderWrapper>
            <excludedPlaceholders>
                <placeholder patch:after="body-bottom">utility-links</placeholder>
                <placeholder patch:after="utility-links">login-link</placeholder>
            </excludedPlaceholders>
        </placeholderWrapper>
      </grid>
    </experienceAccelerator>
  </sitecore>
</configuration>

例如在我们使用的视图中：

@Html.Sitecore().Placeholder("utility-links")

和

@Html.Sitecore().Placeholder("login-link")

我们不希望出现在新的一行中。

Answer 2

有几种方法可以消除浅表行。

正如 Jen 建议添加一个忽略的占位符以跳过在 Row Splitter 占位符上添加此包装。
为您的站点自定义 Row Splitter cshtml 视图，以避免在视图中呈现额外的包装器 documented here。

但首先要检查的是您的 SXA 版本。我相信这个问题只出现在 SXA 1.8 中（那时我们已经引入了 Bootstrap 4）并随后在 SXA 1.8.1 中得到修复。如果升级到 1.8.1 是一个选项，我绝对会建议。

使用 Sitecore 占位符和 SXA 列拆分器组件时如何避免重复 divs.row？

How to avoid duplicate divs.row when using Sitecore placeholders and the SXA Column splitter component?

sitecore

sitecore-sxa