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

Question

将Sitecore的占位符与 SXA列分隔符结合使用时，会添加/呈现多个<div class="row">。这会在我们的布局中导致意外的边距和填充。

问题：

• 有办法避免这种情况吗？
• 是否不打算在占位符内使用Sitecore的列分隔符组件？
• 是否可以在占位符上设置一些属性，这些属性将使我不呈现其本身生成的<div class="row">？

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

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

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

当我在其中添加Sitecore的SXA 列分隔符时，我得到了一个额外的<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

有一些方法可以消除表层的行。

1. Jen建议添加一个忽略的占位符，以跳过在Row Splitter占位符上添加此包装器的操作。
2. 为您的网站自定义Row Splitter cshtml视图，以避免在视图中以documented here的形式呈现其他包装。

但是首先要检查的是您的SXA版本。我相信这个问题仅在SXA 1.8中存在（此时我们引入了Bootstrap 4），随后在SXA 1.8.1中得以解决。如果可以选择升级到1.8.1，我绝对会建议这样做。