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

流程

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

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

流程

1. 要配置动态插件菜单项，请将 < plugin_name> 插件的 menuItems 部分更新为 app-config.yaml 文件。例如：

   dynamicPlugins:
     frontend:
       _<plugin_name>_: 

   1

   
         menuItems:
           <menu_item_name>: 

   2

   
             icon: # home | group | category | extension | school | _<my_icon>_ 

   3

   
             title: _<plugin_page_title>_ 

   4

   
             priority: 10 

   5

   
             parent: favorites 

   6

   Copy to Clipboard Toggle word wrap

   1

   <plugin_name > : 输入插件名称。这个名称与 package.json 文件中的 scalprum.name 键相同。

   2

   <menu_item_name > : 在主侧边栏中为独立菜单项或父菜单项输入唯一名称。如果此字段指定了插件菜单项，则菜单项的名称必须与 dynamicRoutes 中对应路径中的名称匹配。例如，如果 dynamicRoutes 定义 path: /my-plugin，则 menu_item_name 必须定义为 my-plugin。

   3

   图标 ：（可选）输入图标名称。您可以使用以下图标中的任何一个：

   • 默认图标，如 家、组、flavor、extension 和 ations。要使用默认图标，请将图标设置为(" ")空字符串。
   • 一个自定义图标，其中 & lt;my_icon > 指定自定义图标的名称
   • 一个 SVG 图标，例如： icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill://[ffffff">…​</svg>
   • HTML 镜像，如： icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png

   4

   标题 ：（可选）输入菜单项标题。当标题已在 menuItem.text 下的 dynamicRoutes 配置中被指定时，省略它。要隐藏边栏中的标题，请将标题设置为(" ")空字符串。

   5

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

   6

   parent: （可选）输入当前项目嵌套的父菜单项。如果使用此字段，则必须在任何已启用插件的 menuItem 配置中定义 父菜单项。您可以为每个部分定义此字段。

   menuItems 配置示例

   dynamicPlugins:
     frontend:
       _<package_name>_:
         dynamicRoutes:
           - path: /my-plugin
             module: CustomModule
             importName: FooPluginPage
             menuItem:
               icon: fooIcon
               text: Foo Plugin Page
         menuItems:
           my-plugin: 

   1

   
             priority: 10 

   2

   
             parent: favorites 

   3

   
           favorites: 

   4

   
             icon: favorite 

   5

   
             title: Favorites 

   6

   
             priority: 100 

   7

   Copy to Clipboard Toggle word wrap

   1

   my-plugin ：匹配 dynamicRoutes 中的 path 字段的值。

   2

   优先级 ：控制父菜单项下的插件顺序。

   3

   parent: 将此插件嵌套在喜欢 的父 菜单项下。

   4

   Favorites: 配置父菜单项。

   5

   图标 ：显示 RHDH 系统图标中的 喜欢 图标。

   6

   标题 ：显示父菜单项的标题名称。

   7

   priority: 侧边栏中的 favourites 菜单项的顺序。

2. 要修改主菜单项或添加自定义菜单项，请在 app-config.yaml 文件中的 default.main-menu-items > menuItems 部分添加一个部分。使用 default. 前缀将键标识为主菜单项。

   dynamicPlugins:
     frontend:
       default.main-menu-items:
         menuItems:
           default._<menu_group_parent_item_name>_: 

   1

   
             icon: # home | group | category | extension | school | _<my_icon>_ 

   2

   
             title: _<menu_group_parent_title>_ 

   3

   
             priority: 10 

   4

   
           default._<menu_item_name>_: 

   5

   
             parent: _<menu_group_parent_item_name>_ 

   6

   
             icon:  # home | group | category | extension | school | _<my_icon>_ 

   7

   
             title: _<my_menu_title>_ 

   8

   
             to: _<path_to_the_menu_target_page>_ 

   9

   
             priority: 100 

   10

   Copy to Clipboard Toggle word wrap

   1

   default.<menu_group_parent_item_name > : （可选）输入菜单组父项来配置静态主菜单项。如果没有 默认值。<menu_item_name & gt; 设置了父 值，则不需要此字段。

   2

   图标 ：输入菜单图标。父菜单项是必需的。

   3

   title: 输入菜单组标题。父菜单项是必需的。

   4

   priority: （可选）在菜单级别输入此菜单项的顺序。

   5

   default. <menu_item_name > : 输入您要覆盖默认值的菜单项名称。添加 default. 前缀，以识别主菜单项。

   6

   parent: （可选）输入此项目的父菜单项。如果 <menu_item_name> 指定为任何菜单项的子级，则需要此项。

   7

   图标 ：（可选）输入菜单图标。要使用默认图标，请将图标设置为(" ")空字符串。

   8

   title: （可选）输入菜单组标题。只需要添加新的自定义主菜单项。要隐藏边栏中的默认主菜单项标题，请将标题设置为(" ")空字符串。

   9

   to: （可选）输入菜单项导航到的路径。如果没有设置，则默认为主页。

   10

   priority: （可选）在菜单级别输入此菜单项的顺序。

   mainItems 配置示例

   default.main-menu-items:
         menuItems:
           default.catalog:
             icon: category 

   1

   
             title: My Catalog
             priority: 5
           default.learning-path:
             title: '' 

   2

   
           default.parentlist: 

   3

   
             title: Overview
             icon: bookmarks
           default.home:
             parent: default.parentlist 

   4

   
           default.references:
             title: References 

   5

   
             icon: school 

   6

   
             to: /references 

   7

   Copy to Clipboard Toggle word wrap

   1

   icon: 指定是否要更改目录的图标默认菜单项。

   2

   title: 指定空字符串 " " 以从默认边栏隐藏学习路径。

   3

   default.parentlist ：显示父菜单项。

   4

   parent: 在 default.parentlist 父菜单项下，嵌套主页菜单。

   5

   title: 指定 default.references的名称

   6

   图标 ：显示 学区 图标。

   7

   要: 将 default.references 重定向到 /references 页面。