Red Hat Summit Red Hat Summitサポートコンソール開発者トライアルの開始お問い合わせ

第6章 Red Hat Developer Hub のグローバルヘッダーの設定

管理者は、Red Hat Developer Hub のグローバルヘッダーを設定して、Developer Hub インスタンス全体で一貫性のある柔軟なナビゲーションバーを作成できます。デフォルトでは、Developer Hub のグローバルヘッダーには次のコンポーネントが含まれています。

  • Self-service ボタンを使用すると、さまざまなテンプレートにすばやくアクセスでき、ユーザーは Developer Hub 内のサービス、バックエンド、フロントエンドのプラグインを効率的にセットアップできます。
  • Support ボタンで、内部または外部のサポートページへのリンクを設定できます。
  • Notifications ボタンで、プラグインや外部サービスからのアラートや更新を表示します。
  • Search 入力フィールドを使用すると、Developer Hub 内のサービス、コンポーネント、ドキュメント、その他のリソースを検索できます。
  • Plugin extension capabilities には、Developer Hub で利用可能なプラグインのプリインストール済みおよび有効化済みのカタログがあります。
  • User profile ドロップダウンメニューから、プロファイル設定、外観のカスタマイズ、Developer Hub のメタデータ、ログアウトボタンにアクセスできます。

6.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
          settings: false
      dynamicPlugins:
        frontend:
          default.main-menu-items:
            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
1 

              - 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

ここでは、以下のようになります。

search
サイドバーメニューの Search モーダルを非表示にするには、false と入力します。サイドバーメニューに Search モーダルを表示するには、true と入力します。
settings
サイドバーメニューの Settings ボタンを非表示にするには、false と入力します。サイドバーメニューに Settings ボタンを表示するには、true と入力します。
default.main-menu-items
サイドバーメニューから Self-service ボタンを非表示にするには、このフィールドに入力します。このフィールドを削除すると、サイドバーに Self-service ボタンが表示されます。
position
ヘッダーをメインコンテンツの上に配置するには、above-main-content と入力します。ヘッダーをサイドバーの上に配置するには、above-sidebar と入力します。

デフォルトのグローバルヘッダーの機能を拡張するには、グローバルヘッダーのエントリーに次の属性を含めます。

mountPoint
ヘッダーの位置を指定します。ヘッダーをグローバルヘッダーとして指定するには、application/header を使用します。mountPoints フィールドにエントリーを追加することで、異なる位置に複数のグローバルヘッダーを設定できます。
importName

グローバルヘッダープラグインによってエクスポートされるコンポーネントを指定します。

red-hat-developer-hub.backstage-plugin-global-header パッケージ (デフォルトで有効) は、使用可能なマウントポイントの値として次のヘッダーコンポーネントを提供します。

  • SearchComponent: 検索バーを追加します (デフォルトで有効)。
  • Spacer: ヘッダーにスペースを追加して、ボタンを末尾に配置します。SearchComponent を無効にする場合に便利です。
  • HeaderIconButton: アイコンボタンを追加します。デフォルトでは、Self-service アイコンボタンは有効のままになります。
  • SupportButton: Support アイコンボタンを追加します。このボタンを使用すると、内部ページまたは外部ページへのリンクを設定できます。デフォルトで有効になっていますが、表示するには追加の設定が必要です。
  • NotificationButton: 未読通知をリアルタイムで表示し、Notifications ページに移動するための Notifications アイコンボタンを追加します。デフォルトで有効になっています (通知プラグインが必要です)。
  • Divider: 縦の区切り線を追加します。デフォルトでは、プロファイルドロップダウンとその他のヘッダーコンポーネントの間に区切り線が表示されます。
  • ProfileDropdown: ログインしているユーザーの名前を表示するプロファイルドロップダウンを追加します。デフォルトでは、2 つのメニュー項目が含まれています。
  • MenuItemLink: ドロップダウンメニューにリンク項目を追加します。デフォルトでは、プロファイルドロップダウンには Settings ページへのリンクが含まれています。
  • LogoutButton: プロファイルドロップダウンにログアウトボタンを追加します (デフォルトで有効)。
  • CreateDropdown: Self-service ドロップダウンボタンを追加します (デフォルトでは無効)。メニュー項目を設定可能です。
  • SoftwareTemplatesSection: ソフトウェアテンプレートリンクのリストを Self-service ドロップダウンメニューに追加します (デフォルトで無効)。CreateDropdown を有効にする必要があります。
  • RegisterAComponentSection: Self-service ドロップダウンメニューに Register a Component ページへのリンクを追加します (デフォルトでは無効)。CreateDropdown を有効にする必要があります。
config.position
ヘッダーの位置を指定します。サポートされている値は、above-main-content と above-sidebar です。

前提条件

  • ヘッダーに Support ボタンを表示する場合は、app-config.yaml ファイルでサポートの URL を設定する。
  • ヘッダーに Notifications ボタンを表示する場合は、通知プラグインをインストールする。

手順

  1. デフォルト設定をコピーし、ニーズに合わせてフィールド値を変更します。各ヘッダーコンポーネントの priority 値を調整すると、その位置を制御できます。さらに、設定にコンポーネントを追加または削除することで、コンポーネントを有効または無効にできます。残りのヘッダーボタンを、プロファイルドロップダウンボタンの前のヘッダー末尾に揃えるには、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

詳細情報

試用、購入および販売

コミュニティー

Red Hat ドキュメントについて

Red Hat をお使いのお客様が、信頼できるコンテンツが含まれている製品やサービスを活用することで、イノベーションを行い、目標を達成できるようにします。 最新の更新を見る.

多様性を受け入れるオープンソースの強化

Red Hat では、コード、ドキュメント、Web プロパティーにおける配慮に欠ける用語の置き換えに取り組んでいます。このような変更は、段階的に実施される予定です。詳細情報: Red Hat ブログ.

会社概要

Red Hat は、企業がコアとなるデータセンターからネットワークエッジに至るまで、各種プラットフォームや環境全体で作業を簡素化できるように、強化されたソリューションを提供しています。

Theme

© 2025 Red Hat