10.3. 关于 Developer Hub 实例的侧边栏菜单项


Red Hat Developer Hub 中的侧边栏菜单由您可以配置的两个主要部分组成:

动态插件菜单项
您的首选项和您的活跃插件会动态定义侧边栏菜单的一部分。
主菜单项

侧边栏的核心导航结构是 static。

  • 动态插件菜单项 :这些项目显示在主菜单下,并可以根据安装的插件进行自定义。主菜单项部分是动态的,可以根据您的首选项和已安装的插件进行更改。

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

使用以下步骤自定义主菜单项:

流程

  1. 打开 app-config.yaml 文件。

    1. 要自定义主菜单项的顺序和父子关系,请使用 dynamicPlugins.frontend.default.main-menu-items.menuItems 字段。
    2. 对于动态插件菜单项,请使用 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
Copy to Clipboard Toggle word wrap

10.3.2. 在 RHDH 中启用侧边菜单项目本地化

您可以添加用于侧边栏菜单项的翻译键支持,以便用户可以使用首选语言载入它。在 Developer Hub 中,所有现有和新创建的侧边栏菜单项都支持使用 titleKey translation 键进行本地化。

注意

如果存在翻译键,但缺少相应的本地化字符串,系统将默认使用侧边栏菜单项配置中定义的原始文本(标题)。如果没有定义翻译密钥,则会显示原始文本。

先决条件

  • 您已在 RHDH 应用程序中启用本地化。

流程

  1. 对于配置文件中的侧边栏菜单项,您必须同时定义原始文本和新的本地化键。例如,在 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: true
    Copy to Clipboard Toggle word wrap

  2. 在转换文件中,将第一步中的 titleKey 映射到每个受支持语言的本地化字符串。

    allTranslations.json 片段示例

    {
      "rhdh": {
        "en": {
          "menuItem.favorites": "Favorites"
        },
        "fr": {
          "menuItem.favorites": "Favoris"
        }
      }
    }
    Copy to Clipboard Toggle word wrap

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: true
    Copy to Clipboard Toggle word wrap
    <plugin_name>
    输入插件名称。这个名称与 package.json 文件中的 scalprum.name 键相同。
    <menu_item_name>
    在主边栏导航中输入唯一名称,可以是单机菜单项或父菜单项。如果此字段指定了插件菜单项,则菜单项的名称必须与 dynamicRoutes 中对应路径中的名称匹配。例如,如果 dynamicRoutes 定义 path: /my-plugin,则 menu_item_name 必须定义为 my-plugin
    icon

    (可选)输入图标名称。您可以使用以下图标中的任何一个:

    • 默认图标,如 flavorextensionations。要使用默认图标,请将图标设置为(" ")空字符串。
    • 一个自定义图标,其中 & 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: 100
    Copy to Clipboard Toggle word wrap
    my-plugin
    dynamicRoutes 中输入 path 字段的值。
    priority
    输入整数值来设置插件出现在父菜单项中的顺序。
    输入父菜单项 id 以嵌套此插件,如 favorites
    favorites
    父菜单项的配置。
    title
    显示父菜单项的标题名称。

使用以下命令修改主菜单项或添加自定义菜单项:

流程

  • 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: true
    Copy to Clipboard Toggle word wrap
    default.<menu_group_parent_item_name>
    (可选)输入菜单组父项来配置静态主菜单项。如果没有 默认值。&lt;menu_item_name & gt; 设置了父 值,则不需要此字段。
    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: true
    Copy to Clipboard Toggle word wrap
    icon
    (可选)输入图标名称,如 category, bookmarks', appropriately etc. to change the default 图标。
    title
    输入空字符串 '' 从默认边栏隐藏学习路径。
    default.parentlist
    输入父菜单项。
    输入要嵌套菜单条目的父菜单,如 default.parentlist
    title
    输入菜单条目名称,如 My CatalogOverviewReferences
    输入要重定向到的页面。例如,default.references 会重定向到 /references 页面。
    enabled
    (可选)输入 true 以在侧边栏中显示菜单项。输入 false 以隐藏边栏中的菜单项。
Red Hat logoGithubredditYoutubeTwitter

学习

尝试、购买和销售

社区

关于红帽文档

通过我们的产品和服务,以及可以信赖的内容,帮助红帽用户创新并实现他们的目标。 了解我们当前的更新.

让开源更具包容性

红帽致力于替换我们的代码、文档和 Web 属性中存在问题的语言。欲了解更多详情,请参阅红帽博客.

關於紅帽

我们提供强化的解决方案,使企业能够更轻松地跨平台和环境(从核心数据中心到网络边缘)工作。

Theme

© 2026 Red Hat
返回顶部