第 9 章 自定义主页
使用 app-config 时，您可以执行以下操作：
- 根据您安装并启用的插件，使用显示的额外卡自定义并扩展默认的 Home 页面布局。
- 更改快速访问链接。
添加、重新组织和删除以下可用卡：
- 搜索栏
- 快速访问
- 标题
- Markdown
- 占位符
- 目录不足实体
- 特性文档
9.1. 自定义主页卡
管理员可以改变位于 12 个列网中的固定卡高度。
默认 Home 页面如以下 app-config 文件配置所示：
dynamicPlugins:
frontend:
janus-idp.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: janus-idp.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 }表 9.1. 可用的 props prop default 描述 path/search如果需要，覆盖链接的搜索路径
queryParamquery如果需要，覆盖搜索查询参数名称
- 快速访问
dynamicPlugins: frontend: janus-idp.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 }表 9.2. 可用的 props prop default 描述 title快速访问如果需要，覆盖链接的搜索路径
pathnone
如果需要，覆盖搜索查询参数名称
- 标题
dynamicPlugins: frontend: janus-idp.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表 9.3. 可用的 props prop default 描述 titlenone
标题
- Markdown
dynamicPlugins: frontend: janus-idp.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/) * [GitHub Showcase](https://github.com/janus-idp/backstage-showcase) * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins) - 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/) * [GitHub Showcase](https://github.com/janus-idp/backstage-showcase) * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins)- 占位符
dynamicPlugins: frontend: janus-idp.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: janus-idp.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards importName: CatalogStarredEntitiesCard- 特性文档
dynamicPlugins: frontend: janus-idp.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards importName: FeaturedDocsCard
