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

第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 }
Copy to Clipboard Toggle word wrap

前提条件

  • 管理者アクセス権があり、動的プラグイン設定の 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
    Copy to Clipboard Toggle word wrap
    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
    Copy to Clipboard Toggle word wrap
    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
    Copy to Clipboard Toggle word wrap
    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/)
                * [Janus Plugins](https://github.com/janus-idp/backstage-plugins)
                * [Backstage Community Plugins](https://github.com/backstage/community-plugins)
                * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins)
                * [RHDH Showcase](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/)
                * [Janus Plugins](https://github.com/janus-idp/backstage-plugins)
                * [Backstage Community Plugins](https://github.com/backstage/community-plugins)
                * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins)
                * [RHDH Showcase](https://github.com/redhat-developer/rhdh)
    Copy to Clipboard Toggle word wrap
    プレースホルダー

    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'
    Copy to Clipboard Toggle word wrap
    スター付きエンティティーのカタログ化

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

    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: CatalogStarredEntitiesCard
    Copy to Clipboard Toggle word wrap
    注目のドキュメント

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

    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: FeaturedDocsCard
    Copy to Clipboard Toggle word wrap
    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 }
    Copy to Clipboard Toggle word wrap
    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 }
    Copy to Clipboard Toggle word wrap
    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 }
    Copy to Clipboard Toggle word wrap
トップに戻る
Red Hat logoGithubredditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

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

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

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

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

会社概要

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

Theme

© 2025 Red Hat