如何自定义PnP Modern Search人员悬停名片，隐藏指定信息

你目前使用person-card-include属性未达到预期效果，是因为该属性仅控制字段是否被加载，但组件默认模板仍会渲染部分默认内容。以下两种方法可以实现隐藏指定信息的需求：

方法一：通过CSS直接隐藏不需要的元素 #

找到对应元素的类名，添加自定义CSS规则隐藏：

/* 隐藏整个联系方式区域（包含邮箱、电话等） */
.mgt-person-card__contact {
  display: none !important;
}

/* 如果需要隐藏单个字段，比如邮箱 */
.mgt-person-card__email {
  display: none !important;
}

方法二：自定义person-card模板（完全控制显示内容） #

通过嵌套template标签，完全自定义悬停名片的结构，只保留你需要的信息：

<div class="example">
  <div style="margin-bottom:10px">Person Card Hover</div>

  <mgt-person
    person-query="me"
    view="twolines"
    person-card="hover">
    <!-- 自定义person-card模板 -->
    <template data-type="person-card">
      <mgt-person-card>
        <template data-type="default">
          <div class="mgt-person-card">
            <div class="mgt-person-card__header">
              <img class="mgt-person-card__avatar" src="{{person.avatar}}" alt="{{person.displayName}}" />
              <div class="mgt-person-card__details">
                <div class="mgt-person-card__name">{{person.displayName}}</div>
                <div class="mgt-person-card__title">{{person.jobTitle}}</div>
                <div class="mgt-person-card__department">{{person.department}}</div>
              </div>
            </div>
            <!-- 此处可添加需要的其他内容，不需要的部分直接删除 -->
          </div>
        </template>
      </mgt-person-card>
    </template>
  </mgt-person>
</div>

补充说明 #

person-card-include属性的作用是指定组件需要请求的用户字段，而非直接控制模板显示。如果默认模板包含了你不需要的内容，必须通过CSS隐藏或自定义模板来实现需求。

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