8.3. 为 Developer Hub 实例自定义侧边栏菜单项

流程

1. 使用以下步骤自定义主菜单项：

   1. 打开 app-config-rhdh.yaml 文件。
   2. 要自定义主菜单项的顺序和父子关系，请使用 dynamicPlugins.frontend.default.main-menu-items.menuItems 字段。
   3. 对于动态插件菜单项，请使用 dynamicPlugins.frontend.<package_name>.menuItems 字段。

   app-config-rhdh.yaml 文件示例

   dynamicPlugins:
     frontend:
       <package_name>: # same as `scalprum.name` key in plugin's `package.json`
         menuItems: # optional, allows you to configure plugin menu items in the main sidebar navigation
           <menu_item_name>: # unique name in the plugin menu items list 1
             icon: home | group | category | extension | school | _<your_icon>_  2
             title: My Plugin Page # optional, same as `menuItem.text` in `dynamicRoutes` 3
             priority: 10 # optional, defines the order of menu items in the sidebar 4
             parent: favorites # optional, defines parent-child relationships for nested menu items 5

   您可以修改上例中的字段，以配置侧边栏菜单项所需的订购和父子关系。

   1

   此属性代表主边栏导航中的唯一名称。它可以表示独立菜单项或父菜单项。如果此属性代表插件菜单项，则属性的名称必须与 dynamicRoutes 中的对应路径匹配。例如，如果 dynamicRoutes 定义 path: /my-plugin，则 menu_item_name 必须定义为 my-plugin。

   对于更复杂的多网段路径，如 path: /metrics/users/info，menu_item_name 必须使用点标记来代表完整路径，如 metrics.users.info。路径中的尾随和前导斜杠将被忽略。例如，path: /docs results in menu_item_name: docs, and path: /metrics/users 结果为 menu_item_name: metrics.users。

   2

   此可选属性指定菜单项的图标。您可以使用默认图标或使用动态插件扩展图标。Developer Hub 还在其内部库中提供额外的图标，例如：

   内部库中的主页图标

   dynamicPlugins:
     frontend:
       <package_name>:
         menuItems:
           <menu_item_name>:
             icon: home

   类似地，内部库包含 组、类别、扩展和 学会 的图标。如果图标已在 menuItem.icon 的 dynamicRoutes 配置中定义，则可以从 menuItems 配置中删除。另外，支持 SVG 和 HTML 镜像图标。例如：

   SVG 图标示例

   icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">...</svg>

   镜像图标示例

   icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png

   3

   此可选属性指定菜单项的标题。如果标题已在 menuItem.text 下的 dynamicRoutes 配置中指定了，可以被删除。

   4

   此可选属性设置菜单项在侧边栏中显示的顺序。默认优先级是 0，它将项目放在列表的底部。较高的优先级值会将项目更高的位置放在边栏中。您可以为每个部分定义此属性。

   5

   此可选属性指定当前项目嵌套在下的父菜单项。如果使用此属性，则必须在任何已启用插件的 menuItem 配置中定义 父菜单项。您可以为每个部分定义此属性。

   menuItems 配置示例

   dynamicPlugins:
     frontend:
       <package_name>:
         dynamicRoutes:
           - path: /my-plugin
             module: CustomModule
             importName: FooPluginPage
             menuItem:
               icon: fooIcon
               text: Foo Plugin Page
         menuItems:
           my-plugin: # matches `path` in `dynamicRoutes`
             priority: 10 # controls order of plugins under the parent menu item
             parent: favorites # nests this plugin under the `favorites` parent menu item
           favorites: # configuration for the parent menu item
             icon: favorite # icon from RHDH system icons
             title: Favorites # title for the parent menu item
             priority: 100 # controls the order of this top-level menu item

2. 要确保菜单项被识别为主菜单项，您必须在其键中添加 default. 前缀。例如：

   侧边栏中导航中主菜单项配置示例

   dynamicPlugins:
     frontend:
       default.main-menu-items: # key for configuring static main menu items
         menuItems:
           default.<menu_item_name>: # key of the menu item configuration. `default.` prefix is required for a main menu item key 1
             parent: my_menu_group # optional, specifies the parent menu item for this item
             priority: 10 # optional, specifies the order of this menu item within its menu level
           default.<menu_group_parent_item_name>: # must be configured if it is specified as the parent of any menu items. `default.` prefix is required for a main group parent item key 2
             icon: my_menu_group_icon # required for parent menu items, defines the icon for the menu group
             title: my_menu_group_title # required for parent menu items, defines the icon for the menu group
             priority: 100 # optional, specifies the order of the parent menu item in the sidebar

   1 2

   default. 前缀标识项目作为主菜单项。您可以在单独的菜单项或父菜单组配置中添加 default. 前缀，如上例中的 default.<menu_group_parent_item_name >。

   注意

   主菜单项的默认优先级决定了它们在边栏中的顺序。您可以通过调整其优先级值来自定义静态主菜单项的顺序。确保每个项目的优先级和标题很明确，以方便轻松重新排序。