10.3. 关于 Developer Hub 实例的侧边栏菜单项
Red Hat Developer Hub 中的侧边栏菜单由您可以配置的两个主要部分组成:
- 动态插件菜单项
- 您的首选项和您的活跃插件会动态定义侧边栏菜单的一部分。
- 主菜单项
侧边栏的核心导航结构是 static。
- 动态插件菜单项 :这些项目显示在主菜单下,并可以根据安装的插件进行自定义。主菜单项部分是动态的,可以根据您的首选项和已安装的插件进行更改。
10.3.1. 为 Developer Hub 实例自定义侧边栏菜单项 复制链接链接已复制到粘贴板!
使用以下步骤自定义主菜单项:
流程
打开
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
enabled: true
default.my-group:
title: My Group
icon: group
priority: 90
enabled: true
default.catalog:
title: Catalog
icon: category
to: catalog
priority: 80
enabled: true
default.apis:
title: APIs
icon: extension
to: api-docs
priority: 70
enabled: true
default.learning-path:
title: Learning Paths
icon: school,
to: learning-paths
priority: 60
enabled: true
default.create:
title: Self-service
icon: add
to: create
priority: 50
enabled: true
dynamicPlugins:
frontend:
default.main-menu-items:
menuItems:
default.home:
title: Home
icon: home
priority: 100
enabled: true
default.my-group:
title: My Group
icon: group
priority: 90
enabled: true
default.catalog:
title: Catalog
icon: category
to: catalog
priority: 80
enabled: true
default.apis:
title: APIs
icon: extension
to: api-docs
priority: 70
enabled: true
default.learning-path:
title: Learning Paths
icon: school,
to: learning-paths
priority: 60
enabled: true
default.create:
title: Self-service
icon: add
to: create
priority: 50
enabled: true
10.3.2. 在 RHDH 中启用侧边菜单项目本地化 复制链接链接已复制到粘贴板!
您可以添加用于侧边栏菜单项的翻译键支持,以便用户可以使用首选语言载入它。在 Developer Hub 中,所有现有和新创建的侧边栏菜单项都支持使用 titleKey translation 键进行本地化。
如果存在翻译键,但缺少相应的本地化字符串,系统将默认使用侧边栏菜单项配置中定义的原始文本(标题)。如果没有定义翻译密钥,则会显示原始文本。
先决条件
- 您已在 RHDH 应用程序中启用本地化。
流程
对于配置文件中的侧边栏菜单项,您必须同时定义原始文本和新的本地化键。例如,在
app-config.yaml文件的dynamicPlugins.frontend.default.main-menu-items.menuItems.default.favorites部分中,添加titleKey,如下所示:app-config.yaml片段示例dynamicPlugins: frontend: default.main-menu-items: menuItems: default.favorites: title: Favorites titleKey: menuItem.favorites icon: favorite priority: 100 enabled: truedynamicPlugins: frontend: default.main-menu-items: menuItems: default.favorites: title: Favorites titleKey: menuItem.favorites icon: favorite priority: 100 enabled: trueCopy to Clipboard Copied! Toggle word wrap Toggle overflow 在转换文件中,将第一步中的
titleKey映射到每个受支持语言的本地化字符串。allTranslations.json片段示例{ "rhdh": { "en": { "menuItem.favorites": "Favorites" }, "fr": { "menuItem.favorites": "Favoris" } } }{ "rhdh": { "en": { "menuItem.favorites": "Favorites" }, "fr": { "menuItem.favorites": "Favoris" } } }Copy to Clipboard Copied! Toggle word wrap Toggle overflow
10.3.3. 为 Developer Hub 实例配置动态插件菜单项 复制链接链接已复制到粘贴板!
使用以下步骤配置动态插件菜单项:
流程
在
app-config.yaml文件中,更新 < plugin_name> 插件的menuItems部分。例如:dynamicPlugins: frontend: _<plugin_name>_: menuItems: <menu_item_name>: icon: # home | group | category | extension | school | _<my_icon>_ title: _<plugin_page_title>_ priority: 10 parent: favorites enabled: truedynamicPlugins: frontend: _<plugin_name>_: menuItems: <menu_item_name>: icon: # home | group | category | extension | school | _<my_icon>_ title: _<plugin_page_title>_ priority: 10 parent: favorites enabled: trueCopy to Clipboard Copied! Toggle word wrap Toggle overflow <plugin_name>-
输入插件名称。这个名称与
package.json文件中的scalprum.name键相同。 <menu_item_name>-
在主边栏导航中输入唯一名称,可以是单机菜单项或父菜单项。如果此字段指定了插件菜单项,则菜单项的名称必须与
dynamicRoutes中对应路径中的名称匹配。例如,如果dynamicRoutes定义path: /my-plugin,则menu_item_name必须定义为my-plugin。 icon(可选)输入图标名称。您可以使用以下图标中的任何一个:
-
默认图标,如
家、组、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
-
默认图标,如
title-
(可选)输入菜单项标题。当标题已在
menuItem.text下的dynamicRoutes配置中被指定时,省略它。要隐藏边栏中的标题,请将标题设置为(" ")空字符串。 priority- (可选)输入整数值来设置菜单项出现在侧边栏中的顺序。
父-
(可选)输入当前项目嵌套的父菜单项。如果使用此字段,则必须在任何已启用插件的
menuItem 配置中定义父菜单项。您可以为每个部分定义此字段。 enabled-
(可选)输入
false来隐藏侧边栏中的菜单项。输入true以显示边栏中的菜单项。
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: priority: 10 parent: favorites favorites: icon: favorite title: Favorites priority: 100Copy to Clipboard Copied! Toggle word wrap Toggle overflow my-plugin-
在
dynamicRoutes中输入path字段的值。 priority- 输入整数值来设置插件出现在父菜单项中的顺序。
父-
输入父菜单项 id 以嵌套此插件,如
favorites。 favorites- 父菜单项的配置。
title- 显示父菜单项的标题名称。
10.3.4. 为 Developer Hub 实例修改或添加自定义菜单项 复制链接链接已复制到粘贴板!
使用以下命令修改主菜单项或添加自定义菜单项:
流程
在
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: 100 enabled: truedynamicPlugins: 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: 100 enabled: trueCopy to Clipboard Copied! Toggle word wrap Toggle overflow default.<menu_group_parent_item_name>-
(可选)输入菜单组父项来配置静态主菜单项。如果没有
默认值。<menu_item_name> 设置了父值,则不需要此字段。 icon- 输入菜单图标。父菜单项是必需的。
title- 输入菜单组标题。父菜单项是必需的。
priority- (可选)在菜单级别输入此菜单项的顺序。
default.<menu_item_name>-
输入您要覆盖默认值的菜单项名称。添加
default.前缀,以识别主菜单项。 父- (可选)输入此项目的父菜单项。如果 <menu_item_name> 指定为任何菜单项的子级,则需要此项。
icon-
(可选)输入菜单图标。要使用默认图标,请将图标设置为(
" ")空字符串。 title-
(可选)输入菜单组标题。只需要添加新的自定义主菜单项。要隐藏边栏中的默认主菜单项标题,请将标题设置为(
" ")空字符串。 至- (可选)输入菜单项导航到的路径。如果没有设置,则默认为主页。
priority- (可选)在菜单级别输入此菜单项的顺序。
enabled-
(可选)如果使用此字段在侧边栏中显示菜单项,请将值设为
true。要在边栏中隐藏菜单项,请将值设为false。
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: /references enabled: truedefault.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: /references enabled: trueCopy to Clipboard Copied! Toggle word wrap Toggle overflow icon-
(可选)输入图标名称,如
category, bookmarks',appropriatelyetc. to change the default 图标。 title-
输入空字符串
''从默认边栏隐藏学习路径。 default.parentlist- 输入父菜单项。
父-
输入要嵌套菜单条目的父菜单,如
default.parentlist。 title-
输入菜单条目名称,如
My Catalog、Overview或References。 至-
输入要重定向到的页面。例如,
default.references会重定向到/references页面。 enabled-
(可选)输入
true以在侧边栏中显示菜单项。输入false以隐藏边栏中的菜单项。