This documentation is for a release that is no longer maintained
See documentation for the latest supported version.8.3. 为 Developer Hub 实例自定义侧边栏菜单项
Red Hat Developer Hub 中的侧边栏菜单由您可以配置的两个主要部分组成:
- 动态插件菜单项
- 您的首选项和您的活跃插件会动态定义侧边栏菜单的一部分。
- 主菜单项
侧边栏的核心导航结构是 static。
- 动态插件菜单项 :这些项目显示在主菜单下,并可以根据安装的插件进行自定义。主菜单项部分是动态的,可以根据您的首选项和已安装的插件进行更改。
流程
使用以下步骤自定义主菜单项:
-
打开
app-config.yaml文件。 -
要自定义主菜单项的顺序和父子关系,请使用
dynamicPlugins.frontend.default.main-menu-items.menuItems字段。 -
对于动态插件菜单项,请使用
dynamicPlugins.frontend.<package_name>.menuItems字段。
-
打开
app-config.yaml 文件示例
dynamicPlugins:
frontend:
default.main-menu-items:
menuItems:
default.home:
title: Home
icon: home
priority: 100
default.my-group:
title: My Group
icon: group
priority: 90
default.catalog:
title: Catalog
icon: category
to: catalog
priority: 80
default.apis:
title: APIs
icon: extension
to: api-docs
priority: 70
default.learning-path:
title: Learning Paths
icon: school,
to: learning-paths
priority: 60
default.create:
title: Create
icon: add
to: create
priority: 50
dynamicPlugins:
frontend:
default.main-menu-items:
menuItems:
default.home:
title: Home
icon: home
priority: 100
default.my-group:
title: My Group
icon: group
priority: 90
default.catalog:
title: Catalog
icon: category
to: catalog
priority: 80
default.apis:
title: APIs
icon: extension
to: api-docs
priority: 70
default.learning-path:
title: Learning Paths
icon: school,
to: learning-paths
priority: 60
default.create:
title: Create
icon: add
to: create
priority: 50
流程
要配置动态插件菜单项,请将 < plugin_name> 插件的
menuItems部分更新为app-config.yaml文件。例如:dynamicPlugins: frontend: _<plugin_name>_: menuItems: <menu_item_name>: icon: # home | group | category | extension | school | _<my_icon>_ title: _<plugin_page_title>_ priority: 10 parent: favoritesdynamicPlugins: frontend: _<plugin_name>_:1 menuItems: <menu_item_name>:2 icon: # home | group | category | extension | school | _<my_icon>_3 title: _<plugin_page_title>_4 priority: 105 parent: favorites6 Copy to Clipboard Copied! Toggle word wrap Toggle overflow - 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: priority: 10 parent: favorites favorites: icon: favorite title: Favorites priority: 100dynamicPlugins: frontend: _<package_name>_: dynamicRoutes: - path: /my-plugin module: CustomModule importName: FooPluginPage menuItem: icon: fooIcon text: Foo Plugin Page menuItems: my-plugin:1 priority: 102 parent: favorites3 favorites:4 icon: favorite5 title: Favorites6 priority: 1007 Copy to Clipboard Copied! Toggle word wrap Toggle overflow 要修改主菜单项或添加自定义菜单项,请在
app-config.yaml文件中的default.main-menu-items>menuItems部分添加一个部分。使用default.前缀将键标识为主菜单项。dynamicPlugins: frontend: default.main-menu-items: menuItems: default._<menu_group_parent_item_name>_: icon: # home | group | category | extension | school | _<my_icon>_ title: _<menu_group_parent_title>_ priority: 10 default._<menu_item_name>_: parent: _<menu_group_parent_item_name>_ icon: # home | group | category | extension | school | _<my_icon>_ title: _<my_menu_title>_ to: _<path_to_the_menu_target_page>_ priority: 100dynamicPlugins: 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: 104 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: 10010 Copy to Clipboard Copied! Toggle word wrap Toggle overflow - 1
default.<menu_group_parent_item_name> : (可选)输入菜单组父项来配置静态主菜单项。如果没有默认值。<menu_item_name> 设置了父值,则不需要此字段。- 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 title: My Catalog priority: 5 default.learning-path: title: '' default.parentlist: title: Overview icon: bookmarks default.home: parent: default.parentlist default.references: title: References icon: school to: /referencesdefault.main-menu-items: menuItems: default.catalog: icon: category1 title: My Catalog priority: 5 default.learning-path: title: ''2 default.parentlist:3 title: Overview icon: bookmarks default.home: parent: default.parentlist4 default.references: title: References5 icon: school6 to: /references7 Copy to Clipboard Copied! Toggle word wrap Toggle overflow