Data-sly-list 正在添加白色 space，导致错误

Question

我遇到一个问题，由 data-sly-list 创建的无序列表添加了 DOM 或任何 class 中未表示的空格。如果我手动编写列表而不是让 data-sly-list 处理它，则不会添加空格。

 <div class="bullets">
    <ul class="columns unordered-list" id="stateList">
      <div data-sly-unwrap data-sly-list.slidesNode="${resource.listChildren}">
            <div data-sly-unwrap data-sly-list.states="${slidesNode.listChildren}">
              <li data-sly-test="${states.valueMap.flag}">
                <sly data-sly-use.htmlpaths="${'htmlpaths.js' @ thePath=states.valueMap.path}" data-sly-unwrap>
                    <a href="${htmlpaths.href}" target="_new" class="${states.valueMap.stateAbbr}">${states.valueMap.name} </a>
                </sly>                                 
                </li>
            </div>
        </div>
    </ul>
</div>

如果我像下面这样硬编码列表，则没有空格

  <div class="bullets">
    <ul class="columns unordered-list" id="stateList">
        <li><a href="www.google.com" target="_new" class="TX">Accessibility</a>                      
        </li>
        <li><a href="www.google.com" target="_new" class="TX">Accessibility</a>                       
        </li>
        <li><a href="www.google.com" target="_new" class="TX">Accessibility</a>                        
        </li>
        <li><a href="www.google.com" target="_new" class="TX">Accessibility</a>                        
        </li>
    </ul>
</div>

还有一个htmlpaths.js涉及：

"use strict";
use(function() {
    var path = this.thePath;
        var httpRegex = /http/;
    var hashRegex = /#/;
    if (path !== undefined && (httpRegex.test(path) === false && hashRegex.test(path) === false)){
        path = path + '.html';
    }
    return {
        href: path
    }
});

我看到的唯一区别是它运行通过 Sightly 迭代。有什么办法解决这个问题吗？除了列表之外，我还试图将它们分成具有以下 CSS

的列

  li {
     width:25%;
     float:left;
     display:inline;
  }

这在硬编码列表上工作得很好，但在 Sightly 迭代列表上它会产生各种奇怪的间距问题，这些问题会根据屏幕宽度而变化

DOM 中根本没有考虑这个空格。我不知道该怎么做。

更古怪：

如果margin top设置为-9或更高，它看起来像上面的截图。但如果它设置为 -10 或更低，它看起来像这样

它就像一个断点，它在那个像素变化上从一个极端转到另一个极端。否则没有变化。很奇怪。

Answer 1

解决方案

问题出在您的 HTL 模板的第 7 行：

<a href="${htmlpaths.href}" target="_new" class="${states.valueMap.stateAbbr}">${states.valueMap.name} </a>

您的标签内部 HTML 末尾有一个 space ;)

无关

关于您的 htmlpaths.js 脚本，您知道 AEM 中的变形金刚吗？您可以使用它们来实现全局 Link 重写器，它将在呈现页面时修复链接，就像您的脚本一样。你可以在这里看到一个例子：https://helpx.adobe.com/experience-manager/using/aem63_link_rewriter.html

如果您决定保留 htmlpaths.js，您可能需要对其进行审核，因为我担心它可能存在一些问题。当然，我不知道你的要求，所以这只是一个建议:)

Answer 2

使用 data-sly-unwrap 或 sly 标记仍会在生成的 HTML 中添加一个空行。尽管大多数浏览器会忽略这些空格，但在某些情况下它们可能会导致问题。如果您希望 HTL 输出看起来类似于您的硬编码 HTML，请尝试将 use 语句和锚标记放在一行中，如下所示。

<div class="bullets">
    <ul class="columns unordered-list" id="stateList" data-sly-list.slidesNode="${resource.listChildren}">
        <li data-sly-repeat.states="${slidesNode.listChildren}" data-sly-test="${states.valueMap.flag}"><sly data-sly-use.htmlpaths="${'htmlpaths.js' @ thePath=states.valueMap.path}"><a href="${htmlpaths.href}" target="_new" class="${states.valueMap.stateAbbr}">${states.valueMap.name} </a></sly></li>
    </ul>
</div>

还有一些小技巧

sly 标签不需要 data-sly-unwrap。它是自动的在生成的 HTML.
data-sly-list 可以添加到父 ul 标签本身，而不是引入额外的 div 标签然后展开它。
尽可能使用 data-sly-repeat 而不是 data-sly-list。我能够将我们其中一个复杂页面生成的 HTML 从 20k 行减少到 12k 行，因为 data-sly-repeat 没有引入额外的空格。

Answer 3

看起来有点奇怪，当你的 HTML 代码中有一些额外的空格时，它会在 HTML.

中显示额外的空格

尝试将HTML中的空格全部去掉，如下图，试试

 <div class="bullets"><ul class="columns unordered-list" id="stateList"><sly data-sly-list.slidesNode="${resource.listChildren}"><sly data-sly-list.states="${slidesNode.listChildren}"><li><a href="${htmlpaths.href}" target="_new" class="${states.valueMap.stateAbbr}">${states.valueMap.name}</a></li></sly></sly></ul></div>

您可以在 IDE 中使用 HTML 格式化程序或像下面这样的在线工具来格式化 HTML 以获得可读格式 https://www.freeformatter.com/html-formatter.html.

<div class="bullets">
    <ul class="columns unordered-list" id="stateList">
    <sly data-sly-list.slidesNode="${resource.listChildren}">
      <sly data-sly-list.states="${slidesNode.listChildren}">
         <li><a href="${htmlpaths.href}" target="_new" class="${states.valueMap.stateAbbr}">${states.valueMap.name}</a></li>
      </sly>
    </sly>
    </ul>
</div>

这应该会去掉 HTML 中的多余空格。

此外，最好在需要某些条件检查的地方使用 sightly 标签，或者直接将它们嵌入实际的 div 标签或 html 标签中，而不是使用 data-sly-unwrap。

您也可以使用sling模型获取所需的数据并在后端检查所有条件（包括附加html）并发送数据只是为了显示并避开所有条件。

Data-sly-list 正在添加白色 space，导致错误

Data-sly-list is adding white space, causing bugginess

css

aem

解决方案

无关