解决SharePoint Online现代搜索结果模板条目间多余空白间距问题

问题原因说明 #

1. ==$0标记含义 #

Chrome开发者工具中显示的==$0是内置的快捷变量标记，代表你当前在元素面板中选中的DOM节点，你可以直接在控制台输入$0对该节点进行调试操作，不属于页面本身的代码标记，无需额外处理。

2. 列表条目多余空白原因 #

你当前使用visibility: hidden隐藏元素，该CSS属性仅会将元素设为不可见，不会移除元素原本占据的文档流空间，你隐藏的作者、日期、摘要、标签等元素的原有高度全部保留，叠加后就形成了7-8行的多余空白。

修复方案 #

将你现有模板<content id="data-content">内的<style>标签内容替换为以下代码即可：

/* 原有的隐藏逻辑全部改为display:none，直接消除元素占位 */
.template--defaultList.template--promotedResults{
  display: none;
}
.placeholder--shimmer.placeholder--line{ 
  display: none;
}
.template--listItem--author,
.template--listItem--date,
.template--listItem--tags,
.template--listItem--contentContainer > div /* 隐藏摘要行 */
{ 
  display: none; 
}
.root-40{ 
  display: none; 
}
/* 调整列表条目间距，可根据需要修改margin-bottom的数值 */
.template--listItem {
  margin-bottom: 8px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.example-themePrimary a {
    color: {{@root.theme.palette.themePrimary}};
}

{{#unless @root.properties.layoutProperties.showItemThumbnail}}
.template--listItem--result {
    flex-basis: 100%!important;
}
{{/unless}}

同时将<content id="placeholder-content">下的<style>内代码替换为：

.root-40{ 
  display: none; 
}

内容的提问来源于stack exchange，提问作者Mark