Red Hat Summit 红帽全球峰会支持控制台（Console）开发人员开始试用联系人

第 7 章 在 Red Hat Developer Hub 中配置全局标头

作为管理员，您可以配置 Red Hat Developer Hub 全局标头，以便在 Developer Hub 实例中创建一致且灵活的导航栏。默认情况下，Developer Hub 全局标头包括以下组件：

  • 自助服务 按钮提供对各种模板的快速访问，使用户能够高效地设置 Developer Hub 中的服务、后端和前端插件
  • 可以链接内部或外部支持页面的支持按钮
  • 通知 按钮显示来自插件和外部服务的警报和更新
  • 搜索 输入字段允许用户在 Developer Hub 中查找服务、组件、文档和其他资源
  • 插件扩展功能 在 Developer Hub 中提供预装并启用可用插件目录
  • 用户配置集 下拉菜单提供对配置集设置、外观自定义、Developer Hub 元数据和 logout 按钮的访问

7.1. 自定义 Red Hat Developer Hub 全局标头
复制链接

您可以使用 red-hat-developer-hub.backstage-plugin-global-header 动态插件来扩展带有额外按钮的全局标头，并自定义图标和功能的顺序和位置。另外，您可以使用这个新标头功能提供的挂载点创建并集成自定义动态标头插件，允许您进一步定制以满足您的需求。有关启用动态插件的更多信息，请参阅 Red Hat Developer Hub 中安装和查看插件。

默认全局标头配置

  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
    disabled: false
    pluginConfig:
      app:
        sidebar:
          search: false
1 

          settings: false
2 

      dynamicPlugins:
        frontend:
          default.main-menu-items:
3 

            menuItems:
              default.create:
                title: ''
          red-hat-developer-hub.backstage-plugin-global-header: # the default enabled dynamic header plugin
            mountPoints:
              - mountPoint: application/header
                importName: GlobalHeader
                config:
                  position: above-main-content
4 

              - mountPoint: global.header/component
                importName: SearchComponent
                config:
                  priority: 100
              - mountPoint: global.header/component
                importName: Spacer
                config:
                  priority: 99
                  props:
                    growFactor: 0
              - mountPoint: global.header/component
                importName: HeaderIconButton
                config:
                  priority: 90
                  props:
                    title: Self-service
                    icon: add
                    to: create
              - mountPoint: global.header/component
                importName: SupportButton
                config:
                  priority: 80
              - mountPoint: global.header/component
                importName: NotificationButton
                config:
                  priority: 70
              - mountPoint: global.header/component
                importName: Divider
                config:
                  priority: 50
              - mountPoint: global.header/component
                importName: ProfileDropdown
                config:
                  priority: 10
              - mountPoint: global.header/profile
                importName: MenuItemLink
                config:
                  priority: 100
                  props:
                    title: Settings
                    link: /settings
                    icon: manageAccounts
              - mountPoint: global.header/profile
                importName: LogoutButton
                config:
                  priority: 10
Copy to Clipboard Toggle word wrap

1
搜索 ：在侧边栏菜单中隐藏 搜索 模态。将其更改为 true 以在侧边栏中显示 Search modal。
2
设置 ：在侧边栏菜单中隐藏 Settings 按钮。将它更改为 true 以显示边栏中的 Settings 按钮。
3
default.main-menu-items: 从侧边栏菜单中隐藏 自助服务 按钮。删除此字段以显示侧边栏中的 自助服务 按钮。
4
position ：定义标头的位置。选项： above-main-content 或 above-sidebar.

要扩展默认全局标头的功能，请在全局标头条目中包含以下属性：

mountPoint
指定标头的位置。使用 application/header 将它指定为全局标头。您可以通过在 mountPoints 字段中添加条目，在不同的位置配置多个全局标头。
importName

指定全局标头插件导出的组件。

red-hat-developer-hub.backstage-plugin-global-header 软件包（默认为启用）提供以下标头组件作为可能的挂载点值：

  • SearchComponent ：添加一个搜索栏（默认为启用）。
  • Spacer ：在标头中添加空间以定位按钮（在结尾处）。当您禁用 SearchComponent 时很有用。
  • HeaderIconButton ：添加一个图标按钮。默认情况下，自助服务 图标按钮保持启用状态。
  • SupportButton ：添加一个 支持 图标按钮，允许用户配置到内部或外部页面的链接。默认启用，但需要额外的配置来显示。
  • NotificationButton ：添加一个 通知 图标按钮，以实时显示未读取通知并导航到 通知 页面。默认启用（需要通知插件）。
  • 划分器 ：添加垂直划分器。默认情况下，配置集下拉菜单和其他标头组件之间会显示一个划分器。
  • ProfileDropdown ：添加一个配置文件下拉菜单，其中显示已登录的用户名。默认情况下，它包含两个菜单项。
  • MenuItemLink ：从下拉菜单中选择链接项。默认情况下，配置集下拉菜单包含 Settings 页面的链接。
  • LogoutButton ：在配置文件下拉列表中添加注销按钮（默认为启用）。
  • CreateDropdown ：添加 自助服务 下拉菜单按钮（默认为禁用）。菜单项是可配置的。
  • SoftwareTemplatesSection ：添加到 自助服务 下拉菜单的软件模板链接列表（默认为禁用）。您必须启用 CreateDropdown。
  • RegisterAComponentSection ：在 Self-service 下拉菜单中添加到 Register a Component 页面的链接（默认为禁用）。您必须启用 CreateDropdown。
config.position
指定标头的位置。支持的值有 above-main-content 和 above-sidebar。

先决条件

  • 您必须在 app-config.yaml 文件中配置支持 URL，以便在标头中显示 Support 按钮。
  • 您必须安装通知插件，以便在标头中显示 Notifications 按钮。

流程

  1. 复制默认配置并修改字段值以满足您的需要。您可以调整每个标头组件的 优先级值 来控制其位置。另外，您可以通过在配置中添加或删除组件来启用或禁用组件。要确保剩余的标头按钮与配置集下拉菜单按钮前标头的末尾一致，请在 Spacer 挂载点中将 config.props.growFactor 设置为 1 来启用 Spacer 组件。例如： 

    - mountPoint: global.header/component
  importName: Spacer
  config:
    priority: 100
    props:
      growFactor: 1
    Copy to Clipboard Toggle word wrap

  2. 要使用自定义标头，您必须通过将插件配置添加到 app-config-dynamic.yaml 文件中来将其作为动态插件安装。例如： 

    - package: <npm_or_oci_package-reference>
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        <package_name>:
          mountPoints:
            - mountPoint: application/header
              importName: <application_header_name>
              config:
                position: above-main-content
            - mountPoint: global.header/component
              importName: <header_component_name>
              config:
                priority: 100
            - mountPoint: global.header/component
              importName: <header_component_name>
              config:
                priority: 90
    Copy to Clipboard Toggle word wrap

    其中：

    <npm_or_oci_package-reference>
    指定软件包名称。
    <application_header_name>
    指定应用程序标头的名称。例如： MyHeader
    <header_component_name>

    指定标头组件的名称。例如： MyHeaderComponent

    注意

    importName 是一个可选名称，引用 scaffolder 字段扩展 API 返回的值。

  3. 可选： 要禁用全局标头，请在 dynamic-plugins.yaml 文件中将 disabled 字段的值设置为 true。例如： 

    - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
  disabled: true
    Copy to Clipboard Toggle word wrap
返回顶部
Red Hat logoGithubredditYoutubeTwitter

学习

尝试、购买和销售

社区

关于红帽文档

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

让开源更具包容性

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

關於紅帽

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

Theme

© 2025 Red Hat