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

第 12 章 自定义主页

使用 app-config 时，您可以执行以下操作：

  • 根据您安装并启用的插件，使用显示的额外卡自定义并扩展默认的 Home 页面布局。
  • 更改快速访问链接。

  • 添加、重新组织和删除以下可用卡：

    • 搜索栏
    • 快速访问
    • 标题
    • Markdown
    • 占位符
    • 目录不足实体
    • 特性文档

12.1. 自定义主页卡
复制链接

作为管理员，您可以自定义 Home 页面的布局和内容，以创建定制的用户体验。这包括将各种专用卡集成到主视图中。

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 中为 Home 页面配置不同的卡，如以下代码所示：

    搜索

    您可以使用 SearchBar 卡直接在 Home 页面中提供基本搜索功能。 

    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. 可用的 props
    propdefault描述

    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. 可用的 props
    propdefault描述

    title

    快速访问

    如果需要，覆盖链接的搜索路径

    path

    none

    如果需要，覆盖搜索查询参数名称

    标题

    您可以使用 head line 卡显示重要信息。 

    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. 可用的 props
    propdefault描述

    title

    none

    标题

    Markdown

    您可以使用 Markdown 卡直接在 Home 页面布局中显示丰富的格式化内容。此卡使用 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 卡作为实用程序元素，用于保留空间或在 Home 页面中进行布局测试。 

    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 卡在 Home 页面中提供一个专用空间，供用户查看标记为 starred 的目录实体。 

    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: CatalogStarredEntitiesCard
    Copy to Clipboard Toggle word wrap
    特性文档

    您可以使用 FeaturedDocsCard 卡来突出显示 Red Hat Developer Hub 中的特定文档，因为它可在 Home 页面中部署。 

    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 卡创建一个视觉参与的部分，该部分突出显示各种类型的目录实体，如 组件、API、资源 和 系统。 

    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

学习

尝试、购买和销售

社区

关于红帽文档

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

让开源更具包容性

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

關於紅帽

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

Theme

© 2025 Red Hat