umbraco-header-apps

Umbraco 标题栏应用

这是什么？

标题栏应用是单一用途的扩展，显示在 Umbraco 的顶部导航栏中，位于用户个人资料头像和全局搜索旁边。它们为 Backoffice 提供全局可访问的功能，例如文档、工具或自定义交互功能的快捷链接。标题栏应用可以是简单链接，也可以是打开模态框或执行操作的自定义交互组件。

文档

实现前始终获取最新文档：

• 主要文档：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/header-apps
• 基础：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 元素：实现交互式标题栏应用、说明 UmbHeaderAppButtonElement 或自定义元素时

  • 参考技能：umbraco-umbraco-element

• 上下文 API：从标题栏应用访问上下文、模态框、通知或服务时

  • 参考技能：umbraco-context-api

• 控制器：实现控制器、操作处理程序、点击处理程序或标题栏应用行为时

  • 参考技能：umbraco-controllers

工作流

1. 获取文档 - 对上述 URL 使用 WebFetch
2. 提出问题 - 它要实现什么功能？是简单链接还是交互功能？使用什么图标/标签？
3. 生成文件 - 根据最新文档创建清单 + 元素（如果是交互式）
4. 说明 - 展示创建了什么以及如何测试

最小示例

简单链接标题栏应用（umbraco-package.json）

{
  "type": "headerApp",
  "alias": "My.HeaderApp",
  "name": "My Header App",
  "kind": "button",
  "meta": {
    "label": "Documentation",
    "icon": "icon-help",
    "href": "https://docs.umbraco.com/"
  }
}

交互式标题栏应用清单（manifest.ts）

export const manifests = [
  {
    type: "headerApp",
    alias: "My.Interactive.HeaderApp",
    name: "My Interactive Header App",
    element: () => import('./header-app.element.js'),
    meta: {
      label: "Tools",
      icon: "icon-tools"
    }
  }
];

交互式标题栏应用元素（header-app.element.ts）

import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbHeaderAppButtonElement } from '@umbraco-cms/backoffice/header-app';

@customElement('my-header-app')
export class MyHeaderAppElement extends UmbHeaderAppButtonElement {

  #onClick() {
    // Handle click - open modal, navigate, etc.
    console.log('Header app clicked!');
  }

  render() {
    return html`
      <uui-button
        @click="${this.#onClick}"
        label="${this.manifest?.meta?.label}"
        compact
      >
        <uui-icon name="${this.manifest?.meta?.icon}"></uui-icon>
      </uui-button>
    `;
  }
}

export default MyHeaderAppElement;

常见用例

• 快捷链接：外部文档、帮助资源或管理工具
• 全局操作：搜索、通知或系统级操作
• 自定义工具：与外部服务集成或实现自定义功能

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