第 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
文件配置所示:
先决条件
-
您有管理访问权限,并可修改动态插件配置的
app-config.yaml
文件。
流程
在 Red Hat Developer Hub 中为 Home 页面配置不同的卡,如以下代码所示:
- 搜索
您可以使用 SearchBar 卡直接在 Home 页面中提供基本搜索功能。
Copy to Clipboard Copied! Toggle word wrap Toggle overflow Expand 表 12.1. 可用的 props prop default 描述 path
/search
如果需要,覆盖链接的搜索路径
queryParam
query
如果需要,覆盖搜索查询参数名称
- 快速访问
您可以使用 QuickAccessCard 卡作为可自定义的快捷方式面板。
Copy to Clipboard Copied! Toggle word wrap Toggle overflow Expand 表 12.2. 可用的 props prop default 描述 title
快速访问
如果需要,覆盖链接的搜索路径
path
none
如果需要,覆盖搜索查询参数名称
- 标题
您可以使用 head line 卡显示重要信息。
Copy to Clipboard Copied! Toggle word wrap Toggle overflow Expand 表 12.3. 可用的 props prop default 描述 title
none
标题
- Markdown
您可以使用 Markdown 卡直接在 Home 页面布局中显示丰富的格式化内容。此卡使用 Markdown 语法来显示结构化信息,如列表和链接(文档和插件存储库)。
Copy to Clipboard Copied! Toggle word wrap Toggle overflow - 占位符
您可以使用 Placeholder 卡作为实用程序元素,用于保留空间或在 Home 页面中进行布局测试。
Copy to Clipboard Copied! Toggle word wrap Toggle overflow - 目录不足实体
您可以使用 CatalogStarredEntitiesCard 卡在 Home 页面中提供一个专用空间,供用户查看标记为 starred 的目录实体。
Copy to Clipboard Copied! Toggle word wrap Toggle overflow - 特性文档
您可以使用 FeaturedDocsCard 卡来突出显示 Red Hat Developer Hub 中的特定文档,因为它可在 Home 页面中部署。
Copy to Clipboard Copied! Toggle word wrap Toggle overflow - EntitySection
您可以使用 EntitySection 卡创建一个视觉参与的部分,该部分突出显示各种类型的目录实体,如
组件
、API
、资源
和系统
。Copy to Clipboard Copied! Toggle word wrap Toggle overflow - OnboardingSection
您可以使用 OnboardingSection 卡快速发现 RHDH 中的学习资源。
Copy to Clipboard Copied! Toggle word wrap Toggle overflow - TemplateSection
您可以使用 TemplateSection 卡在 RHDH 中快速探索并启动软件模板。
Copy to Clipboard Copied! Toggle word wrap Toggle overflow