第12章 Home ページのカスタマイズ

app-config を使用する場合は、次のことができます。

インストールして有効にしたプラグインに基づいて表示される追加のカードを使用して、デフォルトの Home ページレイアウトをカスタマイズおよび拡張します。
クイックアクセスリンクを変更します。
次の利用可能なカードを追加、再編成、および削除します。
- 検索バー
- クイックアクセス
- 見出し
- マークダウン
- プレースホルダー
- スター付きエンティティーのカタログ化
- 注目のドキュメント

12.1. Home ページカードのカスタマイズ
リンクのコピー

管理者は、ホームページのレイアウトとコンテンツをカスタマイズして、ユーザーに適した使用感を作成できます。これには、さまざまな特殊なカードをメインビューに統合することが含まれます。

ホームページのレイアウトでは、12 列のグリッドシステムが使用されます。複数の画面ブレークポイントにわたって各カードの位置 (x)、幅 (w)、高さ (h) を正確に定義できます。

Extra-large (xl)
Large (lg)
Medium (md)
Small (sm)
Extra-small (xs)
Extra-extra-small (xxs)

デフォルトの Home ページは、次の app-config.yaml ファイル設定のとおりです。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      dynamicRoutes:
        - path: /
          importName: DynamicHomePage
      mountPoints:
        - mountPoint: home.page/cards
          importName: SearchBar
          config:
            layouts:
              xl: { w: 10, h: 1, x: 1 }
              lg: { w: 10, h: 1, x: 1 }
              md: { w: 10, h: 1, x: 1 }
              sm: { w: 10, h: 1, x: 1 }
              xs: { w: 12, h: 1 }
              xxs: { w: 12, h: 1 }
        - mountPoint: home.page/cards
          importName: QuickAccessCard
          config:
            layouts:
              xl: { w: 7, h: 8 }
              lg: { w: 7, h: 8 }
              md: { w: 7, h: 8 }
              sm: { w: 12, h: 8 }
              xs: { w: 12, h: 8 }
              xxs: { w: 12, h: 8 }
        - mountPoint: home.page/cards
          importName: CatalogStarredEntitiesCard
          config:
            layouts:
              xl: { w: 5, h: 4, x: 7 }
              lg: { w: 5, h: 4, x: 7 }
              md: { w: 5, h: 4, x: 7 }
              sm: { w: 12, h: 4 }
              xs: { w: 12, h: 4 }
              xxs: { w: 12, h: 4 }

前提条件

管理者アクセス権があり、動的プラグイン設定の app-config.yaml ファイルを変更できる。

手順

次のコードに示すように、Red Hat Developer Hub のホームページにさまざまなカードを設定します。

検索

SearchBar カードを使用すると、重要な検索機能をホームページ上で直接提供できます。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: SearchBar
          config:
            layouts:
              xl: { w: 10, h: 1, x: 1 }
              lg: { w: 10, h: 1, x: 1 }
              md: { w: 10, h: 1, x: 1 }
              sm: { w: 10, h: 1, x: 1 }
              xs: { w: 12, h: 1 }
              xxs: { w: 12, h: 1 }
            props:
              path: /search
              queryParam: query

Expand

表12.1 利用可能なプロパティー
プロパティー	デフォルト	説明
`path`	`/search`	必要に応じて、リンクされた検索パスをオーバーライドします。
`queryParam`	`query`	必要に応じて、検索クエリーパラメーター名をオーバーライドします。

クイックアクセス

QuickAccessCard カードを使用すると、カスタマイズ可能なショートカットパネルとして機能します。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: QuickAccessCard
          config:
            layouts:
              xl: { h: 8 }
              lg: { h: 8 }
              md: { h: 8 }
              sm: { h: 8 }
              xs: { h: 8 }
              xxs: { h: 8 }
            props:
              title: Quick Access
              path: /quickaccess

Expand

表12.2 利用可能なプロパティー
プロパティー	デフォルト	説明
`title`	`Quick Access`	必要に応じて、リンクされた検索パスをオーバーライドします。
`path`	none	必要に応じて、検索クエリーパラメーター名をオーバーライドします。

見出し

Headline カードを使用して重要な情報を表示できます。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Headline
          config:
            layouts:
              xl: { h: 1 }
              lg: { h: 1 }
              md: { h: 1 }
              sm: { h: 1 }
              xs: { h: 1 }
              xxs: { h: 1 }
            props:
              title: Important info

Expand

