umbraco-search-provider by umbraco/umbraco-cms-backoffice-skills
npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-search-provider搜索提供程序将自定义搜索功能集成到 Umbraco 后台管理界面的搜索栏中。它使用户能够在内置内容、媒体和成员之外,搜索自定义数据源。该提供程序实现了一个 search 方法,该方法返回与用户查询匹配的分页结果。
在实现之前,请始终获取最新文档:
仓储模式 : 用于搜索提供程序中的数据访问
umbraco-repository-pattern上下文 API : 用于在提供程序内访问上下文
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
umbraco-context-apiimport type { ManifestSearchProvider } from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestSearchProvider = {
type: 'searchProvider',
alias: 'My.SearchProvider',
name: 'My Search Provider',
api: () => import('./my-search-provider.js'),
meta: {
label: 'My Items',
},
};
export const manifests = [manifest];
import type { UmbSearchProvider, UmbSearchResultItemModel, UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
export class MySearchProvider extends UmbControllerBase implements UmbSearchProvider {
constructor(host: UmbControllerHost) {
super(host);
}
async search(args: UmbSearchRequestArgs) {
const { query } = args;
// 从您的数据源获取结果
const results = await this.#fetchResults(query);
return {
data: {
items: results,
total: results.length,
},
};
}
async #fetchResults(query: string): Promise<UmbSearchResultItemModel[]> {
// 您的搜索逻辑在此处 - API 调用、本地过滤等
const response = await fetch(`/api/my-items/search?q=${encodeURIComponent(query)}`);
const data = await response.json();
return data.items.map((item: any) => ({
entityType: 'my-entity',
unique: item.id,
name: item.name,
icon: 'icon-document',
href: `/section/my-section/workspace/my-workspace/edit/${item.id}`,
}));
}
}
export default MySearchProvider;
// 每个结果必须符合 UmbSearchResultItemModel 接口
interface UmbSearchResultItemModel {
entityType: string; // 实体类型标识符
unique: string; // 唯一 ID
name: string; // 显示名称
icon?: string | null; // 要显示的图标
href: string; // 点击后导航的 URL
}
import type { UmbSearchProvider, UmbSearchResultItemModel, UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import { MyRepository } from './my-repository.js';
export class MySearchProvider extends UmbControllerBase implements UmbSearchProvider {
#repository: MyRepository;
constructor(host: UmbControllerHost) {
super(host);
this.#repository = new MyRepository(this);
}
async search(args: UmbSearchRequestArgs) {
const { data } = await this.#repository.search(args.query);
const items: UmbSearchResultItemModel[] = data?.items.map((item) => ({
entityType: 'my-entity',
unique: item.id,
name: item.name,
icon: item.icon ?? 'icon-document',
href: `/section/my-section/workspace/my-workspace/edit/${item.id}`,
})) ?? [];
return {
data: {
items,
total: data?.total ?? 0,
},
};
}
}
export default MySearchProvider;
async search(args: UmbSearchRequestArgs) {
const { query, searchFrom } = args;
// searchFrom 包含要从中搜索的实体(如果指定了的话)
const parentId = searchFrom?.unique;
const results = await this.#fetchResults(query, parentId);
return {
data: {
items: results,
total: results.length,
},
};
}
| 属性 | 描述 |
|---|---|
query | 用户输入的搜索词 |
searchFrom | 可选的搜索起始实体(用于范围搜索) |
就是这样!请始终获取最新文档,保持示例简洁,生成完整可用的代码。
每周安装量
68
代码仓库
GitHub 星标数
14
首次出现
2026年2月4日
安全审计
安装于
github-copilot49
cursor22
opencode20
codex20
gemini-cli18
amp18
A Search Provider integrates custom search functionality into Umbraco's backoffice search bar. It enables users to search custom data sources alongside built-in content, media, and members. The provider implements a search method that returns paginated results matching the user's query.
Always fetch the latest docs before implementing:
Repository Pattern : For data access in search providers
umbraco-repository-patternContext API : For accessing contexts within the provider
umbraco-context-apiimport type { ManifestSearchProvider } from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestSearchProvider = {
type: 'searchProvider',
alias: 'My.SearchProvider',
name: 'My Search Provider',
api: () => import('./my-search-provider.js'),
meta: {
label: 'My Items',
},
};
export const manifests = [manifest];
import type { UmbSearchProvider, UmbSearchResultItemModel, UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
export class MySearchProvider extends UmbControllerBase implements UmbSearchProvider {
constructor(host: UmbControllerHost) {
super(host);
}
async search(args: UmbSearchRequestArgs) {
const { query } = args;
// Fetch results from your data source
const results = await this.#fetchResults(query);
return {
data: {
items: results,
total: results.length,
},
};
}
async #fetchResults(query: string): Promise<UmbSearchResultItemModel[]> {
// Your search logic here - API call, local filtering, etc.
const response = await fetch(`/api/my-items/search?q=${encodeURIComponent(query)}`);
const data = await response.json();
return data.items.map((item: any) => ({
entityType: 'my-entity',
unique: item.id,
name: item.name,
icon: 'icon-document',
href: `/section/my-section/workspace/my-workspace/edit/${item.id}`,
}));
}
}
export default MySearchProvider;
// Each result must conform to UmbSearchResultItemModel
interface UmbSearchResultItemModel {
entityType: string; // Entity type identifier
unique: string; // Unique ID
name: string; // Display name
icon?: string | null; // Icon to display
href: string; // URL to navigate when clicked
}
import type { UmbSearchProvider, UmbSearchResultItemModel, UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import { MyRepository } from './my-repository.js';
export class MySearchProvider extends UmbControllerBase implements UmbSearchProvider {
#repository: MyRepository;
constructor(host: UmbControllerHost) {
super(host);
this.#repository = new MyRepository(this);
}
async search(args: UmbSearchRequestArgs) {
const { data } = await this.#repository.search(args.query);
const items: UmbSearchResultItemModel[] = data?.items.map((item) => ({
entityType: 'my-entity',
unique: item.id,
name: item.name,
icon: item.icon ?? 'icon-document',
href: `/section/my-section/workspace/my-workspace/edit/${item.id}`,
})) ?? [];
return {
data: {
items,
total: data?.total ?? 0,
},
};
}
}
export default MySearchProvider;
async search(args: UmbSearchRequestArgs) {
const { query, searchFrom } = args;
// searchFrom contains the entity to search from (if specified)
const parentId = searchFrom?.unique;
const results = await this.#fetchResults(query, parentId);
return {
data: {
items: results,
total: results.length,
},
};
}
| Property | Description |
|---|---|
query | The search term entered by user |
searchFrom | Optional entity to search from (for scoped searches) |
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
Weekly Installs
68
Repository
GitHub Stars
14
First Seen
Feb 4, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot49
cursor22
opencode20
codex20
gemini-cli18
amp18
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
122,000 周安装