umbraco-search-result-item

Umbraco 搜索结果项

它是什么？

搜索结果项是一个自定义组件，用于控制后台搜索结果中各个搜索结果的显示方式。它允许你为特定实体类型自定义搜索结果的视觉呈现方式，例如显示额外信息、自定义图标、徽章或其他视觉元素。

文档

实现前请务必获取最新文档：

• 扩展类型：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types
• 基础：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• 扩展注册表：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry

相关基础技能

• Umbraco Element：用于实现结果项元素
  • 参考技能：umbraco-umbraco-element

工作流

1. 获取文档 - 对上述 URL 使用 WebFetch
2. 提问 - 实体类型是什么？要显示哪些额外信息？
3. 生成文件 - 根据最新文档创建清单和元素
4. 说明 - 展示创建的内容以及如何测试

最简示例

清单（manifests.ts）

import type { ManifestSearchResultItem } from '@umbraco-cms/backoffice/extension-registry';

const manifest: ManifestSearchResultItem = {
  type: 'searchResultItem',
  alias: 'My.SearchResultItem',
  name: 'My Search Result Item',
  element: () => import('./my-search-result-item.element.js'),
  forEntityTypes: ['my-entity'],
};

export const manifests = [manifest];

元素实现（my-search-result-item.element.ts）

import { html, css, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbSearchResultItemModel } from '@umbraco-cms/backoffice/search';

@customElement('my-search-result-item')
export class MySearchResultItemElement extends UmbLitElement {
  @property({ type: Object })
  item?: UmbSearchResultItemModel;

  render() {
    if (!this.item) return html``;

    return html`
      <a href=${this.item.href} class="result-item">
        <umb-icon name=${this.item.icon ?? 'icon-document'}></umb-icon>
        <div class="content">
          <span class="name">${this.item.name}</span>
          <span class="type">${this.item.entityType}</span>
        </div>
      </a>
    `;
  }

  static styles = css`
    .result-item {
      display: flex;
      align-items: center;
      gap: var(--uui-size-space-3);
      padding: var(--uui-size-space-3);
      text-decoration: none;
      color: inherit;
    }

    .result-item:hover {
      background: var(--uui-color-surface-alt);
    }

    .content {
      display: flex;
      flex-direction: column;
    }

    .name {
      font-weight: 500;
    }

    .type {
      font-size: var(--uui-type-small-size);
      color: var(--uui-color-text-alt);
    }
  `;
}

export default MySearchResultItemElement;

declare global {
  interface HTMLElementTagNameMap {
    'my-search-result-item': MySearchResultItemElement;
  }
}

带扩展数据的结果项

// If your search provider returns extended data
interface MySearchResultModel extends UmbSearchResultItemModel {
  description?: string;
  status?: string;
  updatedDate?: string;
}

@customElement('my-search-result-item')
export class MySearchResultItemElement extends UmbLitElement {
  @property({ type: Object })
  item?: MySearchResultModel;

  render() {
    if (!this.item) return html``;

    return html`
      <a href=${this.item.href} class="result-item">
        <umb-icon name=${this.item.icon ?? 'icon-document'}></umb-icon>
        <div class="content">
          <span class="name">${this.item.name}</span>
          ${this.item.description
            ? html`<span class="description">${this.item.description}</span>`
            : ''}
          <div class="meta">
            ${this.item.status
              ? html`<uui-tag>${this.item.status}</uui-tag>`
              : ''}
            ${this.item.updatedDate
              ? html`<span class="date">${this.item.updatedDate}</span>`
              : ''}
          </div>
        </div>
      </a>
    `;
  }
}

支持多种实体类型的结果项

const manifest: ManifestSearchResultItem = {
  type: 'searchResultItem',
  alias: 'My.SearchResultItem.Custom',
  name: 'Custom Search Result Item',
  element: () => import('./custom-result-item.element.js'),
  forEntityTypes: ['my-entity-a', 'my-entity-b', 'my-entity-c'],
};

选择器搜索结果项

// For customizing results in picker search (content pickers, media pickers, etc.)
import type { ManifestPickerSearchResultItem } from '@umbraco-cms/backoffice/extension-registry';

const manifest: ManifestPickerSearchResultItem = {
  type: 'pickerSearchResultItem',
  alias: 'My.PickerSearchResultItem',
  name: 'My Picker Search Result',
  element: () => import('./my-picker-result.element.js'),
  forEntityTypes: ['my-entity'],
};

项目模型属性

属性	描述
entityType	实体类型标识符
unique	项目的唯一标识符
name	显示名称
icon	图标名称（可选）
href	点击时导航到的 URL

就是这样！请始终获取最新文档，保持示例简洁，并生成完整可运行的代码。