umbraco-menu

Umbraco 菜单

这是什么？

菜单是扩展组件，会显示在 Umbraco 后台界面的各处，包括侧边栏和按钮弹出菜单中。它们可作为一个或多个菜单项扩展的容器，用于整理导航和操作分组。菜单项需单独配置，可添加到现有菜单或自定义菜单中。

文档

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

• 主要文档：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/menu
• 菜单项：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/menu-item
• 教程：https://docs.umbraco.com/umbraco-cms/extend-your-project/tutorials/extending-the-help-menu
• 基础知识：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

工作流

1. 获取文档 - 使用 WebFetch 获取上述 URL 的内容
2. 提问 - 要新建菜单还是扩展现有菜单？需要哪些菜单项？菜单显示在哪里？
3. 生成文件 - 根据最新文档创建菜单及菜单项的清单文件
4. 说明 - 展示创建的内容以及测试方法

最小示例

自定义菜单（umbraco-package.json）

{
  "type": "menu",
  "alias": "My.Menu",
  "name": "My Menu"
}

自定义菜单的菜单项（manifest.ts）

export const manifests = [
  {
    type: "menuItem",
    kind: "link",
    alias: "My.MenuItem",
    name: "My Menu Item",
    weight: 100,
    meta: {
      menus: ["My.Menu"],
      label: "My Item",
      icon: "icon-document",
      href: "/my-link"
    }
  }
];

扩展现有菜单（帮助菜单示例）

{
  "type": "menuItem",
  "kind": "link",
  "alias": "My.MenuItem.Help",
  "name": "Custom Help Item",
  "weight": 300,
  "meta": {
    "menus": ["Umb.Menu.Help"],
    "label": "My Documentation",
    "icon": "icon-help",
    "href": "https://my-docs.com"
  }
}

TypeScript 导入（帮助菜单）

import { UMB_HELP_MENU_ALIAS } from "@umbraco-cms/backoffice/help";

const manifest = {
  type: "menuItem",
  kind: "link",
  alias: "My.MenuItem.Help",
  name: "My Help Item",
  meta: {
    menus: [UMB_HELP_MENU_ALIAS],
    label: "Documentation",
    icon: "icon-book"
  }
};

常见内置菜单

• Umb.Menu.Help - 页眉中的帮助菜单
• Umb.Menu.Content - 内容区菜单
• Umb.Menu.Media - 媒体区菜单
• Umb.Menu.Settings - 设置区菜单

关键属性

• type：菜单容器使用 "menu"，菜单项使用 "menuItem"
• alias：唯一标识符
• menus：此菜单项应显示于其中的菜单别名数组
• weight：控制排序（数值越大，在列表中的位置越靠后）
• kind：菜单项类型（"link"、"default" 等）

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