# Umbraco 搜索结果项 ## 这是什么？搜索结果项是一个自定义组件，用于控制各个搜索结果在后台搜索结果中的显示方式。它允许您自定义特定实体类型的搜索结果的视觉呈现 - 显示附加信息、自定义图标、徽章或任何其他视觉元素。 ## 文档在实施之前始终获取最新文档： * **扩展类型** : * **基础** ： * **扩展注册表**： ## 相关基础技能 * **Umbraco Element** ：用于实现结果项元素 * 参考技能：`umbraco-umbraco-element` ## 工作流程 1. **获取文档** \- 在上面的 URL 上使用 WebFetch 2. **提出问题** \- 什么实体类型？要显示哪些附加信息？ 3. **生成文件** \- 根据最新文档创建清单+元素 4. **解释** \- 显示创建的内容以及如何测试 ## 最小示例 ### 清单（manifests.ts）从'@umbraco-cms/backoffice/extension-registry'导入类型{ManifestSearchResultItem}； const 清单：ManifestSearchResultItem = { 类型：'搜索结果项'，别名： 'My.SearchResultItem', name: '我的搜索结果项', 元素：() => import('./my-search-result-item.element.js'), forEntityTypes: ['我的实体'], }; 导出常量清单 = [清单]; ### 元素实现 (my-search-result-item.element.ts) 从 '@umbraco-cms/backoffice/external/lit' 导入 { html, css, customElement, property }; 从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；从 '@umbraco-cms/backoffice/search' 导入类型 { UmbSearchResultItemModel }； @customElement('我的搜索结果项目') 导出类 MySearchResultItemElement 扩展 UmbLitElement { @property({ 类型：对象 }) 项目？：UmbSearchResultItemModel；渲染（）{ if (!this.item) 返回 html``; 返回 html`

${this.item.name} ${this.item.entityType}

`; } 静态样式= css` .结果项{ 显示：柔性；对齐项目：居中；间隙：var(--uui-size-space-3); 填充：var(--uui-size-space-3); 文本装饰：无；颜色：继承； } .结果项：悬停{ 背景：var(--uui-color-surface-alt); } .内容{ 显示：柔性；弹性方向：列； } .名称{ 字体粗细：500； } .type { 字体大小：var(--uui-type-small-size); 颜色：var(--uui-color-text-alt); } `; } 导出默认的 MySearchResultItemElement；声明全局{ 接口 HTMLElementTagNameMap { '我的搜索结果项目'：MySearchResultItemElement； } } ### 带有扩展数据的结果项 // 如果您的搜索提供程序返回扩展数据接口 MySearchResultModel 扩展 UmbSearchResultItemModel { 描述？：字符串；状态？：字符串；更新日期？：字符串； } @customElement('我的搜索结果项目') 导出类 MySearchResultItemElement 扩展 UmbLitElement { @property({ 类型：对象 }) 项目？：MySearchResultModel；渲染（）{ if (!this.item) 返回 html``; 返回 html`

${this.item.name} ${this.item.描述？ html`${this.item.description}` : ''} ${this.item.status ？ html`${this.item.status}` : ''} ${this.item.updatedDate ？ html`${this.item.updatedDate}` : ''}

`; } } ### 多个实体类型的结果项 const 清单：ManifestSearchResultItem = { 类型：'搜索结果项'，别名： 'My.SearchResultItem.Custom', name: '自定义搜索结果项', 元素：() => import('./custom-result-item.element.js'), forEntityTypes: ['我的实体-a', '我的实体-b', '我的实体-c'], }; ### 选择器搜索结果项 // 用于自定义选择器搜索结果（内容选择器、媒体选择器等）从'@umbraco-cms/backoffice/extension-registry'导入类型{ManifestPickerSearchResultItem}； const 清单：ManifestPickerSearchResultItem = { 类型：'pickerSearchResultItem'，别名： 'My.PickerSearchResultItem', name: '我的选择器搜索结果', 元素：() => import('./my-picker-result.element.js'), forEntityTypes: ['我的实体'], }; ## 项目模型属性物业 |描述 ---|--- `实体类型` |实体类型标识符 `独特` |项目的唯一标识符 `名称` |显示名称 `图标` |图标名称（可选） `href` |单击时要导航的 URL 就是这样！始终获取新文档，保持示例最少，生成完整的工作代码。

Umbraco 搜索结果项目

包含技能