红帽全球峰会第 9 章 自定义主页
使用 app-config 时，您可以执行以下操作：
- 根据您安装并启用的插件，使用显示的额外卡自定义并扩展默认的 Home 页面布局。
- 更改快速访问链接。
添加、重新组织和删除以下可用卡：
- 搜索栏
- 快速访问
- 标题
- Markdown
- 占位符
- 目录不足实体
- 特性文档
9.1. 自定义主页卡
复制链接链接已复制到粘贴板!
管理员可以改变位于 12 个列网中的固定卡高度。
默认 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 中为 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 }Expand 表 9.1. 可用的 props prop default 描述 path/search如果需要，覆盖链接的搜索路径
queryParamquery如果需要，覆盖搜索查询参数名称
- 快速访问
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 }Expand 表 9.2. 可用的 props prop default 描述 title快速访问如果需要，覆盖链接的搜索路径
pathnone
如果需要，覆盖搜索查询参数名称
- 标题
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 infoExpand 表 9.3. 可用的 props prop default 描述 titlenone
标题
- 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)- 占位符
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'- 目录不足实体
dynamicPlugins: frontend: red-hat-developer-hub.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards importName: CatalogStarredEntitiesCard- 特性文档
dynamicPlugins: frontend: red-hat-developer-hub.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards importName: FeaturedDocsCard
'%20d='M201.5%20305.5c-13.8%200-24.9-11.1-24.9-24.6%200-13.8%2011.1-24.9%2024.9-24.9%2013.6%200%2024.6%2011.1%2024.6%2024.9%200%2013.6-11.1%2024.6-24.6%2024.6zM504%20256c0%20137-111%20248-248%20248S8%20393%208%20256%20119%208%20256%208s248%20111%20248%20248zm-132.3-41.2c-9.4%200-17.7%203.9-23.8%2010-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3%2055.4%2012.5c0%2013.6%2011.1%2024.6%2024.6%2024.6%2013.8%200%2024.9-11.3%2024.9-24.9s-11.1-24.9-24.9-24.9c-9.7%200-18%205.8-22.1%2013.8l-61.2-13.6c-3-.8-6.1%201.4-6.9%204.4l-19.1%2086.4c-33.2%201.4-63.1%2011.3-85.5%2026.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9%200-46.3%2046.9-14.4%2062.8-1.1%205-1.7%2010.2-1.7%2015.5%200%2052.6%2059.2%2095.2%20132%2095.2%2073.1%200%20132.3-42.6%20132.3-95.2%200-5.3-.6-10.8-1.9-15.8%2031.3-16%2019.8-62.5-14.9-62.5zM302.8%20331c-18.2%2018.2-76.1%2017.9-93.6%200-2.2-2.2-6.1-2.2-8.3%200-2.5%202.5-2.5%206.4%200%208.6%2022.8%2022.8%2087.3%2022.8%20110.2%200%202.5-2.2%202.5-6.1%200-8.6-2.2-2.2-6.1-2.2-8.3%200zm7.7-75c-13.6%200-24.6%2011.1-24.6%2024.9%200%2013.6%2011.1%2024.6%2024.6%2024.6%2013.8%200%2024.9-11.1%2024.9-24.6%200-13.8-11-24.9-24.9-24.9z'/%3e%3c/svg%3e){kind=small}