umbraco-menu

Umbraco メニュー

これは何ですか?

メニューは、サイドバーやボタンのフライアウトなど、Umbraco バックオフィスインターフェイス全体に表示される拡張コンポーネントです。これらは 1 つ以上のメニュー項目拡張のコンテナとして機能し、整理されたナビゲーションとアクションのグループ化を可能にします。メニュー項目は個別に設定され、既存のメニューまたはカスタムメニューに追加できます。

ドキュメント

実装する前に必ず最新のドキュメントを取得してください:

• メインドキュメント: 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. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
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" など)

以上です! 常に最新のドキュメントを取得し、例は最小限に保ち、完全に動作するコードを生成してください。