表12.3 利用可能なプロパティー
プロパティー	デフォルト	説明
`title`	none	タイトル

マークダウン

Markdown カードを使用すると、ホームページレイアウト内にリッチフォーマットのコンテンツを直接表示できます。このカードは、Markdown 構文を使用して、リストやリンク (ドキュメントやプラグインのリポジトリー) などの構造化された情報を表示します。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: MarkdownCard
          config:
            layouts:
              xl: { w: 6, h: 4 }
              lg: { w: 6, h: 4 }
              md: { w: 6, h: 4 }
              sm: { w: 6, h: 4 }
              xs: { w: 6, h: 4 }
              xxs: { w: 6, h: 4 }
            props:
              title: Company links
              content: |
                ### RHDH
                * [Website](https://developers.redhat.com/rhdh/overview)
                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                * [Backstage Community Plugins](https://github.com/backstage/community-plugins)
                * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins)
                * [RHDH Hub](https://github.com/redhat-developer/rhdh)
        - mountPoint: home.page/cards
          importName: Markdown
          config:
            layouts:
              xl: { w: 6, h: 4, x: 6 }
              lg: { w: 6, h: 4, x: 6 }
              md: { w: 6, h: 4, x: 6 }
              sm: { w: 6, h: 4, x: 6 }
              xs: { w: 6, h: 4, x: 6 }
              xxs: { w: 6, h: 4, x: 6 }
            props:
              title: Important company links
              content: |
                ### RHDH
                * [Website](https://developers.redhat.com/rhdh/overview)
                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                * [Backstage Community Plugins](https://github.com/backstage/community-plugins)
                * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins)
                * [RHDH Hub](https://github.com/redhat-developer/rhdh)

プレースホルダー

Placeholder カードは、スペースを確保したり、ホームページのレイアウトをテストしたりするためのユーティリティー要素として使用できます。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 1, h: 1 }
              lg: { w: 1, h: 1 }
              md: { w: 1, h: 1 }
              sm: { w: 1, h: 1 }
              xs: { w: 1, h: 1 }
              xxs: { w: 1, h: 1 }
            props:
              showBorder: true
              debugContent: '1'

スター付きエンティティーのカタログ化

CatalogStarredEntitiesCard カードを使用すると、ユーザーがスター付きとしてマークしたカタログエンティティーを表示する専用スペースをホームページに用意できます。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: CatalogStarredEntitiesCard

注目のドキュメント

Red Hat Developer Hub 内の特定のドキュメントを強調表示する方法として、FeaturedDocsCard カードを使用できます。これは、ホームページのデプロイメントで利用できます。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: FeaturedDocsCard

EntitySection

EntitySection カードを使用すると、Component、API、Resource、および System など、さまざまな種類のカタログエンティティーを明らかにする、視覚的に目を引くセクションを作成できます。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: EntitySection
          config:
            layouts:
              xl: { w: 12, h: 6 }
              lg: { w: 12, h: 6 }
              md: { w: 12, h: 6 }
              sm: { w: 12, h: 6 }
              xs: { w: 12, h: 6 }
              xxs: { w: 12, h: 14.5 }

OnboardingSection

OnboardingSection カードを使用すると、RHDH 内の学習リソースをすばやく見つけることができます。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: OnboardingSection
          config:
            layouts:
              xl: { w: 12, h: 5 }
              lg: { w: 12, h: 5 }
              md: { w: 12, h: 5 }
              sm: { w: 12, h: 5 }
              xs: { w: 12, h: 7 }
              xxs: { w: 12, h: 12 }

TemplateSection

TemplateSection カードを使用すると、RHDH でソフトウェアテンプレートをすばやく探索して開始できます。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: TemplateSection
          config:
            layouts:
              xl: { w: 12, h: 5 }
              lg: { w: 12, h: 5 }
              md: { w: 12, h: 5 }
              sm: { w: 12, h: 5 }
              xs: { w: 12, h: 5 }
              xxs: { w: 12, h: 14 }

第12章 Home ページのカスタマイズ

12.1. Home ページカードのカスタマイズ
リンクのコピー

詳細情報

試用、購入および販売

コミュニティー

会社概要

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

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

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

第12章 Home ページのカスタマイズ

12.1. Home ページカードのカスタマイズリンクのコピーリンクがクリップボードにコピーされました!

詳細情報

試用、購入および販売

コミュニティー

会社概要

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

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

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

12.1. Home ページカードのカスタマイズ
リンクのコピー